open data map tutorial

CodeforLeipzig · Oct 9, 2018 · ace8ab4 · ace8ab4
1 parent 8668fa0
commit ace8ab4
Show file tree

Hide file tree

Showing 19 changed files with 109,110 additions and 0 deletions.
diff --git a/docs/01_geojson_io.md b/docs/01_geojson_io.md
@@ -0,0 +1,52 @@
+* http://geojson.io/
+* Lupe, um nach Leipzig zu suchen
+  * http://geojson.io/#map=8/51.606/12.096
+* Marker-Symbol aus Toolbar auswählen und auf Karte klicken
+
+```
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+		  12.3734686781157,
+          51.3320818 
+        ]
+      }
+    }
+  ]
+}
+```
+
+* Klick auf marker, um Properties zu bearbeiten (Farbe, Größe, Symbol) (Konvention von Geojson.io, das angezeigt)
+
+```
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "marker-color": "#2641d7",
+        "marker-size": "large",
+        "marker-symbol": "lighthouse"
+      },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          12.3980712890625,
+          51.25847731518399
+        ]
+      }
+    }
+  ]
+}
+```
+
+* optional: Marker verschieben (über Toolbar-Symbol Layer) 
+* optional: Polygon malen (über Toolbar-Symbol Polygon)
+* optional: Polygon wieder löschen
diff --git a/docs/02_leaflet_point.html b/docs/02_leaflet_point.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Step 02: Leaflet Point Marker</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+       crossorigin=""/>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+       integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+       crossorigin=""></script>
+	<style>
+		#KarteMitPunkt { height: 480px; }
+	</style>
+  </head>
+  <body>
+    <p>
+      <ul>
+        <li><a href="https://leafletjs.com/">LeafletJS</a></li>
+        <li><a href="https://leafletjs.com/examples/quick-start/">Leaflet Schnelleinstieg</a></li>
+      </ul>
+    </p>
+    <p>
+      <div id="KarteMitPunkt" />
+    </p>
+    <script>
+      // Karte mit Mittelpunkt Leipzig erzeugen
+      var laengenGrad = 12.3742236;
+      var breitenGrad = 51.3399028;
+      var kartenMittelpunktKoordinaten = [ breitenGrad, laengenGrad ];
+      var zoomStufe = 14;
+      var karte = L.map('KarteMitPunkt').setView(kartenMittelpunktKoordinaten, zoomStufe);
+      // Hintergrundkarte setzen
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(karte);
+      // Punkt-Marker setzen
+      var punktKoordinaten = [ 51.3320818, 12.3734686781157 ];
+      var punkt = L.marker(punktKoordinaten).addTo(karte);
+     </script>
+  </body>
+</html>
diff --git a/docs/03_leaflet_icon.html b/docs/03_leaflet_icon.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Step 02: Leaflet Different Marker Icons</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+       crossorigin=""/>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+       integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+       crossorigin=""></script>
+	<style>
+		#KarteMitPunkt { height: 480px; }
+	</style>
+  </head>
+  <body>
+    <p>
+      <ul>
+        <li><a href="https://leafletjs.com/examples/custom-icons/">LeafletJS Custom Icons</a></li>
+        <li><a href="https://github.com/pointhi/leaflet-color-markers">Leaflet Color Markers</a></li>
+        <li><a href="https://github.com/lvoogdt/Leaflet.awesome-markers">Leaflet Awesome Markers</a></li>
+      </ul>
+    </p>
+    <p>
+      <div id="KarteMitPunkt" />
+    </p>
+    <script>
+      // Karte mit Mittelpunkt Leipzig erzeugen
+      var laengenGrad = 12.3742236;
+      var breitenGrad = 51.3399028;
+      var kartenMittelpunktKoordinaten = [ breitenGrad, laengenGrad ];
+      var zoomStufe = 14;
+      var karte = L.map('KarteMitPunkt').setView(kartenMittelpunktKoordinaten, zoomStufe);
+      // Hintergrundkarte setzen
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(karte);
+      // Punkt-Marker setzen
+      var punktKoordinaten = [ 51.3320818, 12.3734686781157 ];
+	  // Icons definieren
+      var blueIcon = new L.Icon.Default({});
+	  var redIcon = new L.Icon({
+	    // Quelle der Icons: https://github.com/pointhi/leaflet-color-markers
+	    iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
+		shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
+		iconSize: [25, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [1, -34],
+		shadowSize: [41, 41]
+	  });
+	  var kfIcon = new L.Icon({
+	    // Quelle des Icons: https://kf-education.com/
+	    iconUrl: 'https://kf-education.com/wp-content/uploads/2018/01/kf_logo_schwarz_quer-02.png',
+		// Original-Icon runterskaliert auf 41px Höhe (41 x 478 / 154)
+		iconSize: [127, 41],
+		iconAnchor: [12, 41],
+		popupAnchor: [1, -34],
+		shadowSize: [127, 41]
+	  });
+	  // Icon als zweiten Parameter des Markers mitgeben
+      var punkt = L.marker(punktKoordinaten, {icon: kfIcon}).addTo(karte);
+	  // Alternativ: layer.setIcon(kfIcon);  um die Icons für alle Marker in einem Layer zu setzen
+     </script>
+  </body>
+</html>
diff --git a/docs/04_leaflet_background.html b/docs/04_leaflet_background.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Step 04: Leaflet Background</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+       crossorigin=""/>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+       integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+       crossorigin=""></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.4.0/leaflet-providers.min.js"></script>
+	<style>
+		#KarteMitPunkt { height: 480px; }
+	</style>
+  </head>
+  <body>
+    <p>
+      <ul>
+        <li><a href="https://leaflet-extras.github.io/leaflet-providers/preview/">Leaflet Providers</a></li>
+		<li><a href="http://boundingbox.klokantech.com/">Bounding Box</a></li>
+      </ul>
+    </p>
+    <p>
+      <div id="KarteMitPunkt" />
+    </p>
+    <script>
+      // Karte mit Mittelpunkt Leipzig erzeugen
+      var laengenGrad = 12.3742236;
+      var breitenGrad = 51.3399028;
+      var kartenMittelpunktKoordinaten = [ breitenGrad, laengenGrad ];
+      var zoomStufe = 14;
+      var karte = L.map('KarteMitPunkt').setView(kartenMittelpunktKoordinaten, zoomStufe);
+      // Hintergrundkarte setzen
+	  //L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      //  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      //}).addTo(karte);
+      //L.tileLayer.provider('Stamen.Watercolor').addTo(karte);
+	  //L.tileLayer.provider('Wikimedia').addTo(karte);
+	  //L.tileLayer.provider('Esri.DeLorme').addTo(karte);
+	  //L.tileLayer.provider('Esri.WorldImagery').addTo(karte);
+	  L.tileLayer.provider('CartoDB.Voyager').addTo(karte);
+	  //L.tileLayer.provider('CartoDB.DarkMatter').addTo(karte);
+	  //L.tileLayer.provider('Stamen.Toner').addTo(karte);
+	  //L.tileLayer.provider('Hydda.RoadsAndLabels').addTo(karte);
+
+	  // http://boundingbox.klokantech.com/ um Ausmaße herauszufinden, Ausgabe in CSV Raw
+	  var ausmasse = new L.LatLngBounds(
+	    new L.LatLng(51.286068, 12.302645),
+		new L.LatLng(51.381757, 12.446286));
+	  karte.fitBounds(ausmasse); 
+	  var hintergrund = new L.ImageOverlay("https://upload.wikimedia.org/wikipedia/de/6/62/Leipzig_1897.jpg", ausmasse, {
+	    opacity: 0.5,
+		interactive: false,
+		attribution: '<a href="https://de.wikipedia.org/w/index.php?title=Datei:Leipzig_1897.jpg">Wikipedia</a>'
+	  });
+	  //karte.addLayer(hintergrund);
+
+      // Punkt-Marker setzen
+      var punktKoordinaten = [ 51.3320818, 12.3734686781157 ];
+      var punkt = L.marker(punktKoordinaten).addTo(karte);
+     </script>
+  </body>
+</html>
diff --git a/docs/05_leaflet_hover.html b/docs/05_leaflet_hover.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Step 05: Leaflet Point Marker with Hover</title>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+       integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+       crossorigin=""/>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+       integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+       crossorigin=""></script>
+	<style>
+		#KarteMitPunkt { height: 480px; }
+	</style>
+  </head>
+  <body>
+    <p>
+      <ul>
+        <li><a href="https://leafletjs.com/reference-1.3.0.html#tooltip">Leaflet Tooltip</a></li>
+      </ul>
+    </p>
+    <p>
+      <div id="KarteMitPunkt" />
+    </p>
+    <script>
+      // Karte mit Mittelpunkt Leipzig erzeugen
+      var laengenGrad = 12.3742236;
+      var breitenGrad = 51.3399028;
+      var kartenMittelpunktKoordinaten = [ breitenGrad, laengenGrad ];
+      var zoomStufe = 14;
+      var karte = L.map('KarteMitPunkt').setView(kartenMittelpunktKoordinaten, zoomStufe);
+      // Hintergrundkarte setzen
+      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      }).addTo(karte);
+      // Punkt-Marker setzen
+      var punktKoordinaten = [ 51.3320818, 12.3734686781157 ];
+      var punkt = L.marker(punktKoordinaten).addTo(karte);
+
+	  var hoverZuMarkerAbstand = function(aktuelleZoomStufe) {
+		return 0.39 / Math.pow(2, aktuelleZoomStufe - 6);
+	  };
+	  var punktHover;
+	  punkt.on('mouseover', function(e) {
+		var hoverKoordinaten = [
+		    punktKoordinaten[0] + hoverZuMarkerAbstand(karte.getZoom()), 
+			punktKoordinaten[1]
+		];
+		if (karte) {
+			punktHover = L.popup()
+			    .setLatLng(hoverKoordinaten)
+				.setContent("Basislager Co-Working Space")
+				.openOn(karte);
+		}
+	  });
+	  punkt.on('mouseout', function (e) {
+	    if (punktHover && karte) {
+		  karte.closePopup(punktHover);
+		  punktHover = null;
+		}
+	  });
+	  // ab Leaflet 1.3
+	  //punkt.bindTooltip("my tooltip text").openTooltip();
+     </script>
+  </body>
+</html>