Zoom in on the value found after searching

Question

Zoom in on the value found after searching

Navigation

#1 by (0 votes)

0

Hello! I'm developing a map here and I have a search field and a map with the layers. I'm using leaflet and the search I'm doing custom, because the plugin does not meet my needs. I'm having trouble zooming after finding what I'm looking for. Example: I looked around for a neighborhood and found it zoomed in on its location. Before the explanations, follow what I have already done:

 stComerciaisLayer = L.geoJSON(setoresComerciais, {
    style: function (feature) {
            return feature.properties && feature.properties.style;
 },

Here the variable stComerciaisLayer stores the json that contains all the data

$("#txtSearch").autocomplete({
                source: setoresComerciais.features.map(function(d){
                    return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc
    }),
    select: function(event, ui){
        map.fitBounds(stComerciaisLayer.getBounds(ui.item.value));
    } 
});

The search is working 100%, is searching, autocompleting and is finding value, the problem is when it is time to zoom in on the value sought. When I make a console.log(ui.item.value) the result is the searched value that corresponds to return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc

What am I doing wrong and how can I make this zoom work? And if possible they can explain to me, because I can not understand the error. My code is in my repository:

link

Thank you!

javascript jquery json jquery-ui

asked by anonymous 22.11.2017 / 00:08

1 answer

Tooltip Chart JS Line Chart How to display photo saved in the database?

score 0 · Accepted Answer

I've been able to solve this problem, and if you're interested in this problem, here's my solution:

$("#txtSearch").autocomplete({
    source: setoresComerciais.features.map(function(d,i){
        return {
           label: d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc,
           id: i
        };
    }),
    select: function(event, ui){
        var featureLayer = L.geoJSON(setoresComerciais.features[ui.item.id]);
        map.fitBounds(featureLayer.getBounds());
    } 
});

I just needed to pass another "i" parameter that will store the value of the id of the searched area. Then, with the result I return it with ui.item.id, remembering that ui.item label or value returns the value found in the search. And there it is simple, map.fitBounds to focus on somewhere found receiving the featuresLayer.getBounds parameter precisely to focus where I want. And ready! If you have any questions, just comment, if you liked the answer, please mark it as correct and positive-answer!