Leaflet: komfortabel Webmaps erstellen -...
34
Praxisqualifizierung & Weiterbildung Leaflet: komfortabel Webmaps erstellen Numa Gremling GIS Day 2018 GFZ Potsdam, 14.11.2018 [email protected]
-
Upload
nguyentram -
Category
Documents
-
view
222 -
download
0
Transcript of Leaflet: komfortabel Webmaps erstellen -...
Praxisqualifizierung & Weiterbildung
Leaflet: komfortabel Webmaps erstellen
Numa Gremling
GIS Day 2018
GFZ Potsdam, 14.11.2018
Praxisqualifizierung & Weiterbildung
http://geosysnet.de/de/downloads.html
Folien
Praxisqualifizierung & Weiterbildung
Was ist Webmapping?
Praxisqualifizierung & Weiterbildung
• Jedes Mal, wenn man eine interaktive Karte auf einer Website sieht
• Bekanntestes Beispiel: Google Maps
Was ist Webmapping?
Praxisqualifizierung & Weiterbildung
ArcGIS API for JS
Bing Maps API
Google Maps API
HERE Maps API
Leaflet
OpenLayers
Yahoo Maps
… usw.
Webmapping API
Mapbox Carto (früher CartoDB) ESRI Leaflet
Praxisqualifizierung & Weiterbildung
Leaflet
Praxisqualifizierung & Weiterbildung
• Eine JavaScript-Bibliothek zur Erstellung von interaktiven (Web-) Karten
• Basiert auf modernen Webtechnologien
– HTML5
– CSS3
– JavaScript
Was ist Leaflet?
Praxisqualifizierung & Weiterbildung
Wer nutzt Leaflet?
Praxisqualifizierung & Weiterbildung
Eine simple Leaflet-Karte
TODO: add map with markers that form smiley and says hallo Potsdam
Praxisqualifizierung & Weiterbildung
• Einfache Befehle
• Sehr gute Dokumentation
• Gute Performance durch schlanken Code
• Durch Plugins erweiterbar
Vorteile von Leaflet
Praxisqualifizierung & Weiterbildung
Praxisqualifizierung & Weiterbildung
Karte erstellen
Praxisqualifizierung & Weiterbildung
HTML vorbereiten
<!DOCTYPE html> <html> <head> <title>Vorlage</title> <meta charset='utf-8'> </head> <body> Hallo Potsdam! </body> </html>
Praxisqualifizierung & Weiterbildung
• http://leafletjs.com/download.html
• Herunterladen:
• Oder CDN:
Leaflet herunterladen
Praxisqualifizierung & Weiterbildung
Leaflet einbinden
<!DOCTYPE html> <html> <head> <title>Vorlage</title> <meta charset='utf-8'> <!-- Leaflet einbinden --> <link rel="stylesheet" href="leaflet/leaflet.css"> <script src="leaflet/leaflet.js"></script> </head> <body> Hallo Potsdam! </body> </html>
Praxisqualifizierung & Weiterbildung
3 Schritte:
• Wir legen ein DIV für die Karte an, geben dem eine ID
<div id='mapDIV'><div>
• Wir stylen das DIV (es muss mindestens eine Höhe angegeben werden!)
• Wir legen unten im <body> einen <script> an und erstellen unsere Karte
Karte in Leaflet erstellen
#mapDIV { height: 600px; width: 600px; border: 1px solid blue; }
Praxisqualifizierung & Weiterbildung
<script>
var meineKarte = L.map('karte',{ center: [52.3806, 13.0642], zoom: 10 }); </script>
Praxisqualifizierung & Weiterbildung
https://leaflet-extras.github.io/leaflet-providers/preview/
Basemap hinzufügen
Praxisqualifizierung & Weiterbildung
var m= L.marker([52.3806, 13.0642]);
m.addTo(meineKarte);
Marker erstellen
Praxisqualifizierung & Weiterbildung
Plugins
Praxisqualifizierung & Weiterbildung
• Vielzahl an Plugins erweitern Funktionalitäten:
Plugins
Praxisqualifizierung & Weiterbildung
• Ein Indikator, der anzeigt, dass Leaflet noch etwas lädt (bspw. die Kacheln der Hintergrundkarte)
Plugin – Leaflet.loading
Praxisqualifizierung & Weiterbildung
• Clustert nahe beieinander liegende Marker
Plugin – Leaflet.Markercluster
Praxisqualifizierung & Weiterbildung
• Eine Übersichtskarte zur besseren Orientierung
Plugin – Leaflet.MiniMap
Praxisqualifizierung & Weiterbildung
Zusatzinfos & Links
Praxisqualifizierung & Weiterbildung
• Turf.js ist eine Geoverarbeitungsbibliothek, die als Input GeoJSON akzeptiert
• Turf.js kann mit allen Webmapping-Bibliotheken verwendet werden, also z. B. auch mit OpenLayers
Webmapping und Geoverarbeitung: Turf.js (FOSSGIS 2018, Bonn)
https://www.youtube.com/watch?v=4ndkuxMqfWs&t=1s
Geoverarbeitung mit Leaflet und Turf.js
Praxisqualifizierung & Weiterbildung
• Mapbox.js https://www.mapbox.com/mapbox.js/api/v3.1.1/
• Carto.js https://carto.com/docs/carto-engine/carto-js/
• ESRI Leaflet https://esri.github.io/esri-leaflet/
Bibliotheken, die auf Leaflet beruhen
Praxisqualifizierung & Weiterbildung
• Google Group https://groups.google.com/forum/#!forum/leaflet-js
• GIS Stack Exchange https://gis.stackexchange.com/questions/tagged/leaflet
• Stack Overflow https://stackoverflow.com/questions/tagged/leaflet
• Twitter https://twitter.com/LeafletJS
Foren & Social Media
Praxisqualifizierung & Weiterbildung
• Offizielle Tutorials https://leafletjs.com/examples.html
• Leaflet Effekte http://muxlab.github.io/map-effects-100/
• Tips and Tricks (ebook) https://leanpub.com/leaflet-tips-and-tricks/read
• Leaflet.js Succinctly (ebook) https://www.syncfusion.com/ebooks/leafletjs
Weiteres
Praxisqualifizierung & Weiterbildung
• Locate Press
• Über 300 Seiten
• Erscheint Ende 2018
• Top Weihnachtsgeschenk
https://locatepress.com/lcb
Leaflet Cookbook
Praxisqualifizierung & Weiterbildung
• GIS & Webmapping
http://gis-trainer.de/de/GISWebmapping
• GIS Analyst
http://gis-trainer.de/GISAnalyst
Kostenübernahme zu 100 % vom Jobcenter möglich.
Bildungsgutschein gem. SGB II (ARGE) bzw. gem. SGB III (Agentur für Arbeit)
Weiterbildungen
Aufbau der Qualifizierungen
4 Monate theoretische Schulung +
3 Monate Praxisphase in einem Unternehmen (optional)
Praxisqualifizierung & Weiterbildung http://gis-trainer.de/de/GISWebmapping
GIS & Webmapping Weiterbildung
Praxisqualifizierung & Weiterbildung
console.log('Danke!');
https://gis-trainer.de @gis_trainer gis_trainer gistrainer
http://geosysnet.com @geoSYSnet
