https://github.com/do-me/protomaps-example
Simple Leaflet example for Protomaps with custom bbox
https://github.com/do-me/protomaps-example
leaflet pmtiles protomaps vectortiles
Last synced: 2 months ago
JSON representation
Simple Leaflet example for Protomaps with custom bbox
- Host: GitHub
- URL: https://github.com/do-me/protomaps-example
- Owner: do-me
- License: mit
- Created: 2024-09-05T12:30:27.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-09-06T13:47:03.000Z (8 months ago)
- Last Synced: 2025-01-16T03:43:56.048Z (4 months ago)
- Topics: leaflet, pmtiles, protomaps, vectortiles
- Language: HTML
- Homepage: https://do-me.github.io/protomaps-example/
- Size: 9.28 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Protomaps Example
Simple Leaflet example for Protomaps with custom bbox.
## Tutorial
### 1 Download a pmtiles file
Either get a world file or use a bounding box.
World:
- Download the latest non-alpha world file from https://maps.protomaps.com/builds/. As of 09/2024 it's 127Gb in size.
Area of interest:
- Search your bbox from http://bboxfinder.com/ and copy the values from bbox (not from the url as lat lon is switched!) e.g. `11.532383,48.106973,11.619759,48.162650`
- download the latest pmtiles binary from https://github.com/protomaps/go-pmtiles/releases and run the command, e.g. this for Munich: `./pmtiles extract https://build.protomaps.com/20240812.pmtiles munich.pmtiles --bbox=11.532383,48.106973,11.619759,48.162650`
### 2 Set up a minimal Leaflet web app
Download `index.html` and change the pmtiles filename if needed.
### 3 Run a simple webserver
Make sure that the index.html & your_area.pmtiles file is saved in the same directory. E.g.
- in VS Code simply run the webserver plugin for port 5500 and go to http://localhost:5500/
- using npx: `npx serve`
- using python: `python -m http.server`
You will now see a nicely rendered background map for your area of interest or the world.