Přeskočit obsah

Propojení JS knihoven D3 a Leaflet

Při práci ve VS Code je nutné nainstalovat extension Live Sever

Jednotlivé kroky jsou rozděleny do samostatných commitů pro případné hledání chyb:

0) Připojení souborů s mapou (Leaflet) a grafem (D3)

  • do stejné složky vložit soubory pro vykreslení mapy a grafu

stin_relief

Výstupy obou stránek

1) Vytvoření samostatného souboru pro leaflet script

  • do nového souboru se překopíruje skript vytvářející mapu v index_geoJSON.html
  • reference na vytvořený JS skript v body html

2) Přidání grafu k mapě

  • překopírování kódu pro vykreslení grafu z D3_YWEK_kod.html do index_geoJSON.html
  • další práce pokračuje v index_geoJSON.html

3) Uspořádání UI stránky

  • rozřazení do divů - mapa s popisem + graf s popupem
  • přidělení stylů pro divy kvůli správnému rozdělení stránky
  • přepsání výpočtu polohy popu-pu

stin_relief

Uspořádání UI

4) Import bodové vrstvy ORP

  • úprava geoJSONu + propojení s html
  • import geoJSON bodů ORP do mapy jako nová vrstva
  • nastavení symbologie vrsty
  • posun vrstvy na první místo vykreslování v mapě

stin_relief

Import bodové vrstvy ORP do mapy

5) Vizualizace diagramu pomocí D3

  • skrytí vykreslování bodových znaků ORP
  • nastavení vykreslení diagramů

6) Oprava vykreslení grafů

  • oprava vykreslování grafů v mapě

stin_relief

Opravené vykreslení bodů

 Užitečné odkazy