Get value from an input select with getBounds

Question

I have an input select (or select box, whatever), with some values, examples: 72, 73, 74... Where each value is an area on a map. I need that value for each option selected, so as to zoom in on the map in the respective area of that value. I tried the following code:

$("#numSearch").on('change', function(e) {

    var value = $(this).find(':selected').val();
    //var boundArea = value.target;
    //map.fitBounds(boundArea.getBounds());
    alert(value);

});

Where $("#numSearch") select's id.

The result is the select's values (72, 73, 74...) as a string type.

And this:

//var boundArea = value.target;
//map.fitBounds(boundArea.getBounds());

Doesn't work :(

Can somebody help me zoom in on a selected area according to the value selected in the select???

The complete code is here:

https://github.com/eltonsantos/leaflet-tests/blob/master/teste3/index.html

and the json is here:

https://raw.githubusercontent.com/eltonsantos/leaflet-tests/master/teste3/js/geoSetoresComerciais.js

I just want get value came to selectbox (I have it) and zoom on map according value choosed.

Answer 1

Here is a possible solution, assuming that you want to zoom to the 'id' property of each of your features in the "setoresComerciais.json" file.

Step 1: Create a function with two inputs: the raw JSON and the layer created by L.GeoJSON. The aim is to create a JavaScript object that matches the GeoJSON 'id' to the Leaflet Layer ID (arbitrarily generated by Leaflet upon running L.GeoJSON)

var leafletIdJsonProperty={}

function MatchJSONProperty(jsonData, leafletLayer) {
    for (feature in leafletLayer._layers) {
        //A JS Object consisting of GeoJSON ID, Leaflet Layer ID
        leafletIdJsonProperty[leafletLayer._layers[feature].feature.properties.id] = parseInt(feature)
    }
}

Step 2: Get the GeoJSON ID from the select, find the matching Leaflet Layer ID and zoom to that feature.

$("#numSearch").on('change', function(e) {

    var value = $(this).find(':selected').val();
    var boundArea = parseInt(value);    
    map.fitBounds(boundaryLayer._layers[leafletIdJsonProperty[boundArea]]._bounds);
});

Then you just need to run this function once the JSON has been retrieved and the leaflet layer created (probably inside your AJAX call). If you do that, notice that in your case you'd need to remove the 'setoresComerciais=' from the beginning of the geoSetoresComerciais.js.