leaflet komfortabel web-maps erstellen -...
TRANSCRIPT
1
Leaflet –
komfortabel Web-Maps
erstellen
@Gremling89 @geoSYSnet
FOSSGIS, Dresden, 14. März 2019 Numa Gremling
2
Webmapping Lösungen (z.B. in der Cloud)
QGIS Cloud
CARTO (CartoDB)
Mapbox
GIS Cloud
MangoMap
A**GIS O****e
3
Webmapping Bibliotheken
ArcGIS API for JavaScript
Bing Maps API
Google Maps JavaScript API
HERE Maps API
Yahoo Maps
-----------------------------
OpenLayers
Leaflet
4
https://leafletjs.com/
5
Basics
6
Webentwicklung
HTML
CSS
JavaScript
7
Leaflet – Merkmale
8
Kompakt
9
Dokumentiert
https://leafletjs.com/reference-1.3.4.html
10
Erweiterbar
https://leafletjs.com/plugins.html
11
Einfach
Z.B. …
12
Leaflet – Beispiele
13
Map erstellen
DIV erstellen
DIV stylen
14
Map erstellen
Map erstellen
15
16
Map erstellen
Basemap hinzufügen
17
18
Basemaps
https://leaflet-extras.github.io/leaflet-providers/preview/
19
https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
20
https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png
21
22
23
https://fahrinfo.bvg.de/Fahrinfo/bin/query.bin/en?ujm=1&MapLayer=NETWORK
24
Koordinaten
lat vor lon
Immer WGS 84 (EPSG:4326)
25
Marker
L.marker([lat, lon])
26
Marker mit Popup
27
Marker, Circle, Circle Marker
28
Circle, Circle Marker
(Meter) (Pixel)
29
Styling
30
Styling
31
Styling
32
33
Daten gruppieren
34
35
Alle Layer entfernen, hinzufügen
36
Jeden Layer behandeln
37
38
GeoJSON ausgeben
39
40
41
Events
42
Events
43
Events
44
45
Events
46
Events
47
GeoJSON - Geometry
48
GeoJSON - Feature
49
GeoJSON – Feature Collection
50
GeoJSON hinzufügen
51
Bonus
53
geosysnet.com/demos/dashboard
54
Leaflet Cookbook
Locate Press
Über 150 Rezepte
Ende 2018
Top Weihnachtsgeschenk
https://locatepress.com/lcb
55
Leaflet Cookbook
Locate Press
Über 190 Rezepte
Jetzt!
Top Ostergeschenk
https://locatepress.com/lcb
https://www.amazon.de
56
console.log('Danke!');
https://gis-trainer.de @gis_trainer gis_trainer gistrainer gis-trainer
http://geosysnet.com @geoSYSnet geoSYSnet