https://github.com/simonw/url-map
Use URL parameters to generate a map with markers, using Leaflet and OpenStreetMap
https://github.com/simonw/url-map
leaflet shot-scraper
Last synced: about 1 year ago
JSON representation
Use URL parameters to generate a map with markers, using Leaflet and OpenStreetMap
- Host: GitHub
- URL: https://github.com/simonw/url-map
- Owner: simonw
- Created: 2022-06-11T23:23:46.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-05T17:55:31.000Z (about 2 years ago)
- Last Synced: 2025-04-14T17:43:26.928Z (about 1 year ago)
- Topics: leaflet, shot-scraper
- Language: HTML
- Homepage: https://map.simonwillison.net
- Size: 14.6 KB
- Stars: 56
- Watchers: 4
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# url-map
Use URL parameters to generate a map with markers, using Leaflet and OpenStreetMap
Visit it here: https://map.simonwillison.net/
Read about the project's background in [A tiny web app to create images from OpenStreetMap maps](https://simonwillison.net/2022/Jun/12/url-map/)
## Parameters
To center the map on a specific location, add `?center=lat,lon`. To set the zoom, use `?zoom=8`.
- https://map.simonwillison.net/?center=51.49,0&zoom=8
As an alternative to a latitude and longitude you can use `?q=` to provide text which will be looked up against the [OpenStreetMap Nominatim API](https://nominatim.openstreetmap.org/ui/search.html). The map will then zoom to the best available bounding box for the first matching result:
- https://map.simonwillison.net/?q=san+francisco
- https://map.simonwillison.net/?q=islington+london
If you add a `&zoom=` to that the zoom you specify will be used instead of the automatic zoom calculated using the bounding box:
- https://map.simonwillison.net/?q=islington+london&zoom=12
To add markers to the map, use `?marker=lat,lon`. You can pass this multiple times:
- https://map.simonwillison.net/?center=51.49,0&zoom=8&marker=51.49,0&marker=51.3,0.2
## Using this with shot-scraper
You can use this tool to create static map images using [shot-scraper](https://shot-scraper.datasette.io/). For example:
```
shot-scraper 'https://map.simonwillison.net/?center=51.49,0&zoom=8&marker=51.49,0&marker=51.3,0.2' \
--retina --width 600 --height 400 --wait 3000
```
Produces this image:
