Add menu bar on folium map to select or deselect particular object (Marker)

Question

I've built a cool map like the one below but with more objects.

import folium

base_map = folium.Map(location=[52.2297, 21.0122], control_scale=True, zoom_start=10)

points1 = [(52.228771, 21.003146),

       ( 52.238025, 21.050971),
       (52.255008, 21.036172),
       (52.252831, 21.051385),
       (52.219995, 20.965021)]

for tuple_ in points1:

    icon=folium.Icon(color='white', icon='train', icon_color="red", prefix='fa')
    folium.Marker(tuple_, icon=icon).add_to(base_map)

points2 = [(52.239062, 21.131601),

       (52.204905, 21.168202),
       (52.181296, 20.987486),
       (52.206272, 20.914988),
       (52.254395, 21.224107)]

for tuple_ in points2:
    icon=folium.Icon(color='white', icon='car', icon_color="blue", prefix='fa')
    folium.Marker(tuple_, icon=icon).add_to(base_map)

line_points = [(52.204905, 21.168202),(52.255008, 21.036172), (52.219995, 20.965021), (52.239062, 21.131601), (52.254395, 21.224107)]

folium.PolyLine(locations=line_points, weight=3,color = 'yellow').add_to(base_map)


base_map.save("example_map.html")

result:

Q: I wonder if there is a way to build some kind of menu bar that would enable to select particular object from the map. e.g. only cars, only train or cars and yellow line.

It won't be part any of the website - just a solution to incorporate in .html file, like the one below

Thanks for help!!

Yes, you're in luck. Feature Groups and a Layer Control is what you want. I answered a similar question recently https://stackoverflow.com/a/54756617/3437504 — Bob Haffner, Mar 25 '19 at 20:35

score 9 · Accepted Answer · edited Feb 13 '20 at 19:39

Thanks to @BobHaffner I found my solution. Thanks Bob!

import folium

base_map = folium.Map(location=[52.2297, 21.0122], control_scale=True, zoom_start=10)

points1 = [(52.228771, 21.003146),
           (52.238025, 21.050971),
           (52.255008, 21.036172),
           (52.252831, 21.051385),
           (52.219995, 20.965021)
          ]

train_group = folium.FeatureGroup(name="Trains").add_to(base_map)

for tuple_ in points1:

    icon=folium.Icon(color='white', icon='train', icon_color="red", prefix='fa')
    train_group.add_child(folium.Marker(tuple_, icon=icon))

points2 = [(52.239062, 21.131601),
           (52.204905, 21.168202),
           (52.181296, 20.987486),
           (52.206272, 20.914988),
           (52.254395, 21.224107)
          ]

cars_group = folium.FeatureGroup(name="Cars").add_to(base_map)

for tuple_ in points2:
    icon=folium.Icon(color='white', icon='car', icon_color="blue", prefix='fa')
    cars_group.add_child(folium.Marker(tuple_, icon=icon))

line_points = [(52.204905, 21.168202),
               (52.255008, 21.036172), 
               (52.219995, 20.965021), 
               (52.239062, 21.131601), 
               (52.254395, 21.224107)
              ]
lines_group = folium.FeatureGroup(name="Lines").add_to(base_map)
lines_group.add_child(folium.PolyLine(locations=line_points, weight=3,color = 'yellow'))

folium.LayerControl().add_to(base_map)

base_map.save("example_map.html")

Add menu bar on folium map to select or deselect particular object (Marker)

1 Answers1

Linked