Switch to klokan tileserver with key and add attribution

maps/index.md

@@ -21,9 +21,9 @@ published: true
 	var brightMap = new mapboxgl.Map({
 		    container: 'vector-map',
 		    style: '/styles/bright-v8.json',
-		    center: [8.54124, 47.36686],
-		    zoom: 6
-	});
+		    center: [8.5456, 47.3739],
+		    zoom: 11
+	}).addControl(new mapboxgl.Navigation({position: 'top-left'}));
 
 	var bright = document.getElementById("vector-osm-bright");
 	bright.onclick = function(e) {
@@ -32,8 +32,8 @@ published: true
         var brightMap = new mapboxgl.Map({
 		    container: 'vector-map',
 		    style: '/styles/bright-v8.json',
-		    center: [8.54124, 47.36686],
-		    zoom: 6
+		    center: [8.5456, 47.3739],
+		    zoom: 11
 		});
 	}
 	var basic = document.getElementById("vector-osm-basic");
@@ -43,8 +43,8 @@ published: true
         var basicMap = new mapboxgl.Map({
 		    container: 'vector-map',
 		    style: '/styles/basic-v8.json',
-		    center: [8.54124, 47.36686],
-		    zoom: 6
+		    center: [8.5456, 47.3739],
+		    zoom: 11
 		});
 	}
 </script>
@@ -59,25 +59,32 @@ published: true
 	><button id="dark-map" class="map-button">Dark Map</button
 	><button id="streets-basic" class="map-button">Streets Basic</button
 	><button id="woodcut" class="map-button">Woodcut</butto><button id="pirates" class="map-button">Pirates</button
-	><button id="wheatpaste" class="map-button">Wheatpaste</button>
+	><button id="wheatpaste" class="map-button">Wheatpaste</button
+	><button id="retro" class="map-button">Retro</button>
 </div>
 
-
 <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
 <script>
-var map = L.map('raster-map').setView([51.505, -0.09], 13);
-var layer = L.tileLayer('http://rastertiles.osm2vectortiles.org/osm-bright/{z}/{x}/{y}.png').addTo(map);
+var map = L.map('raster-map').setView([47.3739, 8.5456], 13);
+var layer = L.tileLayer('http://klokantech-{s}.tileserver.com/osm-bright/{z}/{x}/{y}.png?key=WQ5sRntXphOrWgesmtmU', 
+	{
+		id: 'MapID', 
+		attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
+		subdomains: '0123'
+	}
+).addTo(map);
 
-addClickListener('raster-osm-bright', 'http://rastertiles.osm2vectortiles.org/osm-bright/{z}/{x}/{y}.png');
+addClickListener('raster-osm-bright', 'http://klokantech-{s}.tileserver.com/osm-bright/{z}/{x}/{y}.png?key=WQ5sRntXphOrWgesmtmU');
 addClickListener('comic-map', 'http://rastertiles.osm2vectortiles.org/comic/{z}/{x}/{y}.png');
 addClickListener('light-map', 'http://rastertiles.osm2vectortiles.org/light/{z}/{x}/{y}.png');
 addClickListener('dark-map', 'http://rastertiles.osm2vectortiles.org/dark/{z}/{x}/{y}.png');
-addClickListener('streets-basic', 'http://rastertiles.osm2vectortiles.org/streets-basic/{z}/{x}/{y}.png');
+addClickListener('streets-basic', 'http://klokantech-{s}.tileserver.com/streets-basic/{z}/{x}/{y}.png?key=WQ5sRntXphOrWgesmtmU');
 addClickListener('woodcut', 'http://rastertiles.osm2vectortiles.org/woodcut/{z}/{x}/{y}.png');
 addClickListener('pirates', 'http://rastertiles.osm2vectortiles.org/pirates/{z}/{x}/{y}.png');
 addClickListener('wheatpaste', 'http://rastertiles.osm2vectortiles.org/wheatpaste/{z}/{x}/{y}.png');
+addClickListener('retro', 'http://klokantech-{s}.tileserver.com/retro/{z}/{x}/{y}.png?key=WQ5sRntXphOrWgesmtmU');
 
 function addClickListener(name, url) {
 	var mapButton = document.getElementById(name);

styles/basic-v8.json

@@ -3,7 +3,7 @@
   "name": "Basic",
   "sources": {
       "mapbox": {
-          "url": "http://vectortiles.osm2vectortiles.org/world.json",
+          "url": "http://klokantech.tileserver.com/v1/index.json?key=WQ5sRntXphOrWgesmtmU",
           "type": "vector"
       }
   },

styles/bright-v8.json

@@ -63,7 +63,7 @@
     },
     "sources": {
         "mapbox": {
-            "url": "http://vectortiles.osm2vectortiles.org/world.json",
+            "url": "http://klokantech.tileserver.com/v1/index.json?key=WQ5sRntXphOrWgesmtmU",
             "type": "vector"
         }
     },