Click event on maps with Folium and information retrieval

Question

I was wondering if there is a way in Folium to get the information on an entity we click on with Folium?

I'd like the map to either open a tab with the attribute information or just send back information on the entity selected without necessarily using a popup.

Answer 1

There seems to not be support for this in Folium as yet. Quoting from the issue regarding dynamically change/update markers:

"It's import(ant) to understand that folium generates the html with Leaflet javascript. So anything that happens on the map after generation is outside of folium's scope"

See here for more detail

Answer 2

You can use GeoJsonTooltip to show selected fields from a GeoDataFrame.

usmap = folium.Map(
    location=[40,-95],
    tiles='cartodbpositron',
    zoom_start=5,
    control_scale=True
)

folium.GeoJson(
    states[['STATE_NAME', 'geometry']].to_json(),
    name='States',
    show=True,
    style_function=lambda x: {
        'fillColor': 'lightblue',
        'color': 'black',
        'weight': 1,
        'fillOpacity':0.7
    },
    highlight_function=lambda x: {
        'fillOpacity':1
    },
    tooltip=folium.features.GeoJsonTooltip(
        fields=['STATE_NAME'],
        aliases=['State name:'],
    ),
).add_to(usmap)

Answer 3

Actually I have found a great way to do it.. Folium has a feature named LatLngPopUp which creates a popup where you click on the map with its location. I've edited that popup and added a href link which allows the client to click on, and the info tells the server to create a checkpoint and transfers the coordinats to the server. there you go:

class LatLngPopup(MacroElement):
    """
    When one clicks on a Map that contains a LatLngPopup,
    a popup is shown that displays the latitude and longitude of the pointer.

    """
    _template = Template(u"""
            {% macro script(this, kwargs) %}
                var {{this.get_name()}} = L.popup();
                function latLngPop(e) {
                data = e.latlng.lat.toFixed(4) + "," + e.latlng.lng.toFixed(4);
                    {{this.get_name()}}
                        .setLatLng(e.latlng)
                        .setContent( "<br /><a href="+data+"> click </a>")
                        .openOn({{this._parent.get_name()}})
                    }
                {{this._parent.get_name()}}.on('click', latLngPop);

            {% endmacro %}
            """)  # noqa

    def __init__(self):
        super(LatLngPopup, self).__init__()
        self._name = 'LatLngPopup'