Basic setup is this:
- Instantiate a map object centered on a lat/lng/zoom
- Create a Feature Layer with multiple markers and add to map
- Call map.fitBounds() to adjust the zoom level to contain said markers
RESULT: The markers render but the underlying map tiles do not.
Folks on SO have reported this issue with previous versions of mapbox.js (I am using v2.1.6). Previous solutions were to:
- Not call setView() on the map when originally instantiating the map object
- Use a timeout to avoid a race condition when calling fitBounds()
Neither of these solutions has helped, however, and I'm curious if there are other folks facing a similar issue. I have created a jsfiddle that demonstrates the issue I'm having: https://jsfiddle.net/Lgfazueq/
L.mapbox.accessToken =
'pk.eyJ1IjoiZHJpemx5IiwiYSI6IkhMLXBmVGcifQ.CFEPrONMLQQJdiJ2NV9Qsg';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40.7377, -73.9801], 12);
//var map = L.mapbox.map('map', 'examples.map-i86nkdio');
geoJSON = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [40.73771, -73.9801]
},
properties: {}
},
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [40.72661, -73.9897]
},
properties: {}
}
]
};
var featureLayer = L.mapbox.featureLayer(geoJSON).addTo(map);
map.fitBounds(featureLayer.getBounds());
Hoping the solution is something minor I've overlooked.