Static OSM Maps

For a website I am currently building I need static maps with a circle as marker. Most of this is already solved by Simon Willison with his shot-scraper tool and his full-screen leaflet site that is easy to screenshot.

For example using shot-scaper to get a shot of a location (without any markings):

# install shotscraper
pip install shot-scraper
# install browser to be used headless from shot-scraper
playwright install

# get a shot of a map in zoom level 18 with a square size
shot-scraper 'https://map.simonwillison.net/?center=48.74313004610327%2C9.076198339462282&zoom=16' \
  --width 500 --height 500 --wait 3000

The result looks like this:

But I want a colored circle at the center of the map to highlight the element there. I tried the markers that are already implemented by Simon, but they disturb the actual object too much. To fix this I forked the repo and added a radius option. When the radius is set a circle with light background is added to the map. No option to select the color or the background. But the code is easy enough to change.

Now we use this fork on localhost and take a screenshot:

git clone https://github.com/mfa/url-map
cd url-map
# run a webserver on port 8000 serving the index.html in the repo
python -m http.server

# get a shot of the local site -- needs requirements from before!
shot-scraper 'http://localhost:8000/?center=48.75685363373798%2C9.09496307373047&zoom=15&radius=150' \
  --width 500 --height 500 --wait 3000