Embedding a SaunaAtlas map

One iframe puts a SaunaAtlas map on your own page, narrowed to a saved filter or to a sauna list — every destination it holds, including the ones added later.

Paste what you copied from the app — the preview and the code below both follow it. A share link (www.saunaatlas.com/4d7hXp9dn5IZVtS1wWqDaU) is decoded for you. An address says by itself whether it is a filter or a list; a share link or a bare id uses the choice on the left.

The code

<div style="height: 500px">
  <iframe
    src="https://app.saunaatlas.com/filter/<filter id>"
    title="Saunas on the SaunaAtlas map"
    style="width: 100%; height: 100%; border: 0"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allow="geolocation; fullscreen"
  ></iframe>
</div>

Give the iframe’s container a real height: the map fills whatever space it is given, so a container with no height renders nothing.

Getting the address

Open the SaunaAtlas map, build the filter you want in the Filters dialog, then switch on Shareable link in the filter editor and copy the address it shows. That address is what goes in src. A filter without that switch is private, and its address shows the whole map instead.

For a filter somebody else published — or one you did not open the editor for — use the share button on its row in the Filters dialog and pick Copy filter id. Paste that id in the field above, or into https://app.saunaatlas.com/filter/<filter id> yourself.

A sauna list works the same way: its address is https://app.saunaatlas.com/list/<list id>, which is what the list’s own page is at — open the list in the app and the address bar shows it.

The short links the app’s Share menus copy work in the field above as well: https://www.saunaatlas.com/4d7hXp9dn5IZVtS1wWqDaU is the same id written in base 62, and the field decodes it. Such a link does not say whether it points at a filter, a list or a single destination, so the choice on the left is what settles it — except for the long form a destination shared from inside a list produces, where the list is the embeddable half and is taken automatically.

Options

What	How
Starting view	The map opens fitted to the destinations the filter selects. To pin one area instead, add a centre and optionally a zoom level: `?lat=60.1699&lon=24.9384&zoom=11`
Colour theme	The map is light unless the address asks otherwise: `?theme=dark` gives the dark basemap and dark chrome, `?theme=light` spells out the default. Add it to the address alongside anything else — `/filter/<filter id>?theme=dark`. Inside an iframe there is no way for a visitor to switch it, so this is what makes an embedded map match a dark page.
Clustering	The map groups saunas into numbered circles only once it shows more destinations than the filter’s Cluster above setting, and draws individual pins below that. Set on the filter, not here.
Size	Anything. The map has no fixed breakpoints of its own — give the container the width and height the page needs.

What the embedded map does

Inside an iframe the map carries almost none of its own chrome: no menu, no search, no account, no discovery panel, and no way to clear the filter. Zoom in, zoom out and one link out are the only buttons — that last one opens the same filter or list on saunaatlas.com in a new tab, out of the frame. On a touch phone there are no zoom buttons at all; pinch and drag do it there. Clicking a sauna opens its details, and a button takes the visitor to directions.

An embedded sauna list shows an info panel as well, and what that panel holds is chosen per list under Embedded settings in the sauna list editor.