💻Use viewer as embedded window

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

1️⃣ Open the layer you would like to embed in your application.

2️⃣ You can Import additional layers to mix and match your spatial data. Once you are done with importing layers, don't forget to hit the BOOKMARK THE VIEW to save the data layer composition

3️⃣ Copy the URL from the browser's address bar

4️⃣ Add &hideNavbar=true to the URL. This will hide the navbar and prevent the user from exiting the viewer. For example:

https://app.ellipsis-drive.com/view?pathId=92b55e70-3b4d-413b-991d-d0ae7f736b78&hideNavbar=true

5️⃣ Use the constructed URL as an embedded window in your application. You can simply add the following HTML element to your application or website.

<iframe src={THE URL} />

How to use a bookmark as embedded window

Do you know that you have the possibility to show/hide the sections or sub-sections within the viewer? Follow the tables below to know more 👍 💡You can also combine below attributes with the specific state of the viewer which is created via SHARE VIEW option. Share View sets a state=<> in the URL. Example: https://app.ellipsis-drive.com/view?mapId=4fbebb02-dc13-4d10-8c5e-f37d9fd85a85&state=856b71a6-0415-4d7d-b7d6-ca54501c522d&hideBrowse=true

Essentials

Parameter	Description
showLogo	Adds user avatar as logo on the top right of the map
hideNavbar	Hide the navbar of the app

Hide top level elements in the viewer

Parameter	Description
hideSidePane	To hide the viewer's sidepane completely
hide3D	Hide the option to switch to 3D
hideViewerControls	Hide the controls in the bottom right corner of the map

Hide top level elements in the side pane

Parameter	Description
hideBrowse	Have the sidepane but hide the Browse option
hideLayerMore	Hide the option to enter the layer details pane
hideCreateDrawLayer	Hide the button CREATE LAYER TO DRAW
hide3D	Hide the option to switch to 3D

Hide sections in the layer details pane

Parameter	Description
hideLayerActions	Hide the section titled as LAYER ACTIONS in the layer details pane
hideLayerIntegrate	Hide the section titled as INTEGRATE in the layer details pane
hideLayerControls	Hide the section titled as LAYER CONTROLS in the layer details pane
hideLayerButtons	Hide the BUTTONS at the top of the layer details pane
hideAdvanced	Hide the Advanced section

Hide specific items in the layer details pane

hideLayerActionCenter	Hide the option to CENTER the layer
hideLayerActionChangelog	Hide the option CHANGELOG under layer actions
hideLayerActionFeed	Hide the option FEED under layer actions
hideLayerActionTable	Hide the option TABLE under layer actions
hideLayerActionDownload	Hide the option DOWNLOAD under layer actions
hideLayerActionToFiles	Hide the option to go to the FILES page
hideLayerControlsAddFeature	Hide the sub-section ADD FEATURE under the layer controls
hideLayerControlsStyling	Hide the sub-section STYLING under the layer controls
hideLayerControlsFilters	Hide the sub-section FILTERS under the layer controls
hideLayerControlsTune	Hide the sub-section TUNE RENDERING under the layer controls
hideLayerControlsCenterPoints	Hide the option DISPLAY CENTERPOINTS ONLY under the layer controls
hideLayerControlsAnalyse	Hide the sub-section ANALYSE RASTER under the layer controls * This is specific to raster map only
hideLayerControlsTimestamps	Hide the sub-section TIMESTAMPS under the layer controls * This is specific to raster map only
hideFeatureMessages	Hide the button MESSAGES in the feature pane
hideFeatureVersions	Hide the sections VERSIONS in the feature pane
hideFeatureSeries	Hide the sections TIME SERIES in the feature pane

💡 TIP: If you want to display only a few items, you can use invertHide=true and can create the URL quickly and easily. In short, with invertHide=true everything mentioned in the URL is shown but components NOT mentioned in the url will be hidden.

Example: If you want to see the BROWSE option only and hide all other components, create a link like below: https://app.ellipsis-drive.com/view?mapId=4fbebb02-dc13-4d10-8c5e-f37d9fd85a85&invertHide=true&hideBrowse=true

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.