„Leaflet” változatai közötti eltérés
Mate (vitalap | szerkesztései) a |
|||
(11 közbenső módosítás, amit egy másik szerkesztő végzett, nincs mutatva) | |||
1. sor: | 1. sor: | ||
− | A '''Leaflet''' egy [https://hu.wikipedia.org/wiki/Ny%C3%ADlt_forr%C3%A1sk%C3%B3d%C3%BA_szoftver nyílt forrású] [https://hu.wikipedia.org/wiki/JavaScript JavaScript] library, mely kliens oldalon teszi lehetővé térképek interaktív megjelenítését. A Leaflet API kéréseket küld | + | A '''Leaflet''' egy [https://hu.wikipedia.org/wiki/Ny%C3%ADlt_forr%C3%A1sk%C3%B3d%C3%BA_szoftver nyílt forrású] [https://hu.wikipedia.org/wiki/JavaScript JavaScript] library, mely kliens oldalon teszi lehetővé térképek interaktív megjelenítését. A Leaflet API kéréseket küld [https://en.wikipedia.org/wiki/Tile_Map_Service TMS] szolgáltatókhoz, mint pl. [https://en.wikipedia.org/wiki/Mapbox MapBox] és a kapott képeket megjelenítve további funkciókat ad hozzá (pl. méretarány változtatása, térképszelvények közötti navigáció). |
− | |||
− | + | =Konfiguráció= | |
− | = | ||
== Host verzió == | == Host verzió == | ||
− | + | A legfrissebb stable verzió elérhető [https://en.wikipedia.org/wiki/Content_delivery_network CDN]-en. Használathoz az alábbi kódot kell a HTML kód fej részébe illesztenünk: | |
− | + | <source lang="html4strict"> | |
− | |||
− | < | ||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | ||
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | ||
− | </ | + | </source> |
− | </ | + | Leaflet CDN-en keresztül történő használata esetén a lehetséges biztonsági problémák elkerülésére a készítők a [https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity subresource integrity] engedélyezését javasolják: |
+ | <source lang="html4strict"> | ||
+ | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/> | ||
+ | <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script> | ||
+ | </source> | ||
== Letöltött verzió == | == Letöltött verzió == | ||
+ | A [http://leafletjs.com/download.html weboldalról] letöltött verziók esetén az archívumot kitömörítve és az oldal forrásában meghivatkozva használható: | ||
+ | <source lang="html4strict"> | ||
+ | <link rel="stylesheet" href="/path/to/leaflet.css" /> | ||
+ | <script src="/path/to/leaflet.js"></script> | ||
+ | </source> | ||
+ | |||
+ | A letöltött archívum a következőket tartalmazza: | ||
+ | * leaflet.js – a leaflet library egyszerűsített JavaScript forrása | ||
+ | * leaflet-src.js – a leaflet library teljes forrása, debuggoláshoz hasznos | ||
+ | * leaflet.css – a libraryhoz használt stylesheet állomány | ||
+ | * images – a CSS által használt képek | ||
== JavaScript csomagkezelővel == | == JavaScript csomagkezelővel == | ||
+ | [https://www.npmjs.com/ NPM csomagkezelő] használata esetén lokális másolat készíthető az <syntaxhighlight lang="bash">npm install leaflet</syntaxhighlight> parancs kiadásával. Ekkor a fájlok a következő helyre kerülnek: <syntaxhighlight lang="bash">node_modules/leaflet/dist</syntaxhighlight> | ||
+ | |||
+ | == Tile szerver== | ||
+ | Leaflet több tile szerver használatát is támogatja. Mini-térképes előnézet és a használathoz szükséges JavaScript kód a | ||
+ | [http://leaflet-extras.github.io/leaflet-providers/preview/ Leaflet providers] oldalon elérhető. | ||
+ | |||
+ | === Saját tile szerver === | ||
+ | Egy részletes leírás található a következő linken: [https://switch2osm.org/serving-tiles/ SWITCH2OSM] | ||
+ | |||
+ | |||
+ | |||
+ | =Főbb komponensek= | ||
+ | A library felépítésének áttekintésére elérhető egy interaktív [http://leafletjs.com/examples/extending/class-diagram.html osztálydiagram]. | ||
+ | |||
+ | == Map == | ||
+ | A fő osztálya az API-nak, ezzel lehet létrehozni a térképet az oldalon. | ||
+ | <source lang="html4strict"> | ||
+ | var map = L.map('map', { | ||
+ | center: [51.505, -0.09], | ||
+ | zoom: 13 | ||
+ | }); | ||
+ | </source> | ||
+ | |||
+ | |||
+ | == UI rétegek == | ||
+ | === Marker === | ||
+ | Marker objektumok megjeleníthetők a térképen. Ezek olyan ikonok, amelyekhez különböző események rendelhetők (click, drag). | ||
+ | <source lang="html4strict"> | ||
+ | L.marker([50.5, 30.5]).addTo(map); | ||
+ | </source> | ||
+ | |||
+ | === Popup === | ||
+ | A térképen elhelyezhetők popup ablakok. Ha egy marker objektum click eventjéhez szeretnénk popupot rendelni: | ||
+ | <source lang="html4strict"> | ||
+ | marker.bindPopup(popupContent).openPopup(); | ||
+ | </source> | ||
+ | |||
+ | |||
+ | === Tooltip === | ||
+ | Rövid szövegek megjelenítésére használható: | ||
+ | <source lang="html4strict"> | ||
+ | marker.bindTooltip(“my tooltip text”).openTooltip(); | ||
+ | </source> | ||
+ | |||
+ | == Raszteres rétegek == | ||
+ | === TileLayer === | ||
+ | Betölti és megjeleníti a térképszelvényeket a map objektumon. | ||
+ | <source lang="html4strict"> | ||
+ | L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map); | ||
+ | </source> | ||
+ | |||
+ | === ImageOverlay === | ||
+ | Egy különálló kép betöltése és megjelenítése rétegként a map objektum határain belül. | ||
+ | <source lang="html4strict"> | ||
+ | var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg', | ||
+ | imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; | ||
+ | L.imageOverlay(imageUrl, imageBounds).addTo(map); | ||
+ | </source> | ||
+ | |||
+ | == Vektoros rétegek == | ||
+ | === Path === | ||
+ | Közvetlenül nem használható, olyan absztrakt osztály, ami különböző vektoros rétegobjektumok (Polygon, Polyline, Circle) közötti beállításokat és konstansokat tárolja. | ||
+ | |||
+ | === Polyline === | ||
+ | Az osztály segítségével polyline-t lehet rajzolni. | ||
+ | <source lang="html4strict"> | ||
+ | var latlngs = [ | ||
+ | [45.51, -122.68], | ||
+ | [37.77, -122.43], | ||
+ | [34.04, -118.2] | ||
+ | ]; | ||
+ | var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map); | ||
+ | map.fitBounds(polyline.getBounds()); | ||
+ | </source> | ||
+ | |||
+ | === Polygon === | ||
+ | Polygon készítésére használható osztály. | ||
+ | <source lang="html4strict"> | ||
+ | var latlngs = [[37,-109.05],[41,-109.03],[41,-102.05],[37,-102.04]]; | ||
+ | var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map); | ||
+ | map.fitBounds(polygon.getBounds()); | ||
+ | </source> | ||
+ | |||
+ | === Rectangle === | ||
+ | <source lang="html4strict"> | ||
+ | var bounds = [[54.559322,-5.767822], [56.1210604,-3.021240]]; | ||
+ | L.rectangle(bounds, {color:”#ff7800”,weight:1}).addTo(map); | ||
+ | map.fitBounds(bounds); | ||
+ | </source> | ||
+ | |||
+ | === Circle === | ||
+ | <source lang="html4strict"> | ||
+ | L.circle([50.5, 30.5], {radius:200}).addTo(map); | ||
+ | </source> | ||
+ | |||
+ | == Alap típusok == | ||
+ | === LatLng === | ||
+ | Egy földrajzi pont reprezentálására (hosszúsági és szélességi koordináták) használható. | ||
+ | <source lang="html4strict"> | ||
+ | var latlng = L.latLng(50.5, 30.5); | ||
+ | </source> | ||
+ | Minden Leaflet metódus elfogadja a LatLng objektumok mellett a sima vektoros és sima objektumos formákat is, tehát a következők ekvivalensek: | ||
+ | <source lang="html4strict"> | ||
+ | map.panTo([50, 30]); | ||
+ | map.panTo({lng: 30, lat: 50}); | ||
+ | map.panTo({lat: 50, lng: 30}); | ||
+ | map.panTo(L.latLng(50, 30)); | ||
+ | </source> | ||
+ | |||
+ | |||
+ | === LatLngBounds === | ||
+ | Négyszögletes földrajzi terület tárolására használható. | ||
+ | <source lang="html4strict"> | ||
+ | var corner1 = L.latLng(40.712, -74.227), | ||
+ | corner2 = L.latLng(40.774, -74.125), | ||
+ | bounds = L.latLngBounds(corner1, corner2); | ||
+ | </source> | ||
+ | |||
+ | === Point === | ||
+ | x és y pixelkoordinátákkal megadott pontot reprezentál. | ||
+ | <source lang="html4strict"> | ||
+ | var point = L.point(200, 300); | ||
+ | map.panBy([200, 300]); | ||
+ | map.panBy(L.point(200, 300)); | ||
+ | </source> | ||
+ | |||
+ | |||
+ | === Bounds === | ||
+ | Négyszögletes (nemföldrajzi) terület megadása pixelkoordinátákkal. | ||
+ | <source lang="html4strict"> | ||
+ | var p1 = L.point(10, 10), | ||
+ | p2 = L.point(40, 60), | ||
+ | bounds = L.bounds(p1, p2); | ||
+ | otherBounds.intersects([[10, 10], [40, 60]]); | ||
+ | </source> | ||
+ | |||
+ | === Icon === | ||
+ | Marker létrehozásánál az ikon megadására szolgál. | ||
+ | <source lang="html4strict"> | ||
+ | var myIcon = L.icon({ | ||
+ | iconUrl: 'my-icon.png', | ||
+ | iconSize: [38, 95], | ||
+ | iconAnchor: [22, 94], | ||
+ | shadowUrl: 'my-icon-shadow.png', | ||
+ | shadowSize: [68, 95], | ||
+ | shadowAnchor: [22, 94] | ||
+ | }); | ||
+ | L.marker([50.505, 30.57], {icon: myIcon}).addTo(map); | ||
+ | </source> | ||
+ | |||
+ | === DivIcon === | ||
+ | Marker ikonok esetén kép helyett lehetőség van egyszerű <div> element használatára is. | ||
+ | <source lang="html4strict"> | ||
+ | var myIcon = L.divIcon({className: 'my-div-icon'}); | ||
+ | L.marker([50.505, 30.57], {icon: myIcon}).addTo(map); | ||
+ | </source> | ||
+ | |||
+ | == Vezérlők == | ||
+ | === Zoom === | ||
+ | Nagyítás/kicsinyítés vezérő, alapértelmezett vezérlő a térkép objektumon (zoomControl opció false beállításával kikapcsolható). | ||
+ | |||
+ | <source lang="html4strict"> | ||
+ | L.control.zoom({zoomInText: '++',zoomInTitle: 'Zin',zoomOutText: '--',zoomInTitle: 'Zout'}).addTo(mymap); | ||
+ | </source> | ||
+ | |||
+ | === Attribution === | ||
+ | Az attribution vezérlő segítségével tulajdoni információk jeleníthetők meg egy textboxban. Alapértelmezett vezérlő, a layerekből automatikusan veszi az információt a getAttribution metódus segítségével. Az attributionControl opció false beállításával kikapcsolható. | ||
+ | |||
+ | <source lang="html4strict"> | ||
+ | L.control.attribution({prefix:'blabla'}).addTo(mymap); | ||
+ | </source> | ||
+ | |||
+ | === Layers === | ||
+ | A LayerControl vezérlő segítségével könnyen válthatunk különböző rétegek között. | ||
+ | <source lang="html4strict"> | ||
+ | var satellite = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr}), | ||
+ | streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); | ||
+ | var map = L.map('mapid', { | ||
+ | center: [47.4725, 19.0628], | ||
+ | zoom: 18, | ||
+ | layers: [satellite] | ||
+ | }); | ||
+ | var baseLayers = { | ||
+ | "Satellite": satellite, | ||
+ | "Streets": streets | ||
+ | }; | ||
+ | L.control.layers(baseLayers).addTo(map); | ||
+ | </source> | ||
+ | |||
+ | === Scale === | ||
+ | A méretarány megjelenítésére szolgáló vezérlőelem. | ||
+ | <source lang="html4strict"> | ||
+ | L.control.scale().addTo(map); | ||
+ | </source> | ||
+ | = Példaprogramok = | ||
+ | == Térkép megjelenítése, popup, eseménykezelés == | ||
+ | Az alábbi példaprogramban megjelenítünk egy térképet, és elhelyezünk rajta egy szövegdobozt (popup). A térképen való kattintásnál kiírjuk a koordinátákat. | ||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | body {background-color: powderblue;} | ||
+ | h1 {color: blue;} | ||
+ | p {color: red;} | ||
+ | #mapid { height: 280px; width: 480px;} | ||
+ | </style> | ||
+ | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | ||
+ | <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="mapid"> | ||
+ | <script> | ||
+ | var mymap = L.map('mapid').setView([47.4725, 19.0628], 16); | ||
+ | var marker = L.marker([47.4725, 19.0628]).addTo(mymap); | ||
+ | marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); | ||
− | = | + | var popup = L.popup(); |
+ | function onMapClick(e) { | ||
+ | popup | ||
+ | .setLatLng(e.latlng) | ||
+ | .setContent("You clicked the map at " + e.latlng.toString()) | ||
+ | .openOn(mymap); | ||
+ | } | ||
+ | mymap.on('click', onMapClick); | ||
− | = | + | L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { |
+ | attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', | ||
+ | maxZoom: 18, | ||
+ | id: 'your.mapbox.project.id', | ||
+ | accessToken: 'your.mapbox.public.access.token' | ||
+ | }).addTo(mymap); | ||
+ | </script> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | </source> | ||
+ | == LayerControl == | ||
+ | A példában a LayerControl vezérlő segítségével választhatunk a két megjelenített réteg közül. | ||
+ | <source lang="html4strict"> | ||
+ | <!DOCTYPE html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | body {background-color: powderblue;} | ||
+ | h1 {color: blue;} | ||
+ | p {color: red;} | ||
+ | #mapid { | ||
+ | height: 280px; | ||
+ | width: 480px;} | ||
+ | </style> | ||
+ | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> | ||
+ | <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="mapid"></div> | ||
+ | <script> | ||
+ | var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + | ||
+ | '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | ||
+ | 'Imagery © <a href="http://mapbox.com">Mapbox</a>', | ||
+ | mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=your.mapbox.public.access.token'; | ||
+ | var satellite = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr}), | ||
+ | streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}); | ||
+ | var map = L.map('mapid', { | ||
+ | center: [47.4725, 19.0628], | ||
+ | zoom: 18, | ||
+ | layers: [satellite] | ||
+ | }); | ||
+ | var baseLayers = { | ||
+ | "Satellite": satellite, | ||
+ | "Streets": streets | ||
+ | }; | ||
+ | L.control.layers(baseLayers).addTo(map); | ||
+ | </script> | ||
+ | </body></html> | ||
+ | </source> | ||
=Hivatkozások= | =Hivatkozások= | ||
30. sor: | 313. sor: | ||
* [https://github.com/Leaflet/Leaflet Leaflet forráskód] | * [https://github.com/Leaflet/Leaflet Leaflet forráskód] | ||
* [https://en.wikipedia.org/wiki/Leaflet_(software) Leaflet Wikipedia szócikk] | * [https://en.wikipedia.org/wiki/Leaflet_(software) Leaflet Wikipedia szócikk] | ||
+ | * [http://wiki.osgeo.org/wiki/Tile_Map_Service_Specification Tile Map Service Specification] | ||
+ | * [http://leafletjs.com/examples/extending/class-diagram.html Leaflet Class Diagram] |
A lap jelenlegi, 2017. május 25., 15:42-kori változata
A Leaflet egy nyílt forrású JavaScript library, mely kliens oldalon teszi lehetővé térképek interaktív megjelenítését. A Leaflet API kéréseket küld TMS szolgáltatókhoz, mint pl. MapBox és a kapott képeket megjelenítve további funkciókat ad hozzá (pl. méretarány változtatása, térképszelvények közötti navigáció).
Tartalomjegyzék
Konfiguráció
Host verzió
A legfrissebb stable verzió elérhető CDN-en. Használathoz az alábbi kódot kell a HTML kód fej részébe illesztenünk:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
Leaflet CDN-en keresztül történő használata esetén a lehetséges biztonsági problémák elkerülésére a készítők a subresource integrity engedélyezését javasolják:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
Letöltött verzió
A weboldalról letöltött verziók esetén az archívumot kitömörítve és az oldal forrásában meghivatkozva használható:
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
A letöltött archívum a következőket tartalmazza:
- leaflet.js – a leaflet library egyszerűsített JavaScript forrása
- leaflet-src.js – a leaflet library teljes forrása, debuggoláshoz hasznos
- leaflet.css – a libraryhoz használt stylesheet állomány
- images – a CSS által használt képek
JavaScript csomagkezelővel
NPM csomagkezelő használata esetén lokális másolat készíthető az
npm install leaflet
parancs kiadásával. Ekkor a fájlok a következő helyre kerülnek:
node_modules/leaflet/dist
Tile szerver
Leaflet több tile szerver használatát is támogatja. Mini-térképes előnézet és a használathoz szükséges JavaScript kód a Leaflet providers oldalon elérhető.
Saját tile szerver
Egy részletes leírás található a következő linken: SWITCH2OSM
Főbb komponensek
A library felépítésének áttekintésére elérhető egy interaktív osztálydiagram.
Map
A fő osztálya az API-nak, ezzel lehet létrehozni a térképet az oldalon.
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
UI rétegek
Marker
Marker objektumok megjeleníthetők a térképen. Ezek olyan ikonok, amelyekhez különböző események rendelhetők (click, drag).
L.marker([50.5, 30.5]).addTo(map);
Popup
A térképen elhelyezhetők popup ablakok. Ha egy marker objektum click eventjéhez szeretnénk popupot rendelni:
marker.bindPopup(popupContent).openPopup();
Tooltip
Rövid szövegek megjelenítésére használható:
marker.bindTooltip(“my tooltip text”).openTooltip();
Raszteres rétegek
TileLayer
Betölti és megjeleníti a térképszelvényeket a map objektumon.
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar'}).addTo(map);
ImageOverlay
Egy különálló kép betöltése és megjelenítése rétegként a map objektum határain belül.
var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
Vektoros rétegek
Path
Közvetlenül nem használható, olyan absztrakt osztály, ami különböző vektoros rétegobjektumok (Polygon, Polyline, Circle) közötti beállításokat és konstansokat tárolja.
Polyline
Az osztály segítségével polyline-t lehet rajzolni.
var latlngs = [
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
map.fitBounds(polyline.getBounds());
Polygon
Polygon készítésére használható osztály.
var latlngs = [[37,-109.05],[41,-109.03],[41,-102.05],[37,-102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
map.fitBounds(polygon.getBounds());
Rectangle
var bounds = [[54.559322,-5.767822], [56.1210604,-3.021240]];
L.rectangle(bounds, {color:”#ff7800”,weight:1}).addTo(map);
map.fitBounds(bounds);
Circle
L.circle([50.5, 30.5], {radius:200}).addTo(map);
Alap típusok
LatLng
Egy földrajzi pont reprezentálására (hosszúsági és szélességi koordináták) használható.
var latlng = L.latLng(50.5, 30.5);
Minden Leaflet metódus elfogadja a LatLng objektumok mellett a sima vektoros és sima objektumos formákat is, tehát a következők ekvivalensek:
map.panTo([50, 30]);
map.panTo({lng: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(L.latLng(50, 30));
LatLngBounds
Négyszögletes földrajzi terület tárolására használható.
var corner1 = L.latLng(40.712, -74.227),
corner2 = L.latLng(40.774, -74.125),
bounds = L.latLngBounds(corner1, corner2);
Point
x és y pixelkoordinátákkal megadott pontot reprezentál.
var point = L.point(200, 300);
map.panBy([200, 300]);
map.panBy(L.point(200, 300));
Bounds
Négyszögletes (nemföldrajzi) terület megadása pixelkoordinátákkal.
var p1 = L.point(10, 10),
p2 = L.point(40, 60),
bounds = L.bounds(p1, p2);
otherBounds.intersects([[10, 10], [40, 60]]);
Icon
Marker létrehozásánál az ikon megadására szolgál.
var myIcon = L.icon({
iconUrl: 'my-icon.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
shadowUrl: 'my-icon-shadow.png',
shadowSize: [68, 95],
shadowAnchor: [22, 94]
});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
DivIcon
Marker ikonok esetén kép helyett lehetőség van egyszerű
var myIcon = L.divIcon({className: 'my-div-icon'});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
Vezérlők
Zoom
Nagyítás/kicsinyítés vezérő, alapértelmezett vezérlő a térkép objektumon (zoomControl opció false beállításával kikapcsolható).
L.control.zoom({zoomInText: '++',zoomInTitle: 'Zin',zoomOutText: '--',zoomInTitle: 'Zout'}).addTo(mymap);
Attribution
Az attribution vezérlő segítségével tulajdoni információk jeleníthetők meg egy textboxban. Alapértelmezett vezérlő, a layerekből automatikusan veszi az információt a getAttribution metódus segítségével. Az attributionControl opció false beállításával kikapcsolható.
L.control.attribution({prefix:'blabla'}).addTo(mymap);
Layers
A LayerControl vezérlő segítségével könnyen válthatunk különböző rétegek között.
var satellite = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});
var map = L.map('mapid', {
center: [47.4725, 19.0628],
zoom: 18,
layers: [satellite]
});
var baseLayers = {
"Satellite": satellite,
"Streets": streets
};
L.control.layers(baseLayers).addTo(map);
Scale
A méretarány megjelenítésére szolgáló vezérlőelem.
L.control.scale().addTo(map);
Példaprogramok
Térkép megjelenítése, popup, eseménykezelés
Az alábbi példaprogramban megjelenítünk egy térképet, és elhelyezünk rajta egy szövegdobozt (popup). A térképen való kattintásnál kiírjuk a koordinátákat.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
#mapid { height: 280px; width: 480px;}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid">
<script>
var mymap = L.map('mapid').setView([47.4725, 19.0628], 16);
var marker = L.marker([47.4725, 19.0628]).addTo(mymap);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'your.mapbox.project.id',
accessToken: 'your.mapbox.public.access.token'
}).addTo(mymap);
</script>
</div>
</body>
</html>
LayerControl
A példában a LayerControl vezérlő segítségével választhatunk a két megjelenített réteg közül.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
#mapid {
height: 280px;
width: 480px;}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid"></div>
<script>
var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=your.mapbox.public.access.token';
var satellite = L.tileLayer(mbUrl, {id: 'mapbox.satellite', attribution: mbAttr}),
streets = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr});
var map = L.map('mapid', {
center: [47.4725, 19.0628],
zoom: 18,
layers: [satellite]
});
var baseLayers = {
"Satellite": satellite,
"Streets": streets
};
L.control.layers(baseLayers).addTo(map);
</script>
</body></html>