https://github.com/do-me/maplibre-thumbnails
Create png thumbnails with maplibre, pmtiles and geometries!
https://github.com/do-me/maplibre-thumbnails
basemap maplibre pmtiles thumbnail
Last synced: 5 months ago
JSON representation
Create png thumbnails with maplibre, pmtiles and geometries!
- Host: GitHub
- URL: https://github.com/do-me/maplibre-thumbnails
- Owner: do-me
- License: mit
- Created: 2025-06-24T13:46:09.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-24T15:18:02.000Z (12 months ago)
- Last Synced: 2025-06-24T15:37:22.389Z (12 months ago)
- Topics: basemap, maplibre, pmtiles, thumbnail
- Language: HTML
- Homepage: https://do-me.github.io/maplibre-thumbnails/
- Size: 9.32 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Maplibre Thumbnails
### Demo 1: https://do-me.github.io/maplibre-thumbnails/
Create png thumbnails with maplibre, pmtiles and geometries of your choice!
Maplibre renders the vector tiles on canvas, so you (via JS) or the browser can easily access them and generate a png for you. Try the live app in your browser!
Here you see 2x each: markers, lines, polygons or empty maps.
## Loading a different style
The style is currently simplified like this, so that the thumnbails render faster. For my personal use case, the thumbnails were rather decorative, so I did not need any other info:
```javascript
const style = {
version: 8,
sources: { "protomaps": { type: "vector", url: `pmtiles://${PMTILES_URL}` } },
layers: [
{ "id": "background", "type": "background", "paint": { "background-color": "#f0f2f5" } },
{ "id": "water", "source": "protomaps", "source-layer": "water", "type": "fill", "paint": { "fill-color": "#aadaff" } },
{ "id": "roads", "source": "protomaps", "source-layer": "roads", "type": "line", "paint": { "line-color": "#e0e0e0", "line-width": 1 } },
{ "id": "buildings", "source": "protomaps", "source-layer": "buildings", "type": "fill", "paint": { "fill-color": "#cccccc" } }
]
};
```
You can however very well change it to the official protomaps style.json:
### Demo 2: https://do-me.github.io/maplibre-thumbnails/load_style_from_file.html
## Limitations
This method can be used to "print" a map, e.g. for PDF reports. However, apparently something changed with protomaps sprites and glyphs recently so some small tweaks are required print everything 100% as displayed on the map.
Meanwhile, you can see this demo for printing a map with geometries "as is" using openfreemap with:
`style: 'https://tiles.openfreemap.org/styles/liberty'`
### Demo 3: https://do-me.github.io/maplibre-thumbnails/simple_print.html
This is the actual output you get when clicking the download button (on a wide screen):
