GeoJsonPopup doesn't work (v 0.11.0) - TypeError: e.target.getBounds is not a function

[zoesn89]

Hey guys,

I try to use the GeoJsonPopup module to display names etc. When I run the code, no error is displayed in the shell, but when I open the html file and click on a marker, no popup show up and in the console there is following error:

Uncaught TypeError: e.target.getBounds is not a function
    at i.click (geojson_test.html:85)
    at i.fire (leaflet.js:5)
    at i._fireDOMEvent (leaflet.js:5)
    at i._handleDOMEvent (leaflet.js:5)
    at HTMLDivElement.s (leaflet.js:5)

here is a snippet of my code:

import folium
import pandas
import geopandas

tileset= "https://api.mapbox.com/styles/v1/f---/cj53iitnb0cxr2rp96gsee7dx/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZjJkYXoiLCJhIjoiY2o1M2hrczV0MDc1bDJ2bjBiYWdha2c0diJ9.uEHH_ty------"
m = folium.Map(location=[50.032,10.519], zoom_start=14, tiles=tileset, attr="Mapbox")

data = geopandas.read_file('stationen.json', driver='GeoJSON')

stationen = folium.GeoJson(
    data,
    name='Stationen',
    popup = folium.GeoJsonPopup(
        fields=['shortname', 'voltage_level'],
        aliases=['Name', 'Spannungsebene'],
    )
).add_to(m)

m.save("geojson_test.html")

Environment

• Browser: chrome
• html file
• folium version 0.11.0

Thanks in advance ;)

[Conengmo]

Can you share the geojson file you're using?

[zoesn89]

sure, here is a snippet:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          19.52986638,
          51.03202107
        ]
      },
      "properties": {
        "longtitude": "51.03202107",
        "latitude": "19.52986638",
        "name": "Uebergabe_MSP",
        "shortname": "Uebergabe",
        "type": "Station",
        "voltage_level": "Mittelspannung",
        "area": "XYZ"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          11.55288526,
          51.01683743
        ]
      },
      "properties": {
        "longtitude": "51.01683743",
        "latitude": "11.55288526",
        "name": "STA-AUG01-MSP",
        "shortname": "AUG01",
        "type": "Station",
        "voltage_level": "Mittelspannung",
        "area": "ZYX"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          11.41994137,
          51.04876198
        ]
      },
      "properties": {
        "longtitude": "51.04876198",
        "latitude": "11.41994137",
        "name": "STA-BUC01-MSP",
        "shortname": "BUC01",
        "type": "Station",
        "voltage_level": "Mittelspannung",
        "area": "YXZ"
      }
    },
...
  ]
}

I manipulated the names and coordinates a little bit :)

[jtbaker]

Hi @zoesn89, I looked into your issue and it seems like it is actually stemming from these lines in the GeoJson template, separate from the GeoJsonPopup class:

folium/folium/features.py

Lines 412 to 414 in c8707b1

	click: function(e) {
	{{ this.parent_map.get_name() }}.fitBounds(e.target.getBounds());
	}

The Leaflet .getBounds() method that folium uses for registering other click events doesn't exist on point geometries, it looks like.

The GeoJson class generally doesn't have first class for point geometries at this time. If you'd like, you can go into the generated html and comment out the line calling e.target.getBounds() which is causing the error and cascading. Alternatively, you can loop through the point geometries that you have in your features in python, and add them as separate Markers with their own individual Popups.

I started work on a GeoJsonMarker class in #957 a while ago to try to better support custom point geometries in the GeoJson class, but never got around to fully fleshing it out. It's a little complex because there are many different marker types with different implementations as some use SVG, some use Font-Awesome icons etc. Trying to develop clean abstractions for all of these cases from the python side is a little challenging. @Conengmo do you think it would be worth trying to pick back up?

[zoesn89]

Hey @jtbaker,
thanks for your answer. I think other users would appreciate this as well, because GeoJson have better options for tooltips and supports the search plugin etc.

I chose GeoJson, because I couldn't figure out how to use the search plugin with FeatureGroup or MarkerCluster instead. Maybe you have a hint for me? ;)

[Conengmo]

Thanks for looking into this Jason! Two other related things that may provide ideas:

• In GeoJson make zoom on click optional #1162 there is a proposal to make that zoom on click functionality that uses getBounds() optional.
• In Zoom to Overlay Selection #1317 we check if getBounds() is defined on an object before calling it.

I'd have to look a bit more at that GeoJsonMarker thing to comment on how useful it is to spend time on that. I can say that if possible I'd rather separate it from fixing this particular issue.

[Conengmo]

@jtbaker I made a small fix, do you maybe want to check it out? #1349