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á (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

• Leaflet hivatalos oldala
• Leaflet forráskód
• Leaflet Wikipedia szócikk
• Tile Map Service Specification
• Leaflet Class Diagram