„Leaflet” változatai közötti eltérés

Innen: GIS Wiki
a
 
(13 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 olyan szolgáltatókhoz, mint pl. [https://www.mapbox.com/ MapBox] és a kapott képeket megjelenítve további funkciókat ad hozzá (méretarány változtatása, térképszelvények közötti navigáció, …).  
+
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ó).  
  
  
−
=Felépítés=
 
  
−
 
+
=Konfiguráció=
−
=Használat=
 
 
== Host verzió ==
 
== Host verzió ==
−
Az utolsó stable verzió elérhető [https://en.wikipedia.org/wiki/Content_delivery_network CDN]-en. Használathoz az alábbi kódot kell a HTML fej-részébe illesztenünk:
+
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:
−
<code><nowiki>
+
<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>
−
</nowiki></code>
+
</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();
  
−
=Funkciók=
+
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);
  
−
=Bővítmények=
+
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 +
    attribution: 'Map data &copy; <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 &copy; <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=
27. 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ó).


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ű

element használatára is. 
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 &copy; <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 &copy; <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>

Hivatkozások

A lap eredeti címe: „http://gis.inf.elte.hu/giswiki/index.php?title=Leaflet&oldid=568”