API TSK - Meteočidla a mapa Prahy v SVG

Aktuální počasí v Praze

TSK meteorologická čidla textově

Ukázka použití TSK API a vektorové SVG mapy

API TSK na požadavek (url) vrátí JSON s aktuálními daty z meteostanic. Objekt má pole "results", které obsahuje objekty, každý pak má sadu vlastností:tempair, humidity, lat, lng, atd. Požádáme tedy o data, a dále už zbývá jen výsledek nějak zobrazit...

Vzhledem k tomu že stanice hlásí lat a lng (neboli North a East GPS souřadnice) tak jsem si vybral, kromě tabulkového zobrazení i "složitější" cestu, a to zobrazení na mapě Prahy.

Jak vytvořit mapu?

Já jsem použil vektorou SVG mapu, kterou jsem vytvořil na základě vytažených dat z Českého katastrálníhu úřadu. Celý návod najdete zde. Výsledek pak vypadá takhle:


<svg width="100.00%" constant="1.66" height="100.00%" multiplier="200" minn="49.9419011868264" 
    id="svg" mine="14.2245315027158" maxe="14.706787850872" viewBox="0.00 0.00 59.00 48.00 " 
    maxn="50.1774307938349" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <g id="Praha1" class="group">
        <path class="path" nazev="Praha 1" typ="Mop"
              d="M 22.46187 16.44471 22.60367 16.73652 22.51803 16.93641 23.12785 16.60115 23.19443 16.7706 .... z "
              id="136" />
    </g>

    ...atd...

</svg>

Zobrazení teplot na mapě

Vzhledem k tomu že mapku jsem vytvářel sám, tak jsem si k ní přidal nějaká důležitá data, která jsou potřeba pro zobrazení libovolného bodu dle jeho souřadnic. A to: GPS souřadnice levého spodního rohu, a měřítko (násobitel), a ještě konstantu pro přenásobení souřadnice E.

Proč konstanta? GPS East souřadnice totiž neodpovídá v 2D promítání souřadnici X, protože země je kulatá:) Pro zjednodušení jsem zvolil konstantu přibližně 0,6. Eastové souřadnice tedy násobím vždy touto konstantou a mapa pak vypadá přijatelně přesně.

K zobrazení bodu v mapě jsem si napsal jednoduchou funkci, která obdrží souřadnice E a N a text, který má na tyto souřadnice vložit.


/**
 * Přidá bod do mapy prahy
 * @param e East
 * @param n North
 * @param content Text
 */
function AddPointToMap(e: number, n: number, content: string, idOrName: string) {
    //bod GPS
    //data z svg
    let svgW = svg.viewBox.baseVal.width;
    let svgH = svg.viewBox.baseVal.height;
    let mine = svg.attributes.mine.value;
    let minn = svg.attributes.minn.value;
    let multiplier = svg.attributes.multiplier.value;
    let constant = svg.attributes.constant.value;

    //výpočet x a y
    let x = ((e - mine) * multiplier / constant);
    let y = svgH - ((n - minn) * multiplier);

    let svgns = "http://www.w3.org/2000/svg";

    //bod    
    let circ = document.createElementNS(svgns, "circle");
    circ.setAttributeNS(null, 'cx', x.toString());
    circ.setAttributeNS(null, 'cy', y.toString());
    circ.setAttributeNS(null, 'r', 0.5.toString());
    circ.setAttributeNS(null, 'style', 'fill: #1b3522; stroke: #466d0f; stroke-width: 0.1px;');
    circ.setAttributeNS(null, 'nazev', idOrName);
    circ.setAttribute("class", "temppoint");
    svg.appendChild(circ);

    //text
    let text = document.createElementNS(svgns, "text");
    text.setAttributeNS(null, 'x', x.toString());
    text.setAttributeNS(null, 'y', y.toString());
    text.setAttributeNS(null, 'nazev', idOrName);
    text.setAttribute("class", "temptext");
    text.innerHTML = content;
    svg.appendChild(text);
}

Použití API TSK

Použito:

  • TypeScript/JS
  • AJAX
  • API TSK
  • SVG