Leaflet
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>