Leaflet

Leaflet je knihovna v jazyce JavaScript, pomocí které lze vytvářet webové mapové aplikace. Na rozdíl od OpenLayers je to spíše knihovna lehká, určená pro jednodušší aplikace. To ji ovšem nijak nediskvalifikuje pro specifické případy použití.

Poznámka

Uvedený příklad si můžete zobrazit v prohlížeči a vidět tak celý jeho zdrojový kód.

Inicializace

Nejdříve musíme připravit webovou stránku, aby obsahovala element s identifikátorem map, do kterého chceme zobrazit mapu. Dále se potřebujeme odkázat na knihovnu Leaflet.

        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<div id="map" style="width: 600px; height: 400px"></div>
        <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

Mapa

V dalším kroku vytvoříme mapový objekt a vložíme ho do připraveného elementu map.

                // vytvoříme mapu
		var map = L.map('map').setView([50.162900, 14.429517], 12);

Mapě byl nastaven pohled se středem na zeměpisných souřadnicích 50.16, 14.43 a úroveň přiblížení 12.

Vrstvy

Přidáme do mapy dlaždicovanou vrstvu tileLayer.

                // přidáme podkladovou dlaždicovanou vrstvu z projektu OpenStreetMap
                var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                var osmAttrib='Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
                var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 18, attribution: osmAttrib});
                map.addLayer(osm);

Dále přidáme letecký snímek námi vypublikované služby WMS s leteckým snímkem.

                // přidáme námi vypublikovanou vrstvu WMS s leteckým snímkem
                var ortofoto = L.tileLayer.wms("/services/vugtkwms", {
                    layers: 'ortofoto_local',
                    format: 'image/jpeg',

                    attribution: "Letecký snímek VUGTK"

A nakonec WMS vrstvu s vektorovými daty budov.

                // přidáme námi vypublikovanou vrstvu WMS s vektorovými daty
                var budovy = L.tileLayer.wms("/services/vugtkwms", {
                    layers: 'budovy',
                    format: 'image/png',
                    transparent: true,
                    attribution: "Vektory VUGTK"
                });

Poznámka

Jak již bylo řečeno, Leaflet je ve své podstatě jednoduchá knihovna, jejíž cíl není přizpůsobit se požadovaným datům a ty „nějak“ zobrazit. Jde o knihovnu, která vyžaduje data určitým způsobem předzpracovaná a ty následně zobrazuje velice dobře na většině myslitelných zařízeních.

Leaflet nepodporuje standard OGC WFS, i když má skvělou podporu pro zobrazování vektorových dat. Ty ale nemohou přicházet ve formátu GML (dle standardu OGC WFS), ale nejlépe ve formátu GeoJSON.

Vrstva WFS

Přidáme vektorovou vrstvu z našeho WFS serveru. Data musí být nejprve načtena ze serveru a až poté můžeme vrstvu vytvořit. Nemůžeme se odkázat na WFS server přímo s dotazem GetFeature, protože pravděpodobně narazíme na problém s různými doménami (viz Cross-site scripting). Proto budeme postupovat přes již vytvořený skript (proxy).

                // přidání vrstvy GeoJSON - z našeho WFS Serveru
                $.ajax({
                  dataType: "json",
                  type: "GET",
                  // použijeme proxy.cgi, pro dotaz na jiný server
                  url: "/services/vugtkwfs?service=wfs&version=1.1.0&request=getfeature&typename=tows:myulice&outputformat=application/json&srsname=EPSG:4326",

                  success: function (response) {
                      // je-li dotaz na server úspěšný, můžeme vytvořit vrstvu
                      var ulice = L.geoJson(response, {
                         style: function (feature) {
                            return {color: "#FF0000"};
                        }
                      });
                      layerSwitcher.addOverlay(ulice, "RUAIN Ulice");
                }
              });

Další typy vrstev a vstupních dat, stejně jako detaily ke konfiguraci a možnostem Leafletu, si můžete prohlídnout v příkladech [1] nebo dokumentaci [2].

Poznámky

[1]	Příklady Leaflet http://leafletjs.com/examples.html

[2]	Dokumentace Leaflet http://leafletjs.com/reference.html