Javascript viewer embedding demonstration

Embedding using <object>

By adding

<object data="https://osm.quelltextlich.at/viewer-js_en.html" width="400" height="200"></object>

(In order to allow the embedded map to automatically determine its language, replace "_en.html" in the URL by ".html".) to the <body> of your HTML file, you get the following embedded map

It is recommended to 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-js_en.html" width="512" height="256"></iframe>

(In order to allow the embedded map to automatically determine its language, replace "_en.html" in the URL by ".html".) 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-js_en.html?lat=51.50939&amp;lon=-0.11832&amp;zoom=6" width="512" height="256"></object>

(In order to allow the embedded map to automatically determine its language, replace "_en.html" in the URL by ".html".) 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 showing 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-js_en.html?mlat=-23.51866&amp;mlon=-46.71661&amp;zoom=6" width="512" height="256"></object>

(In order to allow the embedded map to automatically determine its language, replace "_en.html" in the URL by ".html".) yields the following map, where a marker in São Paulo has been added.

Embeddings showing KML files

To add a layer showing a kml file to a map, the URL parameter kml_url can be used. For example

<object data="https://osm.quelltextlich.at/viewer-js_en.html?kml_url=https%3A%2F%2Fosm.quelltextlich.at%2Fdemo%2Fdemo.kml" width="550" height="300"></object>

(In order to allow the embedded map to automatically determine its language, replace "_en.html" in the URL by ".html".) yields the following map

where the kml file at https://osm.quelltextlich.at/demo/demo.kml got added.

Be careful to correctly escape the URL. You can use the „Viewer with KML file” wizard for this task.

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.