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!!

Asked By: Mateusz Konopelski

||

Source

Answer 1

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")

Answered By: Mateusz Konopelski

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

Question:

Answers: