Skip to main content

Integration

The Map Webview integration is quite straightforward. You just need to add an iframe to your app or use the standalone mode.

Iframe​

When using the Map in an iframe, you need to pass some additional parameters to the iframe url. Depending on the message protocol you want to use, you will need to pass different parameters.

With PostMessage​

If using browser window.postMessage, you just have the minimal parameters to pass:

  • author: the name that will be used to identify this map messages received by your app (no space)

here is an example of an iframe tag:

<iframe
  id="webview"
  src="http://localhost:5174?author=MyMap"
  width="100%"
  height="500"
  scrolling="no"
></iframe>

With Websocket​

If using websocket, you need to pass the following parameters:

  • author: the name that will be used to identify this map messages received by your app (no space)
  • websocketRecipients: the list of recipients (Apps authors) that will receive the messages sent by this map separated by a comma.
  • websocketServerUrl: the url of the websocket server to use.
<iframe
  id="webview"
  src="http://localhost:5174?author=MyMap&websocketRecipients=AppA,AppB&websocketServerUrl=ws://localhost:5173"
  width="100%"
  height="500"
  scrolling="no"
></iframe>

Standalone​

You can also use the Map in standalone mode, without an iframe. In this case you can only use the websocket protocol.

Hence, you need to pass the following parameters:

  • author: the name that will be used to identify this map messages received by your app (no space)
  • websocketRecipients: the list of recipients (Apps authors) that will receive the messages sent by this map separated by a comma.
  • websocketServerUrl: the url of the websocket server to use.

Here is an example of a standalone map url:

http://localhost:5174?author=MyMap&websocketRecipients=AppA,AppB&websocketServerUrl=ws://localhost:5173