0
votes

Basic setup is this:

  1. Instantiate a map object centered on a lat/lng/zoom
  2. Create a Feature Layer with multiple markers and add to map
  3. 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:

  1. Not call setView() on the map when originally instantiating the map object
  2. 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.

1

1 Answers

0
votes

The mistake was my own. GeoJSON coordinates are all formatted [x,y] / [lon,lat] instead of [lat,lon] as I was doing. It's the little things.

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: [-73.9801, 40.73771]
            },
            properties: {}
        },
        {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [-73.9897, 40.72661]
            },
            properties: {}
        }
    ]
};


var featureLayer = L.mapbox.featureLayer(geoJSON).addTo(map);
map.fitBounds(featureLayer.getBounds());