💻Use Ellipsis Drive viewer as embedded window

You can use the Ellipsis Drive web viewer in your own application or website as an embedded window. To do this, you may follow the steps described below

Step 1: Open the layer you would like to embed in your application.

Step 2: You can Import additional layers to mix and match your spatial data.

Step 3: Once you are done creating your map, go to share on the top right and choose Save As.

Step 4: In the dialog pick one of presentation mode or customize. Presentation will provide you with a simplified view and customize allows you to add and remove viewer elements.

Step 5: Once the bookmark is created go to the Drive location where you created the bookmark in and click the context menu and click integrate.

Step 6: Within the integrate dialog copy the embedded window option. You can use the resulting piece of html code on your own website.

Screen cast

Mind the fact that authentication needs to take place for all of the layers within your bookmark. Either enable link sharing for all the layers within your bookmark. Or add a token to your url in order to sign it.

Event handling

Events within the embedded window. Such as clicking a feature or a location on a raster triggers an event in your own website/dashboard/app in which the window was embedded.

To react on this event simply place an event listener in your javascript code in the following way:

window.addEventListener('message', function (e) {
    // Get the sent data
    const data = e.data;

    // parse the message as a json;
    const decoded = JSON.parse(data);
    
    //check the action type of the message and the data of the message
    console.log('action type is ', decoded.action)
    //data of the action is
    console.log('data of action is', decoded.data)
});

With the found event data you can now undertake an action of your choosing.

Currently the following actions trigger an event:

Action

Description

featureClick

This event is triggered whenever a feature was clicked in the the iframe

rasterClick

This event is triggered whenever a raster was clicked to analyze it's values.

PreviousIntegration options NextCreating (signed) viewer url's

Last updated 3 months ago

window.addEventListener('message', function (e) { // Get the sent data const data = e.data; // parse the message as a json; const decoded = JSON.parse(data); //check the action type of the message and the data of the message console.log('action type is ', decoded.action) //data of the action is console.log('data of action is', decoded.data) });