[GIS] Adding drop-down menu to leaflet map to update map/tiles to new location

javascriptleaflet

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?

Best Answer

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.

EDIT:

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)

Related Solutions

[GIS] Adding drop-down menu on leaflet map instead of L.control

You can still use L.control, you just need to extend it and create the select within the control.

I cannot claim this as my own, but here is a JSFIDDLE.

I found the link as it was reported as an issue in the Leaflet GitHub page.

Notice how you create the innerHTML for the control div:

var div = L.DomUtil.create('div', 'info legend');
div.innerHTML = '<select><option>1</option><option>2</option><option>3</option></select>';
div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
return div;

Hope this helps!

[GIS] Leaflet: Scroll wheel controlling map zoom and not drop down menu

I've been stuck on an issue quite similar to yours by having a custom control with a scrollable div inside.

At least a partial solution can be achieved by using lines like this:

var elem = L.DomUtil.get('yourelementid');
L.DomEvent.on(elem, 'mousewheel', L.DomEvent.stopPropagation);

where elem is the element that's laid out over the map.

This prevents the map from being zoomed by scrolling the mouse wheel, but it is only a partial solution because it also prevents the scrolling inside the custom control. However, I'm not really sure how it acts on a dropdown like yours, so you might want to give it a try!

Best Answer

Related Solutions

[GIS] Adding drop-down menu on leaflet map instead of L.control

[GIS] Leaflet: Scroll wheel controlling map zoom and not drop down menu

Related Question