Comments (4)
Indeed, the leafmap pmtiles functionality originates from the folium-pmtiles pakcage. Here is an example using folium-pmtiles without leafmap. If you can make it work with folium-pmtiles, I can probably integrate it into leafmap. I don't know JavaScript well enough to fix these styling and tooltip issues on my own.
import folium
from folium_pmtiles.vector import PMTilesMapLibreLayer, PMTilesMapLibreTooltip
m = folium.Map(location=[43.7798, 11.24148], zoom_start=13, tiles="cartodb positron")
tooltip = PMTilesMapLibreTooltip()
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"},
},
],
},
tooltip=tooltip,
overlay=True,
)
m.add_child(pmtiles_layer)
folium.LayerControl().add_to(m)
m
from leafmap.
A bit out of my depth, but I see that some renders, like maplibre, seem to support a style
syntax that permits mapping aesthetics like color to a feature property value instead of a literal color using this special get
syntax:
'paint': {
'line-width': 3,
// Use a get expression (https://maplibre.org/maplibre-style-spec/expressions/#get)
// to set the line-color to a feature property value.
'line-color': ['get', 'color']
}
from: https://maplibre.org/maplibre-gl-js/docs/examples/data-driven-lines/. I see that the folium pmtiles driver includes an example that seems to support maplibre, https://github.com/jtmiclat/folium-pmtiles/blob/master/example/pmtiles_vector_maplibre.ipynb, haven't managed to test this syntax in leafmap yet but it may already do what I'm looking for if it's supported!
from leafmap.
ok, looks like the maplibre syntax for ['get', 'color']
in fact already works with leafmap as is:
url = "https://minio.carlboettiger.info/shared-data/pad/public.pmtiles"
style = {
"version": 8,
"sources": {
"public": {
"type": "vector",
"url": "pmtiles://" + url,
"attribution": "US PAD v3"}},
"layers": [{
"id": "public",
"source": "public",
"source-layer": "public",
"type": "fill",
"paint": {"fill-color": ["get", "color"],
"fill-opacity": 0.5}}]}
m = leafmap.Map(center=[35, -100], zoom=4)
m.add_basemap("Esri.WorldGrayCanvas")
m.add_pmtiles(url, name="Public", style=style, overlay=True, show=True, zoom_to_layer=False)
m
This is quite nice. This does require that we have literal colors in a column, but I guess that's a feature request I should make to maplibre.
I'm still stuck on being able to toggle layers off and on individually (e.g. the example you show above has a 'roads' layer and 'buildings' layer, but the corresponding Layer Control menu shows only a single PMTilesVector
layer -- you can't display roads without buildings, say. I probably need to report that to Folium-pmtiles though? I think solving that upstream would also resolve the tooltip.
I don't see any remaining issues at the leafmap level, so I'll close this and try to request these features upstream.
from leafmap.
okay wow, digging a little deeper into the maplibre docs I realize these abstractions are indeed already possible. I had no idea how powerful the syntax options were in that paint block. In addition to get
, we have all kinds of operators for doing color mapping to variables! Check out this example
'paint': {
'fill-color': [
'let',
'density',
['/', ['get', 'population'], ['get', 'sq-km']],
[
'interpolate',
['linear'],
['zoom'],
8,
[
'interpolate',
['linear'],
['var', 'density'],
274,
['to-color', '#edf8e9'],
1551,
['to-color', '#006d2c']
],
10,
[
'interpolate',
['linear'],
['var', 'density'],
274,
['to-color', '#eff3ff'],
1551,
['to-color', '#08519c']
I'll try to work out some useful but simple examples.
from leafmap.
Related Issues (20)
- Support add_stac_layer for leafmap.deckgl backend HOT 2
- add_raster() results in TypeError: 'dict' object is not callable HOT 6
- Pinning dependencies? HOT 1
- Cannot get pixel values with inspector tool (notebook 89) HOT 2
- Italian Cadastre WMS in leafmap HOT 3
- NDVI colortable range from [-1, 1] and usage HOT 3
- ModuleNotFoundError HOT 2
- Problem rendering with leafmap.Map() + lonboard HOT 12
- Doesn't work in Kaggle notebooks HOT 3
- Satellite Imagery not working! HOT 1
- Incorrect data labels with `.add_data()`? HOT 2
- Interactive filtering within a layer (or more generally, greater maplibre support?) HOT 2
- Add support for maplibre
- PMTiles file cannot be loaded when URL has URI parameters. HOT 3
- Custom STAC bug HOT 1
- streamlit bidirectional works with some layers but not others HOT 4
- pmtiles layer clashes with some drawing tools HOT 1
- Styles are not working with streamlit HOT 1
- Deploying Leafmap Streamlit App on HuggingFace Space (using localtileserver) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leafmap.