fix zoom offset

masks/index.html

@@ -5,7 +5,7 @@
 	<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
 	<link type="image/png" href="images/favicon.png" rel="icon" sizes="32x32" />
 	<link type="text/css" href="[#]css_timestamp[#]" rel="stylesheet" media="all" />
-	<script type="text/javascript" src="script/leaflet.js"></script>
+	<script type="text/javascript" src="script/leaflet.min.js"></script>
 	<script type="text/javascript" src="script/jquery.min.js"></script>
 	<script type="text/javascript" src="script/jquery.mods.js"></script>
 	<script type="text/javascript" src="script/spot.js"></script>

masks/messages.html

@@ -96,16 +96,6 @@ oSpot.pageInit = function(asHash)
 			zoomControl: false
 		});
 		
-		
-		//Swap tile layers on zoom level
-		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);
 		
@@ -160,8 +150,7 @@ oSpot.pageInit = function(asHash)
 					
 			    },*/
 			    click: function(oPoint){
-			    	//self.tmp('center_on', oPoint.latlng);
-			    	self.tmp('map').setView(oPoint.latlng, 15);
+			    	self.tmp('map').setOffsetView(self.tmp('map_offset'), oPoint.latlng, 15);
 			    }
 			});
 			
@@ -192,7 +181,7 @@ oSpot.pageInit = function(asHash)
 		});
 		
 		//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));
+		if(self.vars('mode')!='blog') oMap.setOffsetView(self.tmp('map_offset'));
 		
 		//Legend
 		var oLegend = L.control({position: 'bottomright'});
@@ -260,13 +249,18 @@ function getBoundsZoomLevel(bounds, mapDim) {
 	return Math.min(latZoom, lngZoom, ZOOM_MAX);
 }
 
-function getOffsetCenter(oMap, oMapCenter) {
-	var oCenter = (typeof oMapCenter == 'object')?$.extend({}, oMapCenter):oMap.getCenter();
-	var oBounds = oMap.getBounds();
-	var iOffsetX = (oBounds.getEast() - oBounds.getWest()) * self.tmp('map_offset')/2;
+L.Map.include({
+	setOffsetView: function (iOffsetRatioX, oCenter, iZoomLevel) {
+		var oCenter = (typeof oCenter == 'object')?$.extend({}, oCenter):this.getCenter();
+		iZoomLevel = iZoomLevel || this.getZoom();
+		
+		var oBounds = this.getBounds();
+		var iOffsetX = (oBounds.getEast() - oBounds.getWest()) * iOffsetRatioX / ( 2 * Math.pow(2, iZoomLevel - this.getZoom()));
 		oCenter.lng = oCenter.lng - iOffsetX;
-	return oCenter;
-}
+		
+		this.setView(oCenter, iZoomLevel);
+	}
+});
 
 function onFeedScroll(){
 	var $Box = $(this);
@@ -330,8 +324,7 @@ function getPost(asPost) {
 								.click(function(){
 									var $This = $(this);
 									var oCenter = L.latLng(parseFloat($This.data('lat')), parseFloat($This.data('lng')));
-									//self.tmp('center_on', oCenter);
-									self.tmp('map').setView(oCenter, 13);
+									self.tmp('map').setOffsetView(self.tmp('map_offset'), oCenter, 13);
 								})
 						);
 			sClass = 'compass';
@@ -370,7 +363,7 @@ function getPost(asPost) {
 	return $Post;
 }
 
-function getStaticMapUrl(oCenterLat, oCenterLng){
+function getStaticMapUrl(oCenterLat, oCenterLng) {
 	var asParams = [
 		'https://api.mapbox.com/v4/mapbox.satellite',												//Domain
 		'url-http%3A%2F%2Fspot.lutran.fr%2Fimages%2Ffootprint.png('+oCenterLng+','+oCenterLat+')',	//Marker