swap open topo map with LINZ

masks/messages.html

@@ -3,9 +3,9 @@
 		<div class="loader fa fa-map"></div>
 	</div>
 	<div id="legend">
-		<div class="line green">Te Araroa</div>
-		<div class="line blue">Routeburn Track</div>
-		<div class="line red">Hors rando</div>
+		<div class="line te_araroa">Te Araroa</div>
+		<div class="line routeburn">Routeburn Track</div>
+		<div class="line hitchhiking">Hors rando</div>
 	</div>
 	<div id="feed">
 		<div id="posts">
@@ -21,8 +21,8 @@ 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
+	- Track Names
 	*/
 	
 	self.tmp('$Map', $('#map'));
@@ -87,9 +87,9 @@ 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}),
-			oOpenTopoMap	= L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {id: 'OpenTopoMap', minZoom: 2, maxZoom: 19});
+			//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'});
+			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});
 		
 		//Map
@@ -127,24 +127,25 @@ oSpot.pageInit = function(asHash)
 		});
 		
 		//Controls
-		L.control.layers({'Satellite': oMapBoxSat, 'Open Topo Map': oOpenTopoMap}, null, {position: 'topleft'}).addTo(oMap);
+		L.control.layers({'Satellite': oMapBoxSat, 'LINZ': oLinz}, null, {position: 'topleft'}).addTo(oMap);
 		
 		//Te Araroa track
 		$.ajax({
 			dataType: 'json',
 			url: 'kml/TeAraroaTrail_simplified.geojson',
 			mimeType: 'application/json',
-			success: function(data) {
-				L.geoJson(data, {
-				    style: function(oTrack) {
-						var sColor = '';
-						switch (oTrack.properties.type) {
-							case 'te_araroa':	sColor = '#00ff78'; break;
-							case 'routeburn':	sColor = '#0000ff'; break;
-							case 'hitchhiking':	sColor = '#FF7814'; break;
-						}
-						return {color: sColor};
-					}}).addTo(oMap);
+			success: function(aoTracks) {
+				//Get track colors
+				var asColors = {};
+				$('#legend').find('.line').each(function(iKey, oLegend){
+					var $Legend = $(oLegend);
+					asColors[$Legend.attr('class').replace('line', '').trim()] = $Legend.css('border-top-color');
+				});
+				
+				//Assign track color
+				L.geoJson(aoTracks, {
+				    style: function(oTrack) {return {color: asColors[oTrack.properties.type]};}
+				}).addTo(oMap);
 			}
 		});
 		
@@ -164,12 +165,12 @@ oSpot.pageInit = function(asHash)
 			
 			//Marker events
 			oMarker.on({
-				mouseover: function(){
+				/*mouseover: function(){
 					
 				},
 				mouseout: function(){
 					
-			    },
+			    },*/
 			    click: function(oPoint){
 					self.tmp('map').setView(oPoint.latlng, 15);
 			    }

style/spot.scss

@@ -41,14 +41,14 @@
 			font-size: 1em;
 			color: #222;
 			
-			&.green {
+			&.te_araroa {
 				border-color: #00ff78;
 			}
 			
-			&.blue {
+			&.routeburn {
 				border-color: #0000ff;
 			}
-			&.red {
+			&.hitchhiking {
 				border-color: #FF7814;
 			}
 		}