Let's learn Leaflet

Guten Morgen

Teil 1

Gliederung

Eine Karte erstellen
Kartenkacheln - Kartenbilder

Grundgerüst


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										</head>
										<body>
										</body>
										</html>

JavaScript und CSS

http://leafletjs.com/download.html


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										
										</head>
										<body>
										</body>
										</html>

Container mit ID und Höhe


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										
										<div style="height: 180px;" id="mapid"></div>
										
										</body>
										</html>

Das Karten-Objekt


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 180px;" id="mapid"></div>
										
										<script>
										var mymap = L.map('mapid')
										.setView([50.27264, 7.26469], 13);
										</script>
										
										</body>
										</html>

Geografische Koordinaten

Sexagesimalsystem: 47°25′16″N, 10°59′7″O
Dezimalsystem: 47.4211, 10.9852
Reihenfolge
47.4211, 10.9852 oder
10.9852, 47.4211

Karten-Layer


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 180px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
										
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')
										.addTo(mymap);
										
										</script>
										</body>
										</html>

http://{s}.tile.osm.org/{z}/{x}/{y}.png

ZoomStufe	Kachelanzahl	Die Kachelbreite entspricht	Ein Pixel entspricht
0	1	40.038 km	156 km
1	4	20.019 km	78 km
..	..	..	..
18	69 Mrd.	153 m	0,6 m
19	275 Mrd.	76 m	0,3 m


										...
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
										//L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										L.tileLayer('https://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=xxxx').addTo(mymap);
										...

Weitere Anbieter:

http://wiki.openstreetmap.org/wiki/Tiles

Foto oder Rastergrafik als Karte


							<!DOCTYPE HTML>
							<html>
							<head>
							<title>Eine OSM Karte mit Leaflet</title>
							<link rel="stylesheet" href="../leaflet/leaflet.css" />
							<script src="../leaflet/leaflet.js"></script>
							</head>
							<body>
							<div style="height: 700px;" id="mapid"></div>
							<script>
							var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
							L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);

							var dwd = L.tileLayer.wms("https://maps.dwd.de/geoserver/dwd/wms", {
							format: 'image/png',
							transparent: true,
							layers:'dwd:Warngebiete_Kreise',
							attribution: "Deutscher Wetterdienst"
							}).addTo(mymap);

							</script>
							</body>
							</html>

Erinnert ihr euch an den 27. Juli 2017?

Resümee

Eine Leaflet-Karte
Kartenkacheln - Kartenbilder
Fragen?

Teil 2

Gliederung

Geodaten in Leaflet

Ein Punkt


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var point = L.point(400, 600);
										mymap.panBy(point);
										</script>
										</body>
										</html>

Ein Marker


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var myMarker = L.marker([50.27264, 7.26469],
										{
										title:"Gering",
										alt:"Ein schönes kleines Dorf auf dem Maifeld in der Eifel",
										draggable:true
										}
										).addTo(mymap);
										</script>
										</body>
										</html>

Eine Polyline


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var polyline = L.polyline([
										[50.27264, 7.26469],
										[51.27264, 7.26469],
										[51.27264, 6.26469]],
										{color: 'red', weight:8}).addTo(mymap);
										</script>
										</body>
										</html>

Ein Polygon


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var polygon = L.polygon([
										[50.27264, 7.26469],
										[51.27264, 7.26469],
										[51.27264, 6.26469]],
										{color: 'red', weight:2, fillColor:'green', fillOpacity:0.5}).addTo(mymap);
										</script>
										</body>
										</html>

Rectangle


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var myRectangle = L.rectangle([
										[50.27264, 7.26469],
										[51.27264, 6.26469]
										],
										{color: "yellow", weight: 8, fillColor:"purple"}).addTo(mymap);
										</script>
										</body>
										</html>

Circle


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										L.circle(
										[50.27264, 7.26469],
										100000,
										{color: "red", weight: 8, fillColor:"green"}).addTo(mymap);
										</script>
										</body>
										</html>

