Merge of both Folium and Leaflet execises

JS/config.js

@@ -0,0 +1,27 @@
+L.mapbox.accessToken = 'pk.eyJ1Ijoic2ZyaXRzY2hpIiwiYSI6ImNqMWM3bWc0ZzAwNHczM3BhdDY3aGM4NHUifQ.4L6rSyUbvozhhYjbhl8HRg';
+
+var osmAttributionUrl = "https://www.openstreetmap.org/copyright";
+var osmAttributionText = "OSM";
+var mapboxAttributionUrl = "https://www.mapbox.com/about/maps/";
+var mapboxAttributionText = "MapBox";
+
+var mapboxUrl = "https://api.tiles.mapbox.com/v4/sfkeller.k0onh2me/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2ZrZWxsZXIiLCJhIjoia3h4T3pScyJ9.MDLSUwpRpPqaV7SVfGcZDw";
+var osmUrl = "https://tile.osm.ch/osm-swiss-style/{z}/{x}/{y}.png";
+
+var createAttribution = function(mapsrc, mapdesc){
+	return "<a href='https://wiki.openstreetmap.org/wiki/Open_Database_License'>OpenStreetMap</a> contributors | "
+		+ "Map data &copy; <a href=" + mapsrc + ">" + mapdesc + "</a> | "
+		+ "<a href='https://giswiki.hsr.ch/Webmapping_Clients'>About</a> | "
+		+ "<a href='https://www.hsr.ch/geometalab'>By GeometaLab</a>";
+};
+
+var mapboxAttribution = createAttribution(mapboxAttributionUrl, mapboxAttributionText),
+	osmAttribution = createAttribution(osmAttributionUrl, osmAttributionText);
+
+var mapboxSatellite = L.tileLayer(mapboxUrl, {id: 'mapid', attribution: mapboxAttribution}),
+	mapboxStreets = L.tileLayer(osmUrl, {id: 'mapid', attribution: mapboxAttribution});
+
+var baseMaps = {
+	"Satellite": mapboxSatellite,
+	"Streets": mapboxStreets
+};

JS/geojsonHandler.js

@@ -0,0 +1,53 @@
+var getGeojson = function(path) {
+	var geoJson = new L.geoJson();
+
+	$.ajax({
+		dataType: "json",
+		url: path,
+		success: function(data) {
+			$(data.features).each(function(key, data) {
+				geoJson.addData(data);
+			});
+		}
+	}).error(function() {});
+	return geoJson;
+}
+
+// Übung 3 - geojson castles
+var loadGeojson = function(filepath, layergoup, icon){
+    $.getJSON(filepath, function(data) {
+        var jsoncastles = L.geoJson(data, {
+            //go through every element of the json and add it to the layer
+            onEachFeature: function (feature, layer) {
+                layer.bindPopup(feature.properties.name ? feature.properties.name : "Kein Name");
+            },
+            pointToLayer: function (feature, latlng) {
+                return L.marker(latlng, {icon: icon });
+            }
+        });
+        jsoncastles.addTo(layergoup);
+    });
+    return layergoup;
+};
+
+// Übung 4 - geojson castles with leaflet-clusters-plugin
+var castleMarkers;
+
+var loadGeojsonCluster = function(filepath, layergroup, icon){
+    $.getJSON(filepath, function(data) {
+		castleMarkers = L.markerClusterGroup();
+        var jsonCastles = L.geoJson(data, {
+            // go through every element of the json and add it to the layer.
+            onEachFeature: function (feature, layer) {
+                layer.bindPopup(feature.properties.name ? feature.properties.name : "Kein Name");
+            },
+            pointToLayer: function (feature, latlng) {
+				return L.marker(latlng, {icon: icon });
+            }
+        });
+		// Add generated "jsonCastles" layer to "castleMarkers".
+        jsonCastles.addTo(castleMarkers);
+		castleMarkers.addTo(layergroup);
+    });
+    return layergroup;
+};

JS/staticMapElements.js

@@ -0,0 +1,19 @@
+var marker = L.marker([47.22234, 8.81727]);
+
+var polygon = L.polygon([
+	[47.22354, 8.81872],
+	[47.22325, 8.8182],
+	[47.22294, 8.81857],
+	[47.22323, 8.81909]
+], {
+	color: '#dde21a',
+	fillColor: 'yellow',
+	fillOpacity: 0.5
+});
+
+var circle = L.circle([47.2225, 8.81481], {
+	color: 'red',
+	fillColor: '#f03',
+	fillOpacity: 0.5,
+	radius: 20
+});

Leaflet.markercluster-1.0.4/dist/MarkerCluster.Default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

Leaflet.markercluster-1.0.4/dist/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

Leaflet.markercluster-1.0.4/dist/WhereAreTheJavascriptFiles.txt

@@ -0,0 +1,5 @@
+We don't ship the .js files in the git master branch.
+They are only present in version tags and in npm.
+
+See how to get the JS files here: https://github.com/Leaflet/Leaflet.markercluster#using-the-plugin
+Or how to build them: https://github.com/Leaflet/Leaflet.markercluster#building-testing-and-linting-scripts