0

I am iterating through an array of zipcodes and passing each to Mapbox Geocoding API. With every iteration, on success, I pass to L.geojson(). After the last iteration I call map.fitBounds(jsonLayer).

Then this error:

...Uncaught Error: Bounds are not valid

Here is my full code:

var zipList = ["90210", "03103", "11206", "79109"];

function findMe(zipList) {
    var listLength = zipList.length;
    for (var i = 0; i < listLength; i++) {
        var myRequest = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + zipList[i] + ".json?access_token=" + L.mapbox.accessToken + "&limit=1";
        $.ajax({
            method: 'GET',
            url: myRequest,
            success: (function (data) {
                jsonLayer = L.geoJson(data, {
                    onEachFeature: onEachFeature
                });
            })
        })
    }
    map.fitBounds(jsonLayer);
};

Does this have something to do with Ajax and asynchronous? What can I do to avoid this error and fit map to comprehensive marker set?

--

Edit: I have also tried pushing lat and long coordinates to an array before calling map.fitBounds(markerArray); Same error.

function onEachFeature(feature, layer) {
    markerArray.push(L.marker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]));
}
  • Several methods to get markers featuregroup bounds can be found in stackoverflow.com/questions/16845614/… – NettaB Feb 10 '18 at 9:48
  • Thank u @NettaB I am trying methods from this page. Could you advise as to why message 'Bounds are not valid'? – wtgeographer Feb 10 '18 at 16:48
  • From my experience there's a difference between marker and polygon featuregroup. The best method n my opinion is var bounds = L.latLngBounds(markerArray); map.fitBounds(bounds); – NettaB Feb 10 '18 at 17:40
1

I recommend looking at the leaflet GeoJSON example, and implement the pointToLayer method in order to add your markers properly. You are sending several ajax requests and recreating the geoJSON group in each ajax call. I think that this approach would help :

var zipList = ["90210", "03103", "11206", "79109"];
var geojsonMarkerOptions = {
  radius: 8,
  fillColor: "#ff7800",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8
};
function findMe(zipList) {
    var listLength = zipList.length;
    var featuresData = [];
    for (var i = 0; i < listLength; i++) {
        var myRequest = "https://api.mapbox.com/geocoding/v5/mapbox.places/" + zipList[i] + ".json?access_token=" + L.mapbox.accessToken + "&limit=1";
        $.ajax({
            method: 'GET',
            url: myRequest,
            success: (function (data) {
                featuresData.push(data)                
            })
        })
    }
    var jsonLayer = L.geoJson(featuresData, {
            pointToLayer: function (feature, latlng) {
                return L.circleMarker(latlng, geojsonMarkerOptions);
            }
        });
    map.fitBounds(jsonLayer.getBounds());
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.