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>
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);