Visualize PMTiles using folium and ipyleaflet

[giswqs]

Is it possible to visualize PMTiles using folium or ipyleaflet? I saw the JavaScript example for visualizing PMTiles. It would be great to have some Python examples.

[bdon]

My understanding is that Folium and ipyleaflet both execute JavaScript in a browser environment (Leaflet), so the existing javascript client integration for Leaflet should work by writing a plugin:

Folium plugins
ipyleaflet does not seem to have runtime extensibility but it would by similar to https://ipyleaflet.readthedocs.io/en/latest/layers/vector_tile.html

I don't think a python implementation is necessary beyond glue to call existing javascript libraries.

[giswqs]

ipyleaflet can visualize vector tiles in mvt format, so it seems we need to serve PMTiles as mvt so that it can be used by ipyleaflet.

pmtiles serve .
# serves at http://localhost:8077/FILENAME/{z}/{x}/{y}.mvt

[bdon]

What is the advantage of running that server process over simply consuming ranges of the file in JavaScript?

[giswqs]

I do not want to run that server process. My goal is to visualize PMTiles using Python packages such as folium or ipyleaflet. I can't find an easy solution for this without developing plugins or run that server process.

[tim-salabim]

For what it's worth, I think we have the same "issue" when trying to visualise local files in R using leaflet. We need to initialise a local sever to serve tiles. I have just accepted that fact, but would be interested to see if there are other ways.

[giswqs]

I think we need something similar to TiTiler for visualizing COG/STAC. Ideally, we want to have a serverless application (like titiler.xyz) that can serve tiles to be consumed by python/R packages such as ipyleaflet and Leaflet for R.

• https://developmentseed.org/titiler/examples/notebooks/Working_with_CloudOptimizedGeoTIFF_simple/
• https://titiler.xyz/
• https://serverlessrepo.aws.amazon.com/applications/us-east-1/552819999234/TiTiler

[bdon]

I think there are 2 main options:

• The JavaScript map renderer plugin needs to be enhanced to load the appropriate leaflet plugin.
• as @tim-salabim said, add functionality to the (Jupyter?) python local server similar to TiTiler that will proxy a local or remote python PMTiles and expose a Z/X/Y endpoint. This means the JavaScript front-end code does not need to change, it will point at a local HTTP endpoint.

I'm not intimately familiar with the many moving parts here, so don't have guidance beyond this right now.

[jtmiclat]

Wanted to share that I created a folium plugin for pmtiles a while back that might be useful.

https://github.com/jtmiclat/folium-pmtiles

I did find it a bit challenging styling pmtiles without using maplibre as that would involve a lot of javascript code

Here is a simple demo on it working https://github.dev/jtmiclat/folium-pmtiles/blob/master/example/pmtiles_vector_maplibre.ipynb

[giswqs]

@jtmiclat Thank you for sharing the plugin. That's what I was looking for. I am interested in overlaying PMTiles on other data layers. How to turn off the gray background of the PMTiles layer?

jtmiclat/folium-pmtiles#5

import folium
from folium_pmtiles.vector import PMTilesVectorBaseMap

m = folium.Map(location=[43.7798, 11.24148], zoom_start=12)
pmtiles_layer = PMTilesVectorBaseMap(
    "https://pmtiles.jtmiclat.me/protomaps(vector)ODbL_firenze.pmtiles",
    "PMtiles",
    options={
        "attribution": """<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'"""
    },
    overlay=True,
)
m.add_child(pmtiles_layer)
folium.LayerControl().add_to(m)
m

[jtmiclat]

I dont recommend using the PMTilesVectorBaseMap as i havent figured out a convenient way to style the layer using protomaps. I suggest using PMTilesMapLibreLayer as it is easier to style using mapbox style specification.

import folium

from folium_pmtiles.vector import PMTilesMapLibreLayer

m = folium.Map(location=[43.7798, 11.24148], zoom_start=13, tiles="cartodb positron")
pmtiles_url = "https://pmtiles.jtmiclat.me/protomaps(vector)ODbL_firenze.pmtiles"
pmtiles_layer = PMTilesMapLibreLayer(
    "folium_layer_name",
    style={
        "version": 8,
        "sources": {
            "example_source": {
                "type": "vector",
                "url": "pmtiles://" + pmtiles_url,
                "attribution": '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
            }
        },
        "layers": [
            {
                "id": "buildings",
                "source": "example_source",
                "source-layer": "landuse",
                "type": "fill",
                "paint": {"fill-color": "steelblue"},
            },
            {
                "id": "roads",
                "source": "example_source",
                "source-layer": "roads",
                "type": "line",
                "paint": {"line-color": "black"},
            },
        ],
    },
)
m.add_child(pmtiles_layer)

[giswqs]

Nice! Thank you for your great work!

[giswqs]

Is it possible to render PMTiles stored locally? I use python -m http.server to start the http server, but it seems PMTiles can't be rendered.

import folium
from folium_pmtiles.vector import PMTilesVectorBaseMap

m = folium.Map(location=[43.7798, 11.24148], zoom_start=12)
pmtiles_layer = PMTilesVectorBaseMap(
    "http://localhost:8000/protomaps%28vector%29ODbL_firenze.pmtiles",
    "PMtiles",
    options={
        "attribution": """<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>'"""
    },
    overlay=True,
)
m.add_child(pmtiles_layer)
folium.LayerControl().add_to(m)
m

[giswqs]

You are right, http.server does not support range requests. I found a package called RangeHTTPServer that supports range requests. It does not throw errors any more, but the PMTiles still does not show up on the map.

[bdon]

that looks like the server is behaving correctly, what about the network tab in your browser?

[giswqs]

[jtmiclat]

This seems to be a CORS issue which both SimplerServer and RangedHTTPServer does not support out of the box.

If you have npm/npx installed you can try

npx http-server . --cors

[giswqs]

@jtmiclat npx http-server . --cors did the trick! Thank you very much.