meshviewer icon indicating copy to clipboard operation
meshviewer copied to clipboard

Better embedding support

Open micw opened this issue 2 years ago • 4 comments

Is your feature request related to a problem? Please describe.

Currently, when embedding the map in an iframe, deep linking is problematic. The Demo at https://regensburg.freifunk.net/netz/karte/ has a partial solution which could easily improved. Meshviewer handles deep links via URL anchors (like #!/de/map/a42bb0c909aa). The Demo hosts meshviewer on the same domain as the embedding page and polls the iframe for URL changes. This allows to change the main page URL when the embedded URL is changed. This will not work, if meshviewer runs on a separate domain. Also there's no handling for deep links, so an URL like https://regensburg.freifunk.net/netz/karte/node/14cc2097d7d6/ will always show the full map with no node selected.

Describe the solution you'd like

Modify mapviewer to advertise url anchor changes via window.postMessage (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). This allows to cunsume these events on the embedding window without polling and works also on cross-domain setups.

Provide a javascript as part of meshviewer that handles and embedded meshviewer:

  • looks for an iframe with a certain ID that contains the meshviewer
  • on window load or anchor changes, modifies the anchor of the iframe URL
  • subscribed to postMessage events on the iframe and changes the window anchor

With this, embedding a meshviewer with working deep-linking would be as easy as

<iframe id="meshviewer-embedded" src="https://meshviewer.freifunk-sonstwo.org/"/>
<script src="https://meshviewer.freifunk-sonstwo.org/embed.js"/>

micw avatar Nov 02 '21 10:11 micw