Mehrere Polylines auf einem Layer


										...										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var multipolyline = L.polyline(
										[
										[[50.17264, -7.26469],
										[49.27264, -7.26469],
										[49.27264, -6.26469]],
										[[50.37264, -7.26469],
										[51.27264, -7.26469],
										[51.27264, -8.26469]]
										],
										{color: 'black'}).addTo(mymap);
										mymap.fitBounds(multipolyline.getBounds());
										</script>
										</body>
										</html>


										L.polygon([
										[ [1, 1], [1, 10], [10, 10], [10, 1] ],
										[ [2, 2], [2, 5], [5, 5], [5, 2] ]
										])


										L.polygon([
										[ [1, 1], [1, 10], [10, 10], [10, 1] ],
										[ [2, 2], [2, 5], [5, 5], [5, 2] ],
										[ [3, 3], [3, 4], [4, 4], [4, 3] ]
										])


										L.polygon([
										[ [1, 1], [1, 10], [10, 10], [10, 1] ],
										[ [2, 2], [2, 5], [5, 5], [5, 2] ],
										[ [3, 3], [3, 4], [4, 4], [4, 3] ],
										[ [9, 9], [11, 9], [11, 11], [9, 11] ]
										])

Eine LayerGroup


										...
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var marker1 = L.marker([50.27264, 7.26469],
										{
										title:"Marker1",
										alt:"Ich bin ein Marker"
										}
										).bindPopup('Marker1');
										var marker2 = L.marker([51.27264, 6.26469],
										{
										title:"Marker2",
										alt:"Ich bin ein anderer Marker"
										}
										).bindPopup('Marker2');
										var polyline = L.polyline([
										[50.27264, 7.26469],
										[51.27264, 7.26469],
										[51.27264, 6.26469]],
										{color: 'red', weight:8});
										var myLayerGroup = L.layerGroup([marker1, polyline]).addTo(mymap);
										myLayerGroup.addLayer(marker2);
										</script>
										</body>
										</html>

Eine FeatureGroup


										...
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var marker1 = L.marker([50.27264, 7.26469],
										{
										title:"Marker1",
										alt:"Ich bin ein Marker"
										}
										);
										var marker2 = L.marker([51.27264, 6.26469],
										{
										title:"Marker2",
										alt:"Ich bin ein anderer Marker"
										}
										);
										var polyline = L.polyline([
											[50.27264, 7.26469], [51.27264, 7.26469], [51.27264, 6.26469]],
										);
										var myfeatureGroup=L.featureGroup([marker1, marker2, polyline]).addTo(mymap);
										myfeatureGroup.bindPopup('Wir haben alle das gleiche Popup!');
										myfeatureGroup.setStyle({color:'red', opacity:0.5, weight:8})
										</script>
										</body>
										</html>

Resümee

Geodaten in Leaflet
Fragen?

Teil 3

Gliederung

GeoJSON allgemein
GeoJSON Objekte
GeoJSON in Leaflet

Wurzeln von GeoJSON

XML


							<joomlers>
							<number>1721</number>
							<vorname>Astrid Günther</vorname>
							</joomlers>

							„joomlers“: {
							„number“: „1721“,
							„vorname“: „Astrid Günther“
							},

JSON ist gültiges Javascript JSON ist nicht beschreibend GeoJSON ist JSON das Geodaten beschreibt

Position - Koordinate - [Länge, Breite, Höhe]


										[30, 10]

Point


									  { "type": "Point",
									    "coordinates": [30, 10]

Multipoint


									  { "type": "MultiPoint",
									    "coordinates": [
									      [10, 40], [40, 30], [20, 20], [30, 10]
									    ]
									  }

LineStrings


									  { "type": "LineString",
									    "coordinates": [
									      [30, 10], [10, 30], [40, 40]
									    ]
									  }

MultiLineString


									  { "type": "MultiLineString",
									    "coordinates": [
									      [[10, 10], [20, 20], [10, 40]],
									      [[40, 40], [30, 30], [40, 20], [30, 10]]
									    ]
									  }

Polygone & Multipolygon


										{ "type": "Polygon",
										  "coordinates": [
										    [[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]
										  ]
										}


									{ "type": "Polygon",
									  "coordinates": [
									    [[35, 10], [45, 45], [15, 40], [35, 10]],
									    [[20, 30], [35, 35], [30, 20], [20, 30]]
									    ]
									}


									{ "type": "MultiPolygon",
									  "coordinates": [
									    [
									      [[30, 20], [45, 40], [10, 40], [30, 20]]
									    ],
									    [
									      [[15, 5], [40, 10], [10, 20], [15, 5]]
									    ]
									  ]
									}


									{ "type": "MultiPolygon",
									  "coordinates": [
									    [
									    [[40, 40], [20, 45], [45, 30], [40, 40]]
									    ],
									    [
									    [[20, 35], [10, 30], [10, 10]],
									    [[30, 20], [20, 15], [20, 25]]
									    ]
									  ]
									}

Feature


							{
							  "type": "Feature",
							  "geometry": {
								"type": "Polygon",
								"coordinates": [[30, 20], [45, 40], [10, 40], [30, 20]]
							  },
							  "properties": {
								"prop0": "value0",
								"prop1": {"this": "that"},
								"prop2": true,
								"prop3": null,
								"prop4": ["wert1", "wert2", "wert3"],
								"prop5": 0.0
							  }
							}

FeatureCollection


							{
							  "type": "FeatureCollection",
							  "features": [
								{
								  "type": "Feature",
								  "geometry": {
									"type": "Point",
									"coordinates": [0, 0]
								  },
								  "properties": {
									"name": "Der Name des Features"
								  }
								}
							  ]
							}

Grenzen von GeoJSON

Komprimierung
Datentypen
Pop-up Fenster
Kreise und Kurven
Eigenschaften für Positionen

GeoJSON in Leaflet - Ein Feature


										..
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var geojsonFeature1 = {
										"type": "Feature",
										"geometry": {
										"type": "Point",
										"coordinates": [7.26469, 50.27264]
										},
										"properties": {
										"name": "Gering"
										}
										};
										L.geoJSON(geojsonFeature1).addTo(mymap);
										</script>
										</body>
										</html>

onEachFeature()


										...
										"properties": {"name": "Dorf 2"}
										},
										{
										"type": "Feature",
										"geometry": {"type": "Point", "coordinates": [7, 51]},
										"properties": {"name": "Dorf 3"}
										}
										]
										};
										L.geoJson(geojsonFeatureCollection, {
										onEachFeature: function(feature, layer) {
										layer.bindPopup(feature.properties.name);
										}
										}).addTo(mymap);
										</script>
										</body>
										</html>

