features.GeoJson Tooltip

[jtbaker]

Noticing in the latest documentation that there is now a tooltip option in the folium.features.GeoJson class.

Right now it looks like it only takes raw strings - would it be possible to borrow some syntax from style_function and highlight_function in this class to a function call back to the GeoJson via a tooltip = lambda feature: feature['properties'][value] structure, or to possibly wrap this into the highlight_function mouseover event dictionary to assist in the user's exploration of the data (similar to this D3 visual). A popup in this vein would be really functional as well, particularly when paired with some of the Vega/Vega-Lite offerings.

I'm new to JS, but going through the leaflet tutorials right now. I've never made a PR before, but really enjoy this library and would love to contribute if someone could steer me in the right direction to start.

Thank you!

[Conengmo]

Hi Jason, that sounds good! I think it's a nice idea to have different tooltips for each feature, instead of one text for the entire thing. And to also have the option to use popups per feature.

The Leaflet documentation on GeoJson objects already contains an example that enables popups with a differing text per feature. It seems the same way also works for tooltips. That way you won't have to deal with the mouseover events. But in general, if you know how to do it in Leaflet, we can add it to folium.

For the Python part it seems smart to take the same approach as how style_function and highlight_function are implemented. That is, the needed values are added to the geojson data so they are available in the javascript functions.

I'm not sure what would be the best way to also enable more complicated popups, such as vega. Of course you can put in raw html, but it would be nice if we can come up with a way to enable the use of folium Popup and Vega objects.

Again, great that you want to contribute. Hope this helps a bit to start with. Just open a PR with your first ideas and we'll discuss.

[Conengmo]

Hmm I may have been a bit too quick. Work has already been done on this in PR #376, which hasn't been merged but was closed instead. There is a lot of discussion there. Then there's an open PR #762 which adds the use of GeoJSON css.

It seems that tooltips haven't been covered yet, so this could be something you can add. But it would be good if @ocefpaf weighs in on this. I think he was also planning on working on geojson css in the coming days.

[jtbaker]

Hey Frank,

After doing a little research on what Leaflet is doing under the hood and learning some JS, I came up with the following to replace the tooltip argument on the main GeoJson object:

{% if this.tooltip %}
        .bindTooltip(function(layer)
    {
     var tip = {{this.tooltip}};
     return String(Object.keys(tip).map(columnname=>`<strong>${tip[columnname]}</strong>: ${layer.feature.properties[columnname].toString()}`).join('<br>'))
    },
        {sticky:true})
{% endif %}

It takes a dictionary of values, the key being the GeoDataFrame column name or GeoJson property you wish to represent (dtype is converted to string) and value of the key in the dictionary is a custom 'clean' alias string describing the data you're displaying - it will show in bold to the left the value. The items in the array that is produced with the Object.keys method are joined together into a String with a <br> HTML tag to keep things thematically organized. In the tooltip, they will display in the form:

alias: layer.feature.properties[key]
alias: layer.feature.properties[key]

Let me know what you think; it has some limitations but is an improvement over the same string for every record IMO. I started trying to do some type case handling to be able to pass in a simple list of column names without remapping the keys to an alias, and also passing the same String to every object, but my console was giving me some errors when trying to render it - something about the first node argument not supporting asynchronicity. I was writing those cases in the JS string though, and perhaps they should have been handled in the Jinja2 tags.

Check this notebook for reference of implementation.

Thanks,

Jason

[jtbaker]

@BibMartin just committed with my changes after refining them a little further (added a sticky option which defaults to True) and updating the docstring. Let me know when you get a chance to check them out and any improvements you'd suggest. Thanks!

[ocefpaf]

@jtbaker let's move this discussion to your PR. Your ideas looks good to me but I also need to finish the GeoJsonCss and see how this fit (or not) there.

[jtbaker]

This is now referenced in PR #883. Added new Tooltip Class object to enable for flexible data handling across different data structures. I'm not super familiar with the Topojson standard and how folium/Leaflet works with it but the specs in that folium class look pretty similar to GeoJson so I think this could be handled in that Jinja2 template as well.

[Conengmo]

Tooltips for GeoJson have been added in #883 so I'm closing this issue.