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
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
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ě
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ě
Užitečné odkazy
- práce s div: https://www.w3schools.com/html/html_div.asp
- mapová vizualizace přímo z D3: https://observablehq.com/@coachman/week-11-intro-to-d3-js-mapping-data-with-d3
- Leaflet + D3 popup: https://gist.github.com/Andrew-Reid/11602fac1ea66c2a6d7f78067b2deddb#file-thumbnail-png
- D3 + Leaflet: https://observablehq.com/@sfu-iat355/intro-to-leaflet-d3-interactivity
- Leaflet - načtení geoJSON: https://leafletjs.com/examples/geojson/