toGeoJSON() und addData()


										<!DOCTYPE HTML>
										<html lang="de">
										<head>
										<meta charset="utf-8"/>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 7);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var myMarker = L.marker([50.27264, 7.26469]);
										var markerAsGeoJSON = myMarker.toGeoJSON();
										var geoJsonLayer = L.geoJson().addTo(mymap);
										geoJsonLayer.addData(markerAsGeoJSON).bindPopup("Ich bin mit der Methode .addData() zur Karte hinzugefügt worden.
										In GeoJson sehe ich so aus:<br> " +
										JSON.stringify(markerAsGeoJSON));
										</script>
										</body>
										</html>

Ereignisse und CSS


										...
										"properties": { "prop0": "value0", "prop1": {"this": "that"}
										}
										}
										]
										}
										var geoJsonLayer = L.geoJson(geojsonFeatureCollection,{style:styleFunction}).addTo(mymap);
										geoJsonLayer.on('mouseover', styleWhenMouseOver);
										geoJsonLayer.on('mouseout', styleWhenMouseOut);
										function styleWhenMouseOver(e){
										geoJsonLayer.setStyle({color:"green"});
										}
										function styleWhenMouseOut(e){
										//geoJsonLayer.setStyle({color:"gray"});
										geoJsonLayer.eachLayer(function (layer) {
										geoJsonLayer.resetStyle(layer);
										});
										}
										</script>
										</body>
										</html>

Resümee

GeoJSON allgemein
GeoJSON Objekte
GeoJSON in Leaflet
Fragen?

Teil 4

Gliederung

Benutzerdefinierte Marker
Vererbung
Plugins

Benutzerdefinierter Marker


										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.27264, 7.26469], 10);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var greenIcon = L.icon({
										iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
										shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png',
										iconSize:     [38, 95],
										shadowSize:   [50, 64],
										iconAnchor:   [22, 94],
										shadowAnchor: [4, 62],
										popupAnchor:  [-3, -76]
										});
										L.marker([50.27264, 7.26469], {icon: greenIcon}).addTo(mymap).bindPopup("Ich bin ein Marker mit einem individuellen Image.");
										</script>
										</body>
										</html>

Benutzerdefinierter Marker - Icon positionieren


										...
										iconSize:     [38, 95],
										shadowSize:   [50, 64],
										iconAnchor:   [22, 94], //blau
										shadowAnchor: [4, 62],  //schwarz
										popupAnchor:  [-3, -76],//weiß
										...

Benutzerdefinierter Marker - Vererbung


										...
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.27264, 7.26469], 9);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var LeafIcon = L.Icon.extend({
										options: {
										shadowUrl: 'leaf-shadow.png',
										iconSize:     [38, 95],
										shadowSize:   [50, 64],
										iconAnchor:   [22, 94],
										shadowAnchor: [4, 62],
										popupAnchor:  [-3, -76]
										}
										});
										var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png'});
										var redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-red.png'});
										var orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-orange.png'});
										L.marker([50.27264, 7.26469], {icon: greenIcon}).addTo(mymap).bindPopup("Ich bin ein grüner Marker.");
										L.marker([50.27264, 6.26469], {icon: redIcon}).addTo(mymap).bindPopup("Ich bin ein roter Marker.");
										L.marker([50.27264, 8.26469], {icon: orangeIcon}).addTo(mymap).bindPopup("Ich bin ein oranger Marker.");
										</script>
										</body>
										</html>

