Skip to content

Instantly share code, notes, and snippets.

@missinglink
Last active November 29, 2016 14:59
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save missinglink/7620340 to your computer and use it in GitHub Desktop.
Save missinglink/7620340 to your computer and use it in GitHub Desktop.
Leaflet configuration which allows you to set map co-ordinates with a pixel offset (as per foursquare homepage). In this example I am using jQuery to find the width of `$('main.content')` and use that to offset the map.
var map = L.map( 'map' );
L.Map.prototype.panToOffset = function (latlng, offset, options) {
var x = this.latLngToContainerPoint(latlng).x - offset[0]
var y = this.latLngToContainerPoint(latlng).y - offset[1]
var point = this.containerPointToLatLng([x, y])
return this.setView(point, this._zoom, { pan: options })
}
function centerMap(){
var contentWidth = $('main.content').width() / 2;
map.panToOffset( currentCoords, [ contentWidth, 0 ] );
}
map.on( 'resize', centerMap );
var currentCoords = [];
var currentZoom = 10;
function mySetView( coOrds, zoom ){
if( currentCoords ){ currentCoords = coOrds; }
if( currentZoom ){ currentZoom = zoom; }
map.setView( currentCoords, currentZoom );
centerMap();
}
L.tileLayer.provider('OpenStreetMap').addTo(map);
mySetView( [ 7.746116, 98.778410 ], 14 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment