python-visualization / python-visualization/folium

How to open the popup automatically when a search is found for a GeoJson layer?

Open
#1,286 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Python
Stars
7.4k
Forks
2.3k
Avg merge
17h 22m
Merged PRs (30d)
11

Description

Please add a code sample or a nbviewer link, copy-pastable if possible
# Your code here
import folium
import branca
import geopandas
from folium.plugins import Search

print(folium.__version__)

states = geopandas.read_file(
    'https://rawcdn.githack.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json',
    driver='GeoJSON'
)

min, max = states['density'].quantile([0.05,0.95]).apply(lambda x: round(x, 2))

colormap = branca.colormap.LinearColormap(
    colors=['#f2f0f7','#cbc9e2','#9e9ac8','#756bb1','#54278f'],
    index=states['density'].quantile([0.2,0.4,0.6,0.8]),
    vmin=min,
    vmax=max
)

colormap.caption="Population Density in the United States"

m = folium.Map(location=[38,-97], zoom_start=4)


style_function = lambda x: {
    'fillColor': colormap(x['properties']['density']),
    'color': 'black',
    'weight':2,
    'fillOpacity':0.5
}


stategeo = folium.GeoJson(
    states,
    name='US States',
    style_function=style_function,
    popup=folium.GeoJsonPopup(
        fields=['name', 'density'],
        aliases=['State', 'Density'], 
        localize=True
    )
).add_to(m)


statesearch = Search(
    layer=stategeo,
    geom_type='Polygon',
    placeholder='Search for a US State',
    collapsed=False,
    search_label='name'
).add_to(m)

folium.LayerControl().add_to(m)
colormap.add_to(m)

m
Problem description

I was trying to make the popup open automatically when a search is found in a GeoJson layer. My code is modified from an example code "plugin-Search.ipynb". I am using the "master" version of folium on the github. Right now, my code cannot open the popup when a search is found. I checked the source code "search.py" in "plugins" folder. The code is:

{{this.layer.get_name()}}searchControl.on('search:locationfound', function(e) {
{{this.layer.get_name()}}.setStyle(function(feature){
return feature.properties.style
})
{% if this.options %}
e.layer.setStyle({{ this.options|tojson }});
{% endif %}
if(e.layer._popup)
e.layer.openPopup();
})

I think the code should open popup if location is found but it did not.

I manually added console.log(e.layer._popup) in front of if(e.layer._popup) in the html file. When I searched one state on the web page, the console outputs "undefined" for e.layer._popup. It's confusing to me.

Expected Output

I expect to open the popup automatically when a search is found like this leaflet search example https://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html.

Output of folium.__version__

0+unknown

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with plugins/search.py and the plugin-Search.ipynb example, then run the provided GeoPandas and Folium reproduction in a browser. Inspect the search:locationfound handler and the reported e.layer._popup value; done means a searched GeoJSON state opens its popup automatically as in the expected Leaflet example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, python
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.