Das Plugin BeautifyMarker


										...
										<link href="font-awesome.min.css">
										<link href="bootstrap.min.css">
										<link href="leaflet-beautify-marker-icon.css">
										<script src="leaflet-beautify-marker-icon.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.27264, 7.26469], 8);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										L.marker([50.27264, 7.26469], {
										icon: L.BeautifyIcon.icon(
										{iconSize: [50, 50]}
										),
										draggable: true
										}).addTo(mymap).bindPopup("Ich bin ein beautify Marker");
										options = {
										icon: 'spinner',
										spin: 'true',
										borderColor: '#8A90B4',
										textColor: 'white',
										backgroundColor: '#8A90B4'
										};
										L.marker([50.27264, 6.26469], {
										icon: L.BeautifyIcon.icon(options),
										draggable: true
										}).addTo(mymap).bindPopup("Ich bin ein beautify Marker");
										options = {
										icon: 'plane',
										iconShape: 'marker',
										borderColor: '#8D208B',
										textColor: '#8D208B',
										backgroundColor: 'transparent'
										};
										L.marker([50.27264, 8.26469], {
										icon: L.BeautifyIcon.icon(options),
										draggable: true
										}).addTo(mymap).bindPopup("Ich bin ein beautify Marker");
										</script>
										</body>
										</html>

Marker Clustern


										...
										<link rel="stylesheet" href="MarkerCluster.css"/>
										<link rel="stylesheet" href="MarkerCluster.Default.css"/>
										<script src="leaflet.markercluster-src.js"></script>
										<script src="points.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.219264, 7.19469], 13);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var markers = L.markerClusterGroup(
										//{showCoverageOnHover : false} );
										for (var i = 0; i < points.length; i++) {
										var a = points[i];
										var title = a[2];
										var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
										marker.bindPopup(title);
										markers.addLayer(marker);
										}
										mymap.addLayer(markers);
										</script>
										</body>
										</html>

Animierte Marker - bouncemarker.js


										<!DOCTYPE HTML>
										<html lang="de">
										<head>
										<meta charset="utf-8"/>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										<script src="bouncemarker.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.27264, 7.26469], 12);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										L.marker([50.27264, 7.26469],
										{
										bounceOnAdd: true,
										bounceOnAddOptions: {duration: 5000, height: 100},
										bounceOnAddCallback: function() {alert("Gelandet!");}
										}
										).addTo(mymap);
										</script>
										</body>
										</html>

Animierte Marker - AnimatedMarker.js


										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										<script src="AnimatedMarker.js"></script>
										</head>
										<body>
										<button onclick="start()">Start</button>
										<button onclick="stop()">Stop</button>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.27264, 7.26469], 9);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var line = L.polyline([[50.68510, 7.94136],[50.68510, 7.84136],[50.68510, 7.74136],[50.68510, 7.64136],[50.68510, 7.5136],[50.68510, 7.44136],[50.68510, 7.34136],[50.68510, 7.24136]]),
										animatedMarker = L.animatedMarker(line.getLatLngs(), {
										autoStart: false,
										distance: 200,
										interval: 100
										});
										mymap.addLayer(animatedMarker);
										function start(){animatedMarker.start();}
										function stop(){animatedMarker.stop();}
										</script>
										</body>
										</html>

Resümee

Benutzerdefinierten Marker
Vererbung
Plugins
Fragen?

Teil 5

Gliederung

ESRI (Environmental Systems Research Institute) Service Geocoding ansehen.
Plugin Leaflet Routing Machine

ESRI Services - Geocoding - Geocoding.geosearch()


										...
										<script src="esri-leaflet.js">>/script>
										<link rel="stylesheet" href="esri-leaflet-geocoder.css">
										<script src="esri-leaflet-geocoder.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid">>/div>
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.97264, 7.00469], 12);
										L.esri.basemapLayer('Gray').addTo(mymap);
										var searchControl =
										L.esri.Geocoding.geosearch().addTo(mymap);
										var results = L.layerGroup().addTo(mymap);

										searchControl.on("results", function(data) {
										results.clearLayers();
										for (var i = data.results.length - 1; i >= 0; i--) {
										results.addLayer(L.marker(data.results[i].latlng));
										}
										});
										</script>
										</body>
										</html>

