jupyter-widgets / ipyleaflet

A Jupyter - Leaflet.js bridge
https://ipyleaflet.readthedocs.io
MIT License
1.47k stars 359 forks source link

Improve vector tile layer #1206

Closed lopezvoliver closed 3 weeks ago

lopezvoliver commented 4 weeks ago

This PR aims to add the ability to use dynamic styling to VectorTileLayer. That is, styling may be defined as a function of properties and zoom. This is possible with Leaflet.VectorGrid, but is not yet implemented in ipyleaflet, because there is currently no way to define python callbacks that can be used by the leaflet map.

One compromise is to allow the user to define the javascript code for the dynamic style as a string.

Following the example from the documentation, here's a simple dynamic style that the user could define for use with ipyleaflet.VectorTileLayer:

jstyle='''{
    water:{opacity:0},
    places:{opacity:0},
    transit:{opacity:0},
    pois:{opacity:0},
    boundaries:{opacity:0},
    roads:{opacity:0},
    earth:{opacity:0},
    landuse: function(properties, zoom){
        var color = "gray";
        var fill = true;

        if(properties.kind=="forest"){
            color="green";
        }

        if(zoom<10){
            color="purple";
        }

        return {
            color: color,
            fill: fill
        }

    }
}
'''

it should only show landuse in purple for zoom levels less than 10, and otherwise show features as gray, except if they are "forest".

Here's an animation of the behavior achieved by this PR:

ipyleaflet_new

Here's another example using my own vector tile layer:

ipyleaflet_new_pivots

Related issue: #744

martinRenou commented 4 weeks ago

Thanks for your PR!

Concerning the CI build failure, you should be able to fix it by running yarn run lint from the python/jupyter_leaflet directory

lopezvoliver commented 4 weeks ago

@martinRenou thanks, that worked for the "run" tests. What about the UI / Visual regression test? is there something I can do?