Adding Widgets to Your Map¶

This guide will be showing you examples on how to add a dropdown GUI to your map for selecting the basemap.

Using the LeafMap Module¶

We first create an instance of our LeafMap Map.

In [1]:

from cookiecutter_practice import LeafMap
m = LeafMap.Map()

from cookiecutter_practice import LeafMap m = LeafMap.Map()

Let us first view the default appearance of our map.

In [2]:

m

m

Out[2]:

Adding the Basemap GUI¶

We will now add the GUI for selecting the basemap to use in our map.

In [3]:

m.add_basemap_gui()
# The rendered map should now show a dropdown menu with a list of basemaps to choose from. Beside it is a button to toggle its display.
m

m.add_basemap_gui() # The rendered map should now show a dropdown menu with a list of basemaps to choose from. Beside it is a button to toggle its display. m

Out[3]:

Using the FoliumMap Module¶

We first create an instance of FoliumMap Map.

In [4]:

from cookiecutter_practice import FoliumMap
f = FoliumMap.Map()

from cookiecutter_practice import FoliumMap f = FoliumMap.Map()

We then need to add the basemaps to choose from. By default, the map instance we created has OpenStreetMap included as basemap.

In [5]:

f.add_basemap('CartoDB.Positron')
f.add_basemap('Esri.WorldImagery')
f.add_basemap('OpenTopoMap')

f.add_basemap('CartoDB.Positron') f.add_basemap('Esri.WorldImagery') f.add_basemap('OpenTopoMap')

'CartoDB.Positron'

'Esri.WorldImagery'

'OpenTopoMap'

Adding the Basemap GUI¶

Since FoliumMap does not natively support dynamic updates programmatically after rendering its map, the add_basemap_gui function will be rendering the map containing the GUI.

Note: You may also use add_layer_control which has the same functionality

In [6]:

f.add_basemap_gui()

f.add_basemap_gui()