Object

<tc:object src="https://www.openstreetmap.org/..."/>

It's very usual to include content from external source. When Content Security Policy is activated, you need to allow the external source explicitly, for security reasons. You need to add a child-src policy to the 'tobago-config.xml' like <directive name="child-src">https://www.openstreetmap.org</directive>

A <tc:object/> tag can contain a style tag. In this case it's <tc:style width="100%"/> to let grow the width to the full size of the container.

There are two <tc:button/> within a <tc:buttons/> in this example. The first show the island Tobago, the second show the worldmap in <tc:object id="map">. The buttons send the parameter (maps-position, maps-zoom, maps-target) to an object.js, which is shown in the objects.js-box. The JavaScript build the URL for the iframe.

<tc:button label="Show Tobago" omit="true"> <tc:dataAttribute name="maps-position" value="11.249123,-60.687103"/> <tc:dataAttribute name="maps-zoom" value="12"/> <tc:dataAttribute name="maps-target" value="page:map"/> </tc:button>

object.js

show hide

class MapDemo {
static init() {
document.querySelectorAll("[data-maps-target]").forEach((element) => element.addEventListener("click",
function (event) {
const button = event.currentTarget;
const targetId = button.dataset.mapsTarget;
const position = JSON.parse(button.dataset.mapsPosition);
const zoom = JSON.parse(button.dataset.mapsZoom);
const url = 'https://www.openstreetmap.org/export/embed.html?bbox='
+ (position.x - zoom) + ','
+ (position.y - zoom) + ','
+ (position.x + zoom) + ','
+ (position.y + zoom);
document.getElementById(targetId).setAttribute("src", url);
event.preventDefault();
}));
}
}
document.addEventListener("DOMContentLoaded", MapDemo.init);
// todo: ajax
Listener.register(MapDemo.init, Phase.DOCUMENT_READY);
Listener.register(MapDemo.init, Phase.AFTER_UPDATE);

Show Tobago Show World