I have a map I exported from tilemill, made a mapbox map and threw some points on it. The view starts off looking at the US, with a marker somewhere in the middle. If I pan left until the next time I see the US, the markers are gone. Here's the code minus the geoJson data.
var map = L.mapbox.map('map', 'natecraft1.xdan61or').setView([-102, 39], 4);
map.markerLayer.on('layeradd', function(e) {
var marker = e.layer;
var feature = marker.feature;
var image = feature.properties.images
// var img = images
// Create custom popup content
var popupContent = '<img class="pics" src="' + image + '" />'
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 320,
offset: [180, 20]
});
});
map.markerLayer.setGeoJSON(geoJson);
map.markerLayer.on('click', function(e) {
e.layer.openPopup();
var lat = e.layer.getLatLng().lat;
var lng = e.layer.getLatLng().lng;
map.panTo([lat+5, lng+5], 2);
});
map.markerLayer.on('', function(e) {
e.layer.closePopup();
});
Your tilelayer is wrapping around the globe for coordinates outside of the (-180, 180) range. Best option is to set the
maxBounds
option so users don't pan outside of that map and just get bounced back.Here's a live demo of what that would look like