GIS Wiki - Felhasználó közreműködései [hu]

Leaflet

2017-05-15T22:20:56Z

Leafletjs16171:

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á (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ő [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" />
<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ó ==
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 ==
[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=
* [http://leafletjs.com/ Leaflet hivatalos oldala]
* [https://github.com/Leaflet/Leaflet Leaflet forráskód]
* [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]

Leaflet

2017-04-17T19:27:42Z

Leafletjs16171: /* Példaprogram */

Leaflet

2017-04-17T19:25:55Z

Leafletjs16171:

Leaflet

2017-04-17T19:25:09Z

Leafletjs16171:

Leaflet

2017-04-17T19:21:25Z

Leafletjs16171:

Leaflet

2017-04-17T19:18:21Z

Leafletjs16171:

Leaflet

2017-04-17T19:07:44Z

Leafletjs16171:

Leaflet

2017-03-26T10:25:11Z

Leafletjs16171:

Leaflet

2017-03-26T10:24:40Z

Leafletjs16171:

Leaflet

2017-03-26T10:02:09Z

Leafletjs16171:

Leaflet

2017-03-26T09:58:25Z

Leafletjs16171:

Leaflet

2017-03-26T09:54:42Z

Leafletjs16171:

Leaflet

2017-03-26T09:52:48Z

Leafletjs16171:

Leaflet

2017-03-26T09:52:13Z

Leafletjs16171:

Leaflet

2017-03-26T09:47:54Z

Leafletjs16171:

Leaflet

2017-03-26T09:36:35Z

Leafletjs16171:

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 interaktív térképek megjelenítéséhez.

=Funkciók=

=Bővítmények=

=Hivatkozások=
* [http://leafletjs.com/ Leaflet hivatalos oldala]
* [https://github.com/Leaflet/Leaflet Leaflet forráskód]
* [https://en.wikipedia.org/wiki/Leaflet_(software) Leaflet Wikipedia szócikk]

Leaflet

2017-03-26T09:35:19Z

Leafletjs16171: /* Használat */

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 interaktív térképek megjelenítéséhez.

=Funkciók=

=Bővítmények=

=Felépítés=

=Hivatkozások=
* [http://leafletjs.com/ Leaflet hivatalos oldala]
* [https://github.com/Leaflet/Leaflet Leaflet forráskód]
* [https://en.wikipedia.org/wiki/Leaflet_(software) Leaflet Wikipedia szócikk]

Leaflet

2017-03-15T13:02:38Z

Leafletjs16171:

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 interaktív térképek megjelenítéséhez.

=Használat=

=Bővítmények=

=Felépítés=

=Hivatkozások=
* [http://leafletjs.com/ Leaflet hivatalos oldala]
* [https://github.com/Leaflet/Leaflet Leaflet forráskód]
* [https://en.wikipedia.org/wiki/Leaflet_(software) Leaflet Wikipedia szócikk]

Leaflet

2017-03-15T12:37:45Z

Leafletjs16171: Új oldal, tartalma: „'''Leaflet''' általános leírása =Története= =Telepítés= =Használat= =Hivatkozások= * [http://leafletjs.com/ Leaflet hivatalos oldala] * [https://en.wikipe…”

'''Leaflet''' általános leírása

=Története=

=Telepítés=

=Használat=

=Hivatkozások=
* [http://leafletjs.com/ Leaflet hivatalos oldala]
* [https://en.wikipedia.org/wiki/Leaflet_(software) Wikipedia szócikk]