add Open Topo Map

masks/messages.html

@@ -19,6 +19,12 @@
 <script type="text/javascript">
 oSpot.pageInit = function(asHash)
 {
+	/* TODO
+	- keep tooltip open so pictures can be clicked on (use popup?)
+	- switch to opentopomap when zoom > 10
+	- apply 30 % offset to all re-centering
+	*/
+	
 	self.tmp('$Map', $('#map'));
 	
 	//Add Loading
@@ -30,7 +36,6 @@ oSpot.pageInit = function(asHash)
 	};
 	getPost(asLoading).appendTo($('#loading'));
 	
-	//$('#add_posts').click(updateFeed);
 	self.get('messages', function(oMessages){
 		
 		//Build Feed
@@ -82,8 +87,8 @@ oSpot.pageInit = function(asHash)
 		
 		//Tile layers
 		var oMapBoxSat		= L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token='+self.vars('mapbox_key'), {id: 'mapbox.satellite', minZoom: 0, maxZoom: 19}),
-			oMapBoxStreet	= L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+self.vars('mapbox_key'), {id: 'mapbox.streets'}),
 			oOpenTopoMap	= L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {id: 'OpenTopoMap', minZoom: 2, maxZoom: 19});
+			//oMapBoxStreet	= L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+self.vars('mapbox_key'), {id: 'mapbox.streets'}),
 			//oLinz = L.tileLayer('http://tiles-{s}.data-cdn.linz.govt.nz/services;key=92193c0af382409a98694d3e4aa8bd46/tiles/v4/layer=50767/EPSG:3857/{z}/{x}/{y}.png', {id: 'Linz', maxZoom: 17, continuousWorld: true, attribution: 'Sourced from LINZ. CC BY 4.0', subdomains:'abcd'});
 			//oGoogleSatellite = L.tileLayer('https://mt.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {id: 'GoogleSatellite', minZoom: 1, maxZoom: 22});
 		
@@ -91,8 +96,9 @@ oSpot.pageInit = function(asHash)
 		var oMap = L.map(self.tmp('$Map')[0], {
 			center: agCenter,
 			zoom: iZoom,
-			layers: [oMapBoxSat/*, oMapBoxSreet, oOpenTopoMap, oLinz, oGoogleSatellite*/],
+			layers: [oMapBoxSat],
-			attributionControl: false
+			attributionControl: false,
+			zoomControl: false
 			/*mapTypeId: google.maps.MapTypeId.SATELLITE,
 			
 			scaleControl: true,
@@ -115,8 +121,13 @@ oSpot.pageInit = function(asHash)
 			streetViewControl: false*/
 		});
 		
+		//Swap tile layers on zoom level
+		oMap.on('zoomend', function(o) {
+			//if(self.tmp('map').getZoom()) self.tmp('map')
+		});
+		
 		//Controls
-		//L.control.layers({'Map Box': oMapBox, 'Open Topo Map': oOpenTopoMap/*, 'LINZ': oLinz, 'Google Satellite': oGoogleSatellite*/}).addTo(oMap);
+		L.control.layers({'Satellite': oMapBoxSat, 'Open Topo Map': oOpenTopoMap}, null, {position: 'topleft'}).addTo(oMap);
 		
 		//Te Araroa track
 		$.ajax({
@@ -189,7 +200,7 @@ oSpot.pageInit = function(asHash)
 		});
 		
 		//Recenter map once loaded to be at the center of 70% (iMapRatio) of the page
-		if(self.vars('mode')!='blog') offsetMap(oMap, iMapRatio);
+		if(self.vars('mode')!='blog') oMap.panTo(getOffsetCenter(oMap, iMapRatio));
 		
 		//Legend
 		var oLegend = L.control({position: 'bottomleft'});
@@ -257,13 +268,12 @@ function getBoundsZoomLevel(bounds, mapDim) {
 	return Math.min(latZoom, lngZoom, ZOOM_MAX);
 }
 
-//Offset map longitude by iMapRatio (%)
+function getOffsetCenter(oMap, iMapRatio) {
-function offsetMap(oMap, iMapRatio) {
 	var oBounds = oMap.getBounds();
 	var oCenter = oMap.getCenter();
 	var iOffsetX = (oBounds.getEast() - oBounds.getWest())*(iMapRatio - 1)/2;
 	oCenter.lng = oCenter.lng - iOffsetX;
-	oMap.panTo(oCenter);
+	return oCenter;
 }
 
 function onFeedScroll(){

style/_leaflet.scss

@@ -343,12 +343,12 @@
 	border-radius: 5px;
 	}
 .leaflet-control-layers-toggle {
-	background-image: url(images/layers.png);
+	background-image: url(../images/layers.png);
 	width: 36px;
 	height: 36px;
 	}
 .leaflet-retina .leaflet-control-layers-toggle {
-	background-image: url(images/layers-2x.png);
+	background-image: url(../images/layers-2x.png);
 	background-size: 26px 26px;
 	}
 .leaflet-touch .leaflet-control-layers-toggle {