add 30% x-offset on zoom

masks/messages.html

@@ -21,7 +21,6 @@ oSpot.pageInit = function(asHash)
 {
 	/* TODO
 	- keep tooltip open so pictures can be clicked on (use popup?)
-	- apply 30 % offset to all re-centering
 	*/
 	
 	self.tmp('$Map', $('#map'));
@@ -44,6 +43,7 @@ oSpot.pageInit = function(asHash)
 		self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
 		self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
 		self.tmp('infowindow', 'boolean');
+		self.tmp('map_offset', -0.3);
 		
 		//Centering map
 		var agCenter = {lat:0, lng:0};
@@ -58,8 +58,7 @@ oSpot.pageInit = function(asHash)
 		}
 		else
 		{
-			var iMapRatio = 0.7;
-			var iConfidenceInterval = 0.05;
+			var iMapPadding = 0.05;
 			var iMinLat, iMaxLat, iMinLng, iMaxLng;
 			iMinLat = iMinLng = 180;
 			iMaxLat = iMaxLng = -180;
@@ -78,8 +77,8 @@ oSpot.pageInit = function(asHash)
 			
 			//Calculate adequate zoom (map.fitBounds is dezooming too much)
 			var oMapDim = {
-				height: self.tmp('$Map').height()*(1 - iConfidenceInterval), 
-				width: self.tmp('$Map').width()*(iMapRatio - iConfidenceInterval)
+				height: self.tmp('$Map').height()*(1 - iMapPadding), 
+				width: self.tmp('$Map').width()*(1 + self.tmp('map_offset') - iMapPadding)
 			};
 			iZoom = getBoundsZoomLevel(oMarkerBounds, oMapDim);
 		}
@@ -100,11 +99,16 @@ oSpot.pageInit = function(asHash)
 			zoomControl: false
 		});
 		
+		
 		//Swap tile layers on zoom level
-		oMap.on('zoomend', function(o) {
-			//if(self.tmp('map').getZoom()) self.tmp('map')
+		oMap.on('zoomend', function() {
+			if(typeof self.tmp('center_on') == 'object') {
+				self.tmp('map').panTo(getOffsetCenter(self.tmp('map'), self.tmp('center_on')), {animate: false});
+				self.tmp('center_on', false);
+			}
 		});
 		
+		
 		//Controls
 		L.control.layers({'Satellite': oMapBoxSat, 'LINZ': oLinz}, null, {position: 'topleft'}).addTo(oMap);
 		
@@ -123,11 +127,8 @@ oSpot.pageInit = function(asHash)
 
 				//Assign track color & tooltip
 				L.geoJson(aoTracks, {
-				    	style: function(oTrack) {return {color: asColors[oTrack.properties.type]};}
+				    	style: function(oTrack) {return {color: asColors[oTrack.properties.type], weight: 4, opacity: 1};}
 				})
-				//.bindPopup(function (layer) {
-				//	return layer.feature.properties.description;
-				//})
 				.bindTooltip(function(oLayer) {
 					var asProperties = oLayer.feature.properties;
 					var $Tooltip = $('<div>', {'class':'track_tooltip'});
@@ -162,7 +163,8 @@ oSpot.pageInit = function(asHash)
 					
 			    },*/
 			    click: function(oPoint){
-					self.tmp('map').setView(oPoint.latlng, 15);
+			    	self.tmp('center_on', oPoint.latlng);
+			    	self.tmp('map').setView(oPoint.latlng, 15);
 			    }
 			});
 			
@@ -190,12 +192,12 @@ oSpot.pageInit = function(asHash)
 			});
 		});
 		
-		//Recenter map once loaded to be at the center of 70% (iMapRatio) of the page
-		if(self.vars('mode')!='blog') oMap.panTo(getOffsetCenter(oMap, iMapRatio));
+		//Recenter map to be at the center of 70% (map_offset) of the page, 30% being used by posts
+		if(self.vars('mode')!='blog') oMap.panTo(getOffsetCenter(oMap));
 		
 		//Legend
-		var oLegend = L.control({position: 'bottomleft'});
-		oLegend.onAdd = function() {return L.DomUtil.get('legend');};
+		var oLegend = L.control({position: 'bottomright'});
+		oLegend.onAdd = function(oMap) {return L.DomUtil.get('legend');};
 		oLegend.addTo(oMap);
 		
 		self.tmp('map', oMap);
@@ -259,10 +261,10 @@ function getBoundsZoomLevel(bounds, mapDim) {
 	return Math.min(latZoom, lngZoom, ZOOM_MAX);
 }
 
-function getOffsetCenter(oMap, iMapRatio) {
+function getOffsetCenter(oMap, oMapCenter) {
+	var oCenter = (typeof oMapCenter == 'object')?$.extend({}, oMapCenter):oMap.getCenter();
 	var oBounds = oMap.getBounds();
-	var oCenter = oMap.getCenter();
-	var iOffsetX = (oBounds.getEast() - oBounds.getWest())*(iMapRatio - 1)/2;
+	var iOffsetX = (oBounds.getEast() - oBounds.getWest()) * self.tmp('map_offset')/2;
 	oCenter.lng = oCenter.lng - iOffsetX;
 	return oCenter;
 }
@@ -328,7 +330,9 @@ function getPost(asPost) {
 								.data('lng', asPost.longitude)
 								.click(function(){
 									var $This = $(this);
-									self.tmp('map').setView(L.latLng(parseFloat($This.data('lat')), parseFloat($This.data('lng'))), 13);
+									var oCenter = L.latLng(parseFloat($This.data('lat')), parseFloat($This.data('lng')));
+									self.tmp('center_on', oCenter);
+									self.tmp('map').setView(oCenter, 13);
 								})
 						);
 			sClass = 'compass';
@@ -364,8 +368,6 @@ function getPost(asPost) {
 	
 	if(asPost.displayed_id) $Post.find('.index').append(' '+asPost.displayed_id);
 	
-	//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
-	
 	return $Post;
 }
 

style/spot.scss

@@ -38,12 +38,15 @@
 		}
 	}
 
-	#legend {
-		background: white;
+	#legend, .leaflet-control-layers.leaflet-control {
+		background-color: rgba(255, 255, 255, 0.5);
 		font-family: Roboto, Arial, sans-serif;
-		background: rgba(255, 255, 255, 0.5);
 		border-radius: 3px;
-		padding: 1px 0 0 0;
+		border: none;
+		margin: 1em;
+	}
+	#legend {
+		right: 30vw;
 					
 		.line {
 			display: inline-block;