Location map

Templates for places people visit show where you are. None of them use an embedded Google map: the maps are part of your page, drawn in your colors, with no cookies and no third-party request until a visitor asks for one. They come in three kinds.

Kind	Templates	How you set your place
A drawn map of your streets	Burin, Handy, Hush, Iris, Jab, Kelvin, Mint	map.config.json + npm run map
A picture of your choice + a live map on request	Chalk, Ember, Encore, Kerf, Toon	Latitude and longitude in the content editor
A whole city or trail map	Blaze, Stride, Stroll	map.config.json + npm run map (its own map command)

The map data comes from OpenStreetMap. It is free to use as long as the map credits it, which every template does (see Attribution).

The drawn map (Burin, Handy, Hush, Iris, Jab, Kelvin, Mint)

A map of the streets round your address (or, in Handy and Kelvin, the main roads, rivers and woods of the district you cover) fills the width of the page, in your theme and accent. A pin marks you, the streets draw themselves as the map scrolls into view (still with reduced motion), and a card holds your address, a line of text and directions links to Google Maps, Apple Maps and OpenStreetMap. It appears on the contact or visit page and in a home page section.

The map is made once, on your computer, by the map command: it downloads the area round your address from OpenStreetMap, simplifies it and saves it in src/data/location-map.json (a few kilobytes). The site draws it from that file, so building and visiting the site never contact OpenStreetMap.

1. Set your place

Open map.config.json in your project folder:

{
  "center": { "lat": 52.4775, "lng": -0.9205 },
  "size": { "width": 1100, "height": 700 }
}

1. center: your coordinates. In openstreetmap.org, right-click your entrance → Show address: the coordinates appear on the left. (In Google Maps, right-click the spot and click the coordinates to copy them.) The first number is lat, the second lng. The pin and the directions links use this point.
2. size: the area shown, in metres, width × height. Wide and short works best. The templates ship with a size that suits them; for one address, around 1,100 × 700 is a few streets each way.
3. detail (Burin, Handy and Kelvin): "streets" draws the streets, paths and buildings round one address (an area of a kilometre or so); "area" draws the main roads, railways, water and woods of a whole district (many kilometres). Handy and Kelvin use "area" for the area they cover: make size about four times your radius each way (24,000 × 12,000 for 5 km).

In Handy and Kelvin, the dashed ring for the area you cover is set in the content editor: Contact page → Map → Radius of the area (km), 0 to hide it.

2. Draw it

npm run map -- fetch

It downloads the area (one request to OpenStreetMap’s Overpass service), then prints Wrote src/data/location-map.json (… KB) with the number of streets, buildings and so on. The download is kept in .map-cache/ (ignored by Git), so later changes that don’t move the map are fast:

Command	When
npm run map -- fetch	After changing center, size or detail: downloads again and redraws
npm run map	The first time; downloads only if there’s no download yet, then draws
npm run map -- build	Redraws from the existing download

3. Check it and publish

1. Run npm run dev and open the contact or visit page: your streets, your pin in the middle.
2. Click the directions links: they open your place in Google Maps, Apple Maps and OpenStreetMap.
3. Commit map.config.json and src/data/location-map.json and push. No settings are needed on Vercel.

The texts (the card’s title and line, the directions label, the attribution, the label on the ring) are in the content editor: on the page with the map, and under Interface texts → Map.

The picture map with a live map (Chalk, Ember, Encore, Kerf, Toon)

These show a map picture you choose (illustrated, or a photo of your street), your address, and, once you add coordinates, a directions link (Google Maps, new tab) and a live map button that loads an OpenStreetMap map in the page only when clicked.

1. Open the content editor on the page with the map: Visit page → Map (Chalk, Ember, Toon), Info page → Map (Encore) or Contact page → Map (Kerf).
2. Set Map picture and its description, then Latitude and Longitude (from openstreetmap.org: right-click → Show address).
3. Save. The page now shows the directions link and the live map button. Without coordinates, it shows the note from Shown until coordinates are set.

There is no command to run.

City and trail maps (Blaze, Stride, Stroll)

These templates are built around their map, and each has its own map command, also run with npm run map.

• Stroll draws a city district (streets, buildings, water, green) as images in two color sets (day and dusk), plus the street network the walks are routed along. Set area in map.config.json to the south, west, north and east edges of your district in degrees (about 2–3 km wide works best). The meeting point and each sight’s position are latitude and longitude in the content editor (on each walk and sight).
• Stride works the same way for a race city (3–5 km across fits a 10K) and also downloads terrain heights for the elevation profiles. Course points and places are latitude and longitude in the content editor.
• Blaze draws a long-distance trail over the terrain. In map.config.json, trail.relation is the trail’s OpenStreetMap route relation number (find the trail on openstreetmap.org, open the route and copy its number), trail.start a point near its start, and area.relation a boundary to draw round it (or area.bbox).

Commands:

Command	What it does
npm run map	Downloads what’s missing (once), builds and renders
npm run map -- fetch	Downloads again, after changing the area or the trail
npm run map -- render	Redraws the images, e.g. after changing the colors in map.config.json (Stride, Stroll; Blaze: the relief)
npm run map -- build	Rebuilds the map data from the existing download
npm run map -- elevation	Stride: downloads the heights again
npm run map -- terrain	Blaze: downloads only the terrain again

The results go to src/data/ and public/map/; commit them. The first run can take a few minutes. The labels on the map (districts, the river) are in the content editor under The map (Stride, Stroll).

Attribution

OpenStreetMap’s licence (the Open Database License) asks that every map credits “© OpenStreetMap contributors”. Every template shows that credit on its maps. You can translate the text (under Interface texts, in the map group, or The map → Attribution in Stride and Stroll), but keep the credit. The live maps in Chalk, Ember, Encore, Kerf and Toon are OpenStreetMap’s own embed, which carries the credit itself. Stride’s elevation profiles also credit the source of the heights, and Blaze’s terrain its own sources.

Troubleshooting

What you see	Why, and what to do
OpenStreetMap could not be reached. Try again in a minute.	The Overpass service is busy (the command tries two servers). Wait a minute and run it again
The map didn’t change after editing map.config.json	Run npm run map -- fetch. Plain npm run map reuses the earlier download
The map is mostly empty, or very slow to download	size is too large or too small for the detail. Keep "streets" to about a kilometre or two
The pin is off	lat and lng are swapped, or the point isn’t your entrance
Chalk, Ember, Encore, Kerf, Toon: no directions link	Latitude and longitude are both needed