Skip to main content

IFrame

Embed map​

The easiest way to start using the map is by integrating it as an IFrame. That approach gives you full isolation of the map from the main application without a visual difference to the other parts of your solution.

note

The https://pcmap-website-demo.netlify.app is a demo map. In your application, you should use links provided by the Point-Maps team.

Map.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
    />
    <title>Map</title>
    <style>
      iframe {
        width: 100vw;
        height: 100vh;
        border: 0;
      }
    </style>
  </head>
  <body>
    <iframe
      title="pcmap"
      src="https://pcmap-website-demo.netlify.app/"
      allow="geolocation https://pcmap-website-demo.netlify.app"
    />
  </body>
</html>

Offline mode​

By default, the map caching is switched off but could be enabled by request. Apart from that, the map is ready to work in offline mode without any additional change in the main application.

Interaction​

All interactions between the main app and map happen by utilizing the postMessage mechanism.

Apply scenarios​

First of all we must find our Map's iframe element on a page:

const map = document.querySelector('iframe[title="pcmap"]')

Then we can post a message to the Map's window:

map.contentWindow.postMessage(message, mapOrigin)

The mapOrigin in our case is https://pcmap-website-demo.netlify.app, but you should use your own map origin here or use the '*' if you don't mind to send a broadcast message.

There are two sets of the properties in the message, required and optional:

Required​
  • type: 'applyScenario' is common for every message
  • scenario is specific for every scenario and could be one of onePOI, categories
  • other properties depends on a scenario, see below.
Optional​
  • zoomLevel map zoom level
  • maxZoomLevel maximum map zoom level
  • animate: true enables animated map view change
  • duration: 500 animation duration
  • delay: 0 animation delay
  • easing: 'linear' animation easing function

The "One POI" scenario​

Required scenario properties​
  • poi: 'OCCUPANT_ID' the occupant identifier
map.contentWindow.postMessage({
  type: 'applyScenario',
  scenario: 'onePOI',
  poi: '592c6383-1869-4713-a1a0-9ef009d4c7fc',
  zoomLevel: 23,
}, 'https://pcmap-website-demo.netlify.app')

The "Categories" scenario​

Required scenario properties​
  • categories: ['CATEGORY_ID'] the array of category identifiers
map.contentWindow.postMessage({
  type: 'applyScenario',
  scenario: 'categories',
  categories: ['592c6383-1869-4713-a1a0-9ef009d4c7fc', '6f27008f-619d-4239-948e-17926fe6debb'],
  maxZoomLevel: 20
}, 'https://pcmap-website-demo.netlify.app')