What I want to do is create an interactive choropleth map that has a dropdown menu of various countries so that the map updates when you click on that country.

As an example, here's an interactive choropleth of Ethiopia that I have, along with the code in the index.html file:

http://laurenoldham1202.github.io/magic-ethiopia/ https://github.com/laurenoldham1202/magic-ethiopia

I want to recreate this map so that it has a drop-down menu of about 2 dozen other countries with the same content. The map will act the same way as it does with just Ethiopia, but the user will have options to choose which country they want to view. When they click on that country, the map will update to show that country.

Is there a way to do this inside of Leaflet?

1 Answer 1


I see no special difficulty in implementing what you describe.

The drop-down menu can be either external or styled as a map control, like you have done for your legends and slider. Then you can react to "change" event to detect selection of a new country.

Panning to the new country can be easily done through map.fitBounds() and having your shapes gathered in a Feature Group so that you can easily retrieve its bounds.

Then you can show only the shapes of the chosen country and hide all the other ones, through simple map.addLayer() and map.removeLayer().

You might also need to swap your legends as well, in case your data is not normalized across all countries.


By the way, as for the drop-down menu and panning the map to the selected country, you might be interested in this plugin (or look at how it is done inside): Leaflet.CountrySelect (demo)

  • Alright, I've been poking around trying to figure this out for a few days now. I've stripped down my code to the barebones for readability. I'm not sure how to implement map.fitBounds to pan to each individual country. I've got individual geoJSONs in a Feature Group, but I don't know where to go from here! I'm still very new to JS/Leaflet. This is how I've parsed my data, but I'm not sure I'm on the right track. Index file here: github.com/laurenoldham1202/rock
    – Lauren
    Commented Jul 5, 2016 at 20:24
  • If I understand correctly, your ctry variable is actually the Feature Group holding all of your countries? In that case, you would not be interested in that group bounds, but on bounds of a selected country. Create a dictionary (object mapping) of your individual countries, and create your select options at the same time. Look in Stack Overflow, I think there should be some examples there already. Feel free to ask for help on SO as well, as you seem to need help more in programming. Good luck!
    – ghybs
    Commented Jul 6, 2016 at 8:00

Your Answer

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

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