ESRI Services - Geocoding - Geocoding.geocode().text(address).run()

...html?a=56751 Gering


										...
										<script src="../leaflet/leaflet.js"></script>
										<script src="esri-leaflet.js"></script>
										<script src="esri-leaflet-geocoder.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var x = location.search;
										var y = x.split("=");
										var temp=y[1];
										var address = decodeURIComponent(temp);
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.97264, 7.00469], 3);
										L.esri.basemapLayer('Gray').addTo(mymap);
										L.esri.Geocoding.geocode().text(address)
										.run(function(err, result, response){
										L.marker(result.results[0].latlng).addTo(mymap);
										mymap.setView(result[0].latlng,13);
										});
										</script>
										</body>
										</html>

ESRI Services - Geocoding - Geocoding.reverseGeocode()


										...
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										<script src="esri-leaflet.js"></script>
										<script src="esri-leaflet-geocoder.js"></script>
										</head>
										<body>
										<div style="height: 700px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid', {doubleClickZoom:false}).setView([50.97264, 7.00469], 12);
										L.esri.basemapLayer('Gray').addTo(mymap);
										mymap.on('click', function(e){
										var r = L.marker();
										L.esri.Geocoding.reverseGeocode()
										.latlng(e.latlng)
										.run(function(error, result, response){
										r = L.marker(result.latlng).addTo(mymap)
										.bindPopup(result.address.Match_addr).openPopup();
										});
										});
										</script>
										</body>
										</html>

Routing Leaflet Routing Machine


										<!DOCTYPE HTML>
										<html>
										<head>
										<title>Eine OSM Karte mit Leaflet</title>
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										<script src="leaflet-routing-machine.js"></script>
										<link rel="stylesheet" href="leaflet-routing-machine.css" />
										</head>
										<body>
										<div style="height: 400px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
										console.log(mymap);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var control = L.Routing.control({
										waypoints: [
										L.latLng(50.273543, 7.262993),
										L.latLng(50.281168, 7.276211)
										]
										}).addTo(mymap);
										</script>
										</body>
										</html>

Routing - Options


										...
										<link rel="stylesheet" href="../leaflet/leaflet.css" />
										<script src="../leaflet/leaflet.js"></script>
										<script src="leaflet-routing-machine.js"></script>
										<link rel="stylesheet" href="leaflet-routing-machine.css" />
										</head>
										<body>
										<div style="height: 400px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
										console.log(mymap);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var control = L.Routing.control({
										waypoints: [
										L.latLng(50.273543, 7.262993),
										L.latLng(50.281168, 7.276211)
										],
										router: new L.Routing.osrmv1({
										language: 'de',
										}),
										}).addTo(mymap);
										</script>
										</body>
										</html>

Routing - Geocoding


										...
										<script src="leaflet-routing-machine.js"></script>
										<script src="Control.Geocoder.js"></script>
										<link rel="stylesheet" href="Control.Geocoder.css" />
										<link rel="stylesheet" href="leaflet-routing-machine.css" />
										</head>
										<body>
										<div style="height: 400px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
										console.log(mymap);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var control = L.Routing.control({
										waypoints: [
										L.latLng(50.273543, 7.262993),
										L.latLng(50.281168, 7.276211)
										],
										router: new L.Routing.osrmv1({
										language: 'de',
										}),
										geocoder: L.Control.Geocoder.nominatim({})
										}).addTo(mymap);
										</script>
										</body>
										</html>

Routing - Mapbox


										...
										<body>
										<div style="height: 400px;" id="mapid"></div>
										<script>
										var mymap = L.map('mapid').setView([50.27264, 7.26469], 13);
										L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(mymap);
										var control = L.Routing.control({
										waypoints: [
										L.latLng(50.273543, 7.262993),
										L.latLng(50.281168, 7.276211)
										],
										router: L.Routing.mapbox('pk.key',
										{
										profile: 'mapbox/walking',
										language: 'de'
										}),
										geocoder: L.Control.Geocoder.nominatim({})
										})
										.addTo(mymap);
										//https://www.mapbox.com/api-documentation/#batch-requests
										</script>
										</body>
										</html>

Resümee

Geocoding und Routing Plugins angesehen.
Fragen?

Was haben wir gemacht

Eine einfache Karte
Geodaten in Leaflet und GeoJSON
Benutzerdefinierte Marker
Geocoding und Routing

Das war mein Beitrag! Habt ihr noch Fragen?