How do I create a data window in Folium disconnected from the Marker?

Viewed 24

I am currently trying to code a folium.Marker so that it will, when clicked, create a window which slides up on the right side of the screen, displaying information pertaining to the marker pressed.

I am relatively new to Folium and Leaflet in general. I imagine its got something to with Layer or LayerControl but I cant seem to work out exactly what to do.

My code is below, but I think this is a question more related to pseudocode.

import sys
!{sys.executable} -m pip install folium
!{sys.executable} -m pip install pandas
!{sys.executable} -m pip install geocoder
import geocoder
import folium
import pandas as pd

g=geocoder.ip('me')
location = g.latlng
obsMap = folium.Map(
    location,
    zoom_start=2
)
obsMap

observations = pd.read_csv('observations.csv')
observations['Marker Colour'] = observations.apply(classDiffColour, axis=1)
for _, observation in observations.iterrows():

folium.CircleMarker(
    location=[observation['Latitude'], observation['Longitude']],
    tooltip=observation['Name'],
    popup=observation['Name'],
    color=observation['Marker Colour'],
).add_to(obsMap)

obsMap

Below is sort of what I want the outcome to display, in which the blank box will have data and information. The line is not essential but I would like to have some sort of indication of which Marker is selected.

enter image description here

1 Answers

Since no data was presented, I used sample data from another visualization library to create a popup in HTML format to create the map. In this case it is only a balloon type popup; javascript might be able to add lines and arrows.

import folium
import branca
import pandas as pd

lat = [38.91427,38.91538,38.91458,38.92239,38.93222,38.90842,
       38.91931,38.93260,38.91368,38.88516,38.921894,38.93206,38.91275]

lon = [-77.02827,-77.02013,-77.03155,-77.04227,-77.02854,-77.02419,
       -77.02518,-77.03304,-77.04509,-76.99656,-77.042438,-77.02821,-77.01239]
name = ["The coffee bar","Bistro Bohem","Black Cat","Snap","Columbia Heights Coffee",
        "Azi's Cafe","Blind Dog Cafe","Le Caprice","Filter","Peregrine","Tryst","The Coupe","Big Bear Cafe"]

fake_phone_number = ['202-555-0472','202-555-0752','202-555-0287','202-555-0822','202-555-0699','202-555-0850',
'202-555-0063','202-555-0768','202-555-0681','202-555-0005','202-555-0854','202-555-0055','202-555-0888']

df = pd.DataFrame({'lat': lat, 'lon':lon, 'name':name, 'phone': fake_phone_number})

df.head()
lat     lon     name    phone
0   38.91427    -77.02827   The coffee bar  202-555-0472
1   38.91538    -77.02013   Bistro Bohem    202-555-0752
2   38.91458    -77.03155   Black Cat   202-555-0287
3   38.92239    -77.04227   Snap    202-555-0822
4   38.93222    -77.02854   Columbia Heights Coffee     202-555-0699

locations = [df['lat'].mean(), df['lon'].mean()] 

m = folium.Map(locations, zoom_start=14)# [43, -100],

for row in df.itertuples():
    print(row)
    html = f"""
        <h5>{row[3]}</h5>
        <span style='color:#0000ff;'>Phone</span>: {row[4]}
        """
    iframe = branca.element.IFrame(html=html, width=250, height=100)
    popup = folium.Popup(iframe, max_width=500)

    folium.CircleMarker([row[1], row[2]], popup=popup).add_to(m)

m

enter image description here

Related