Embed¶

The Planviewer Maps API enables the creation of viewers and the subsequent embedding of said viewers into your own website. There are three entry points: an Editor, which enables editing and uploading of features on specific layers; a Dossier editor which allows setting a dossier area outline; and the end result Viewer embed which is a read-only view into the viewer you created.

Interaction between the Editor, Dossier editor or Viewer embed and your website is not possible. Please consult the Server Calls documentation for possible interactions between Planviewer Maps API and your website.

Viewer¶

A read-only view of the viewer identified with (identifier). At the creation of the viewer, either via a Server Call or via the Admin Panel, these features can be enabled:

Print: Enables the printing of the viewer to PDF.
Reset: Resets the viewport to the original view.
Measure: By clicking on the viewer both the length of a series of lines and the surface of a polygon are computed.

These features are disclosed to the user via a toolbar on top of the Viewer embed.

Note

To prevent long loading times on complex viewers all layers are loaded but not visible on default

Warning

The Viewer embed is publicly accessible if the URL is known and OAuth is not enabled.

Create an iframe with the following request:

GET https://www.planviewer.nl/maps_api/v2/embed/viewer/(string: identifier)¶

Query Parameters:
	active_layers (boolean) – Opens the layers panel immediately when `true`. This optional query parameter defaults to `false`.
Status Codes:	404 Not Found – `identifier` does not refer to a viewer. 403 Forbidden – OAuth is set, but the browser has not (yet) been correctly authenticated. 200 OK – OAuth is not set, or the browser has been correctly authenticated.

Optional variable¶

The viewer settings allow you to customize the viewer presentation.

Show layer index on load

The layer index (kaartlagen) is not open on load. Extend the embed URL with the variable active_layers=1 or active_layers=true to have it open as default.

<iframe src="https://www.planviewer.nl/maps_api/v2/embed/viewer/5f2a5e10c39b70576c70e7d58b7c1c8ca482369d58bf2f2c989e001c0a18f03b?active_layers=true"></iframe>

Editor¶

The editor is only available for layers of the vector type for which the drawable property (Bewerken data via editor toestaan) is set to true. Using the editor you can draw geometries and upload new shapefiles to replace the existing data via a toolbar on top.

Snaptool¶

When enabled, the mouse-pointer “snaps” to the closest vertex or segment of a nearby feature on any active vector-layer, while modifying or drawing vector features.

Snap can be enabled and disabled with button “Enable/Disable Snap”.
Activate or deactivate layers to control “snapping” to features on a specific layer.

Note

The Editor only is accessible for visitors if OAuth is enabled. Otherwise use the Maps API dashboard on your profile pages to access the Editor.

GET https://www.planviewer.nl/maps_api/v2/embed/editor/(string: identifier)/(int: layer)¶

Status Codes:	404 Not Found – `identifier` does not refer to a viewer. 403 Forbidden – OAuth has not been set, or the browser has not (yet) been correctly authenticated. 200 OK – The browser has been correctly authenticated.

<iframe src="https://www.planviewer.nl/maps_api/v2/embed/editor/5f2a5e10c39b70576c70e7d58b7c1c8ca482369d58bf2f2c989e001c0a18f03b/207"></iframe>

Dossier editor¶

The dossier editor is used to set an initial view and dossier outline for your viewer. Users will only see data within the dossier outline region.

Snaptool¶

When enabled, the mouse-pointer “snaps” to the closest vertex or segment of a nearby features, while drawing an outline.

For “snappable” features to appear, zoom-level must be sufficiently high.
Snap can be enabled and disabled with button “Enable/Disable Snap”.

Note

The Dossier editor only is accessible for visitors if OAuth is enabled. Otherwise use the Maps API dashboard on your profile pages to access the Dossier editor for your viewer.

GET https://www.planviewer.nl/maps_api/v2/embed/dossier/(string: identifier)¶

Status Codes:	404 Not Found – `identifier` does not refer to a viewer. 403 Forbidden – OAuth is set, but the browser has not (yet) been correctly authenticated. 200 OK – The browser has been correctly authenticated.

Viewer / parent communication¶

The viewer implements the ‘PostMessage’ method to communicate between iframe and parent. In order to use PostMessage, you need to either create a viewer with the option use_postmessage=true or update an existing viewer.

The viewer will send a JSON string to the parent window on the following occasions. a click on the map

When clicked on the map all map-information visible on the map will also be available by PostMessage. Translation or filters will not be applied though. Beside the map-information the JSON string also contains the coordinates of the click.

Closing a line measurement: When closing a line measurement (double-click) the length of the line will be posted to the parent
Closing an area measurement: When closing an area measurement (double-click) the length of the line will be posted to the parent

The PostMessage functionality can be used by the parent to trigger actions to increase interactivity between our viewer and the application. To make use of the PostMessage functionality you will need to add a listener script to the parent.

In the example below we listen for the PostMessage from the viewer and display the content in a div. You can use the content to trigger actions on the parent side or store posted information such as locations viewed

<script type="application/javascript">
    function receiveMessage(event)
    {
    let data = JSON.parse(event.data);
        console.log(data);

       document.getElementById('eventPoster').innerHTML =  event.data ;
    }

    window.addEventListener("message", receiveMessage, false);
</script>

<div id="eventPoster"></div>

Hint

You can use PostMessage in combination with our Data API to retrieve more location information

Hint

When using vector layer, use display as_wms to use the PostMessage.