Static viewer embedding demonstration

Embedding using <object>

By adding

<object data="https://osm.quelltextlich.at/viewer-static.html?width=512&amp;height=256" width="512" height="256"></object>

to the <body> of your HTML file, you get the following embedded map

It is crucial to set at least the width, and height URL parameters, as they otherwise fall back to their default values that are meaningful only for fullscreen viewing.

As OpenStreetMap only serves 256x256 pixel tiles, it is recommended to set both width, and height to multiples of 256. Otherwise, the nearest smaller multiple of 256 is used.

In addition to the setting of the URL parameters width, and height it is suggested to also set the <object>'s width, and height attributes. Either by specifying them directly within the element (as in the above example), or alternatively—if CSS may be used—via CSS.

Embedding using <iframe>

When using a document type that allows <iframe>s, you can also embed the static viewer using <iframe>s. For example by adding

<iframe src="https://osm.quelltextlich.at/viewer-static.html?width=512&amp;height=256" width="512" height="256"></iframe>

in the <body> part of your HTML file.

Notice that—in contrast to the above <object> example—the URL is now given in the src attribute.

Refer to the „Embedding using <object>” part for further explanations and hints.

Showing a given place

To embed a map that shows a given place, you can use the lat, and lon URL Parameters. For example, by adding

<object data="https://osm.quelltextlich.at/viewer-static.html?width=512&amp;height=256&amp;lat=51.50939&amp;lon=-0.11832&amp;zoom=6" width="512" height="256"></object>

to the <body> part of your HTML file, you get the following map

The parameter lat specifies the latitude, while lon gives the longitude. The additional parameter zoom sets the zoom level.

Embeddings with markers

To add a marker to a map, you can use the mlat, and mlon parameters. For example

<object data="https://osm.quelltextlich.at/viewer-static.html?width=512&amp;height=256&amp;mlat=-23.51866&amp;mlon=-46.71661&amp;zoom=6" width="512" height="256"></object>

yields the following map,where a marker in São Paulo has been added.

Further configuration

Further URL parameters that can be used when embedding the static viewer can be found on the overview page of the URL parameters.