0

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.

1
  • What does this select value mean? To what property in your GeoJSON feature does it correlate? You have multiple properties there: "id", "sco_cod_loc"...
    – 15Step
    Feb 2, 2018 at 14:48

1 Answer 1

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.

11
  • Dont work :( boundaryLayer is not definned, so I change to boundArea, so I did: map.fitBounds(boundArea._layers[leafletIdJsonProperty[boundArea]]._bounds); and return: Uncaught TypeError: Cannot read property 'undefined' of undefined Feb 2, 2018 at 17:43
  • boundaryLayer was just a placename for the layer containing the JSON, in your case I believe it is "stComerciaisLayer", and for my 'jsonData' variable it should be in your case "setoresComerciais" (according to your index.html on github)
    – 15Step
    Feb 2, 2018 at 18:16
  • Man, continue without work, I did it: var value = $(this).find(':selected').val(); var boundArea = parseInt(value); var xxxLayer = L.geoJSON(stComerciaisLayer.features.sco_num_sc.xxxLayer); map.fitBounds(xxxLayer.getBounds()); Feb 2, 2018 at 19:09
  • I tried it: console.log(stComerciaisLayer.features["properties"]["sco_num_sc"][boundArea]); where boundArea = 74, but dont work too :( Feb 2, 2018 at 19:24
  • The value 74, for example, is equivalent the: "sco_num_sc" in my JSON Feb 2, 2018 at 19:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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