(GIS) Creating a GIS viewer in the platform and embedding it in a dashboard

In this tutorial, we'll learn to create a GIS viewer from the platform, then embed it in a dashboard, which will be also created from the platform.

The first thing to know about GIS viewers is that they are made up of a base map and several layers painted on it. Thus, the first thing to do is creating a couple of layers on which the viewer will be created.

Layer creation

Firstly, access the CloudLab Environment Control Panel: https://www.onesaitplatform.online/controlpanel/ If you do not have a user with the role Developer, create one.

Access the menu option WEBMAP VIEWER > My Layers then select

You can create two types of layers:

  1. Ontology Layers: these layers are associated to an ontology, and the shown data come precisely from this ontology. They are distinguished because the ontology must have a geometry-type field.
  2. External Layers: these layers are associated to an external URL.

Ontology Layers

Let's start by creating a layer associated to an ontology. To do this, select:

You will see a form where you can give it a name, a description, and a corresponding associated ontology. In this case, you will create a layer representing some pipes in Las Palmas:

Next, define the different parameters characterizing our layer, such as:

  • Geometry: select the ontology's geometry-type field that defines where the pipes are located in the map. It will automatically show that the geometry field is of LineString type.

  • Symbology: in this section, you can select the color, thickness and size of the line shown in the map.

  • Info Box: in this section, you can map the ontology's fields with the attributes that will be shown on the map when you click on each element. In this case, you will represent each pipe's id, name and status:

Once your layer is defined, you will create it with → 

In ontology-type layers, you can insert new data in an easy, visual way. To do this, go to the layer list: WEBMAP VIEWER > My Layers and select your layer's CRUD:

You'll access a screen with a list of all the ontology instances associated to the layer:

And a map where those instances are represented:

To add a pipe, you only have to click on   and draw on the map. To end drawing a line, you must right-click. At that point, you'll see a pop-up where you can insert the data corresponding with the ontology's fields.

Once you have defined the data, click on and you can see how your new instance has been added to the table. With this, you've inserted a new pipe in the ontology. You can also delete instances the same way.

External Layers

This time, select:

and you will see a form to define, besides the usual id and description fields, the layer's external URL and the layer's type:

In this case, you will create a layer coming from a WMS service. We will represent the flood risk in Las Palmas with a turnover of 500 years. To show a WMS service's data, you need to specify both the service's URL and the name of the layer you want to show.

Viewer Creation

Once the layers that make up our viewer are defined, it is time to create it. To do this, access the menu option WEBMAP VIEWER > My Viewers 

and select .

You will see a form where the following fields must be noted:

  • Technology: for this first version, only Cesium is available as the viewer technology.
  • Base Map: as we said at the beginning of this tutorial, a viewer is based on a base map. In this case, select Open Street Maps
  • Layers: here you will select the layers you want to represent in your viewer.

On the other hand, you have a map and the JavaScript code making it up.

When you select a layer in the previously-defined combo, it will automatically appear drawn on the map. Select the Pipes (Tuberías) layer and the WMS service layer:

You can also modify the Javascript code. For instance, comment the Tuberías layer at the end of the code:

Then, select and you'll see that the map refreshes and that layer has disappeared:

Once you have defined the map, you can create it with → 

Rollback Function

When editing a viewer, the situation may arise that we want to "play" a little bit with the viewer, but we are not sure the results will look right, or will even work. This is why we implemented a function allowing us to do a security copy of the viewer, so that, in the future, you can rollback to this previous version.

To do this, when you enter the viewer's edition mode, you see a rollback option:

Once you've done the relevant modifications in the viewer, and with the rollback option selected, when you click , a security copy of the previous viewer will be created, then the modifications will be applied.

To recover the security copy, you only need to enter the viewer's edition mode and click  

Viewer Integration

Once the viewer is created, it's time to integrate it. There are currently two ways to do this:

  • Download the code: if you access the list of viewers and select the download option, you will generate a zip file with an index.html including all the code in the viewer. This option will allow you to use the viewer in any application.

  • As an iframe: if you select the 'URL' option in the viewer list:

This will give you an URL, which you can insert in an iframe to integrate it in any application.

Let's integrate your viewer in a dashboard in the platform. To do this, create a dashboard then add a Live HTML-type gadget.

Once the gadget is added, edit it and include an iframe with the previously-provided URL:

With this, you have a dashboard, created from the platform and integrating your viewer:

You can see this tutorial as a video in: