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

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 2

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'

Answer 3

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 4

In my case I use folium plugin "Draw" for set markers and framework PyQt5. Everything work fine.

from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets
from folium.plugins import Draw
import folium, io, sys, json

if __name__ == '__main__': 
    app = QtWidgets.QApplication(sys.argv)

    m = folium.Map(location=[55.8527, 37.5689], zoom_start=13)

    draw = Draw(
       draw_options={
          'polyline':False,
          'rectangle':True,
          'polygon':True,
          'circle':False,
          'marker':True,
          'circlemarker':False},
       edit_options={'edit':False})
    m.add_child(draw)

    data = io.BytesIO()
    m.save(data, close_file=False)

        

    class WebEnginePage(QtWebEngineWidgets.QWebEnginePage):
       def javaScriptConsoleMessage(self, level, msg, line, sourceID):
          coords_dict = json.loads(msg)
          coords = coords_dict['geometry']['coordinates'][0]
          print(coords)

  view = QtWebEngineWidgets.QWebEngineView()
  page = WebEnginePage(view)
  view.setPage(page)
  view.setHtml(data.getvalue().decode())
  view.show()
  sys.exit(app.exec_())