GeoJson Popup

Ok, I’ve been wanting to extend the functionality in GeoJsonTooltip to Popups for a while now with a GeoJsonPopup class. This shouldn’t be too hard at the Leaflet GeoJson .bindTooltip / .bindPopup method level - they operate at the same level.

It would be pretty easy to inherit/__init__ args from GeoJsonTooltip and copy over the GeoJsonTooltip template method and swap out the method name.

However, one functionality I’d like to add is to add a vegalite kwarg to the class and be able to pass a ‘base’ VegaLite and a ‘join key’ for both the VegaLite data source, and the GeoJson.

Right now, in the folium.map.Popup architecture, folium.features.VegaLite objects are added as ‘children’ via .add_to, and the render method on each child is invoked in the constructor, and vegaEmbed occurs in the render method of folium.features.VegaLite.

folium.features.GeoJsonPopup functionality would have to work a little differently since it’s returning a JS function instead of a string. So I think that vegalite should be added as an argument, instead of a child.

The base chart spec can be added as a variable.

A deep copy is created using JSON.parse(JSON.stringify(spec)), and its values are mutated each time the .bindPopup function is invoked using a click, passing a key from properties to filter on and building a chart spec only for the subset of features. vegaEmbed passes the mutated chart and embeds to the function scope div element:

var key1 = spec.data.name
var speccopy = JSON.parse(JSON.stringify(spec))
        geo_json_62d64f3ada804c0db5906054f1b52522.bindPopup(function(layer){
            geovar = layer.feature.properties.NAME
            vegavar = 'state'
            var d = document.createElement('div')
            speccopy.datasets[key1]=spec.datasets[key1].filter(record=>record[vegavar]==geovar)
            vegaEmbed(d, speccopy)
            return d
        },{'maxWidth':900}
        )

Source: git

Here is a rough in version what it would look like (not polished chart/map, just proof of concept).

What I’d like some feedback is some feedback on how to design such a functionality in folium working with our existing architecture and good coding practices. I’d like inherit parts from both GeoJsonTooltip and Popup but not sure the best way to go about such a task.

[jtbaker]

Hey @davidolmo! Yes, this is a serviceable workaround for the time being.

Once #1023 moves forward, however, GeoJsonPopup will have the same (and more functionality) as GeoJsonTooltip.

[jtbaker]

closing this issue - any further discussion can take place in #1023 .