Jak jednoduše vytvořit mapovou aplikaci s Leafletem


Před nějakolika málo dny byla vyhlášena nová chráněná krajinná oblast Brdy. Chtěli jsme se tedy podívat, kde nás po lese bude honit stráž přírody, když si budeme na výletě chtít opéct buřta a kde nás bude otravovat jen četník, hajnej, nebo zelený obejda s flintou. K tomuto účelu je však, bohužel, statická mapka na stránkách AOPK hrubě nedostačující. Proto jsme pro Vás připravili krátký návod, jak vytvořit jednoduchou webovou mapovou aplikaci se zoomovatelnou mapkou. Není k tomu potřeba žádná znalost webových technologií nebo javascriptu, protože použijeme package v open source GIS desktopu QGIS.

Bohužel se nám nepodařilo získat aktuální vektorový obrys CHKO, použijeme tedy upravenou verzi návrhu z roku 2013, která se v několika málo drobnostech liší (kontrolováno oproti georeferencovanému obrázku ze stránek AOPK).

Budete potřebovat nainstalovaný QGIS.
Na horní liště najdeme tlačítko “Vrstva” a vybereme “Přidat vrstvu”->”Přidat vektorovou vrstvu” (také funguje klávesová zkrátka “CTRL+SHIFT+v”).

U vrstvy vybereme vlastnosti (levé tlačítko myši) a nastavíme souřadnicový systém na S-JTSK (SRID 5514), pakliže už nastavený není.


Vrstvu nastylujeme (doporučuji nastavit průhlednost 50%, šrafování, nebo plocha bez výpně nefunguje ideálně).

Z menu “Zásuvné moduly”-> “Spravovat zásuvné moduly” přidáme zásuvný modul qgis2leaf.


Pokud všechno provedete správně, objeví se vám na liště nové tlačítko.


Aktualizace: Vývoj pluginu qgis2leaf byl již ukončen a nahrazen pluginem qgis2web, který oproti plginu qgis2leaf umí vytvořit výstup jak s leafletem, tak s open layers 3.

Červeným knoflíkem “Get Layers” natáhneme do rozhraní vrstvy z aktivní mapové kompozice.
Vybereme vrstvy, které chceme exportovat.
Zaškrtnutím volby “Encode to JSON” řekneme pluginu, že chceme vrstvy uložit do formátu GeoJSON. budeme je tedy moci snadno uložit v souborovém formátu na web, případně vložit rovnou do javascriptového kódu. Vrstva bude pluginem transformována do WGS84, pokud nezatrhneme “Match project CRS”.
Z nabídky podkladových vrstev vybereme OSM “OSM Standard”, nastavíme cílovou složku, název stránky, titulek a podtitulek.
Nyní můžeme tvořit.

Ve vybrané složce se vytvoří stránka index.html a složky s javascriptem, css, daty, případně ještě dalšími věcmi. Celou složku teď můžeme nahrát na web. Aplikaci je samozřejmě možné i vložit přímo do existující stránky. To však vyžaduje drobné úpravy, které nemusí být ovšem triviální (může například dojít ke konfliktu css stylů, id html elementů apod). Obzvlášť vkládání do editorů CMS systémů může být pořádně vypečené.




Post navigation