0

Using leaflet control, how do I create a drop down menu which lists country names?

When selecting a country on this list, the map will zoom into the selected country on that map.

countriesLayer = L.geoJson(countries,
            {
                onEachFeature: countriesOnEachFeature
            }
        ).addTo(map);

This layer loads my countries onto the map from my geojson file.

var geoJsonFeatures = [];
function countriesOnEachFeature(feature, layer){
        if (feature.properties && feature.properties.Country){
            geoJsonFeatures.push(feature);
        }
}

And then I have a loaded array which holds my geojson data as objects in the array.

 var legend = L.control({position: 'bottomright'});  
 legend.onAdd = function (map) {  
    var div = L.DomUtil.create('div', 'info legend');  
    var dropDownContent ='<select>';  
    for (var i = 0; i < uniqueCountryArray.length; i++ ){  
        dropDownContent += '<option value=' + "'" + uniqueCountryArray[i]["ISO3"] + "'>" + uniqueCountryArray[i]["Country"] + '</option>';  
       }  
        dropDownContent += '</select>';  
        div.innerHTML = dropDownContent;  
        div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;  
        return div;  
};

Next, I created the drop down list with it's ISO 3 code value attached to it.

$('select').change(function(){ //when user selects a country from the drop down list
            var selectedCountry = document.getElementById('ddVal').value;
            for (i=0 ; i < geoJsonFeatures.length; i++){//zooms to selected country on match
                if(selectedCountry == geoJsonFeatures[i].properties.ISO_3_CODE){
                    map.fitBounds(geoJsonFeatures[i].getBounds());
                }
            }
});

I get the ISO 3 code value from the select, compare it to the geoJson ISO 3 code in the array. When it matches, I want to use the object in the geoJson array to center it to the country selected on my Leaflet map.

I am certain that I am using the getBounds() function wrongly.

1

Leaflet uses an internal ID, set it to county name or ISO 3 code, this must be a unique value. You do this in the forEachFeature function.

function forEachFeature(feature, layer) {
            // Tagging each state poly with their name for the search control.
            layer._leaflet_id = feature.properties.STATE_NAME;

On your dropdown Get the ID or Value that corresponds to the Leafet unique ID and pass it to a function, in my case it was called polySelect.

polySelect(ui.item.label);

That function fires off a click event, and zooms to it.

// fire off click event and zoom to polygon  
    function polySelect(a){
        map._layers[a].fire('click');  // 'clicks' on state name from search
        var layer = map._layers[a];
        map.fitBounds(layer.getBounds());  // zooms to selected poly
  • A working example using JQuery's autocomplete.gistechsolutions.com/leaflet/DEMO/Search/index.html – Bill Chappell Apr 17 '18 at 16:51
  • Appreciate the example very much! I have edited my question to add more context. Is the way I am doing it wrong? Could it possibly work? – MelBB Apr 17 '18 at 17:20
  • 1
    Your way might work with a little tweaking but it's more code then needed. Instead of an array that you loop through, the method I use is like a dictionary with a key/value. I just set the internal ID, from the select get the internal ID and then call it with a click event and zoom. You method basically creates a copy of your data which is only used for the search. – Bill Chappell Apr 17 '18 at 17:54

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.