In order to provide more control when embedding your interactive map especially in a mobile App, we implemented some useful events that can be triggered on the embedded iframe through the Window.postMessage interface.
In the examples, iframeElement references the embedded iframe element.
Select location
Options
| id | Id of the location |
|---|---|
| messageId | 'mapme.section.select' |
| showDetails | true or false indicating if the section details should be shown (optional, defaults to false; ignored if story uses categories since details are always shown in that case) |
Example
iframeElement.contentWindow.postMessage(
{
id: 'fa368d7a-b264-42e8-bfcb-b0597e31d252',
messageId: 'mapme.section.select',
showDetails: true,
},
'*'
)
Select location’s media gallery item
Options
| index | Index of the media gallery item |
|---|---|
| messageId | 'mapme.section.mediaGallery.select' |
| sectionId | Id of the location |
Example
iframeElement.contentWindow.postMessage(
{
index: '<itemIndex>',
messageId: 'mapme.section.mediaGallery.select',
sectionId: '<sectionId>',
},
'*'
)
Toggle content panel (overview, cards)
Options
| messageId | 'mapme.infoPanel.open' or 'mapme.infoPanel.close' |
|---|
Example
iframeElement.contentWindow.postMessage({ messageId: 'mapme.infoPanel.open' }, '*')
iframeElement.contentWindow.postMessage({ messageId: 'mapme.infoPanel.close' }, '*')