(GIS) Cómo crear un visor GIS en plataforma e incrustarlo en un dashboard

En este tutorial vamos a aprender a crear un visor GIS desde plataforma y vamos a incrustarlo en un dashboard, también creado desde plataforma.

Lo primero que hay que saber sobre los visores GIS es que están formados por un mapa base y distintas capas que se pintan sobre el mapa base, por tanto lo primero que vas a hacer es crear un par de capas para crear tu visor.

Creación de capas

Primero accedere al Control Panel del Entorno CloudLab: https://www.onesaitplatform.online/controlpanel/ Si no tienes usuario con rol Developer, crea uno. 

Accede a la opción de menú WEBMAP VIEWER > My GIS Layers y selecciona

Puedes dar de alta dos tipos de capas:

  1. Ontology Layers: estas capas están asociadas a una ontología y los datos que se representan vienen precisamente de esta ontología. Se caracterizan por que es necesario que la ontología tenga un campo de tipo geometry.
  2. External Layers: estas capas están asociadas con una URL externa.

Ontology Layers

Vamos a empezar creando una capa asociada a una ontología. Para ello selecciona:

Aparecerá un formulario donde le darás un nombre, una descripción y le asociarás la ontología correspondiente. En este caso, vas a crear una capa que represente algunos supermercados de Las Palmas:


A continuación define los distintos parámetros que caracterizarán nuestra capa como:

  • Geometry: selecciona el campo de tipo geometry de la ontología que definirá dónde están situados los supermercados en el mapa. Automáticamente se mostrará que el geometry es de tipo Point.

  • Query: como hemos dicho anteriormente una capa de tipo ontología representa los datos almacenados en una ontología. Es en este apartado dónde podemos decidir qué datos de la ontología van a representarse, en este caso vamos a configurarlo de la siguiente forma:
    • Refresh time: aquí definimos cada cuánto tiempo queremos que se actualicen los datos en el mapa.
    • Query: Tenemos la posibilidad de customizar y parametrizar la query que se va a realizar para obtener los datos a representar. En este caso vamos a parametrizar la query para que únicamente se representen sobre el mapa los supermercados que sean de una determinada empresa, es importante tener en cuenta que si se quiere parametrizar una query es necesario definir el parámetro variable de la forma {$parameter} y defenir un valor por defecto. Este valor por defecto va a ser el utilizado la primera vez que se acceda al mapa para lanzar la primera query. Por lo que la query inicial quedaría:
select c from Supermarkets as c where c.Supermarkets.company='mercadona'


El caso de no querer parametrizar la query, bastaría con no marcar el check Customize the query y automáticamente la query aplicada para obtener los datos sería:

select c from Supermarkets as c


  • Symbology: en este apartado se puede definir el color y tamaño de los puntos representados sobre le mapa, además se pueden añadir un conjunto de filtros para pintar de un color u otro dependiendo de un parámetro: 
    • Outer line color: color de la línea exterior del punto
    • Inner color: color interior del punto
    • Outer line thinckness: grosor de la línea exterior
    • Size: tamaño del punto

En este caso hemos añadido dos filtros adicionales, de tal modo que cuando un supermarcado esté abierto el punto se pintará de color verde y cuando esté cerrado se pintará de rojo. Es importante entender que el campo status es un campo de la ontología y que tiene que venir esplícitamente en el resultado de la query anteriormente definida.

  • Info Box: en este apartado puedes mapear los campos de la ontología con los atributos que se mostrarán en el mapa cuando se pinche en cada elemento.

Nota

Sólo podrán añadirse parámetros al Info Box cuando la query no esté customizada. Para este ejemplo al usar una query customizada no se tendrá en cuenta el Info Box.


Una vez definida tu capa, la crearás con → 

En las capas de tipo ontología, puedes insertar nuevos datos de una forma visual y sencilla. Para ello, ve al listado de capas: GIS TOOLS > My GIS Layers y selecciona el CRUD de nuestra capa:

Accederás a una pantalla en la que verás un listado con todas las instancias de la ontología asociada a la cap y un mapa donde están representadas dichas instancias:


Para añadir un supermercado sólo tienes que pinchar en el botón  y pinchar sobre el mapa en la localización deseada. En ese momento aparecerá un pop up donde aparecerán las coordenadas.

Una vez hayas definido los datos, dale a  y podrás ver cómo tu nueva instancia se ha añadido a la tabla. Con esto has insertado una nuevo supermercado en la ontología. Así mismo pueden eliminarse instancias.

External Layers

Esta vez selecciona:

y aparecerá un formulario en el que, además de los campos típicos de identificación y descripción, se definen tanto la URL externa de la capa como el tipo de capa:

En este caso vas a crear una capa proveniente de un servicio WMS. Representaremos el riesgo de inundación con un retorno a 500 años de Las Palmas. Para representar los datos de un servicio WMS, es necesario indicar tanto la URL del servicio como el nombre de la capa que se quiere representar:

Creación del Visor

Una vez definidas las capas que van a componer nuestro visor, es hora de crearlo. Para ello, accede a la opción de menú GIS TOOLS > My GIS Viewers 

y selecciona .


Aparecerá un formulario donde hay que destacar los siguientes campos:

  • Technology: en esta primera versión, sólo esta disponible la opción de Cesium como tecnología del visor.
  • Base Map: como comentabamos al principio de este tutorial, un visor está basado en un mapa base. En este caso selecciona Open Street Maps
  • Layers: aquí es donde seleccionarás las capas que quieres representar en nuestro visor. 

Por otro lado, tienes un mapa y el código javascript que lo compone.

Cuando se seleccione una capa, en la combo definida anteriormente, aparecerá dibujada automáticamente en el mapa. Selecciona la capa Supermarkets y la capa del servicio WMS:


En el código javascript del visor se usa un servicio REST que permite obtener los datos de las capas de tipo ontología, se trata de una operación GET:

https://development.onesaitplatform.com/controlpanel/layer/getLayerData?layer=Supermarkets&company=mercadona

Dónde:

  • layer: es el nombre de la capa
  • company: es el campo parametrizado definido en la query de la capa


También pueden realizarse modificaciones en el código javascript. Por ejemplo, elimina al final del código la capa de Supermarkets:

Después dale a  y verás cómo se refresca el mapa y ha desaparecido dicha capa:

Una vez tienes el mapa definido, créalo con → 

Función Rollback

A la hora de editar un visor, puede darse la casuística de que quieras "jugar" un poco con el visor, pero no estés seguro de que vaya a quedar bien o a funcionar. Para esto hemos implementado una funcionalidad que permite hacer una copia de seguridad del visor, para que en un futuro se pueda hacer un rollback a esta versión anterior.

Para ello, cuando entres en modo edición en el visor, verás una opción de rollback:

Una vez realizadas las modificaciones pertinentes en el visor, y estando seleccionada la opción de roolback, cuando le des a , se creará una copia de seguridad del visor anterior y se realizarán las modificaciones.

Para recuperar la copia de seguridad basta con entrar en modo edición en el visor y darle a 

Integración del Visor

Una vez creado el visor, llega el momento de integrarlo. Actualmente hay dos maneras de hacer esta integración:

  • Descarga del código: si accedes al listado de visores y seleccionas la opción de descargar, se generará un zip con un index.html que contiene todo el código del visor. Esta opción te permitiría usar el visor dentro de cualquier aplicación.

  • Como un iframe: si seleccionas la opción 'URL' del listado de visores:

Te facilitará una URL, la cual puedes insertar en un iframe para integrarlo en cualquier aplicación:

Vas a integrar nuestro visor en un dashboard de la plataforma. Para ello, crea un dashboard y añade un gadget de tipo Live HTML. 

Una vez añadido el gadget, edítalo y mete un iframe con la URL proporcionada anteriormente:

<iframe src="https://development.onesaitplatform.com/controlpanel/viewers/view/f981d448-adf5-418f-ac8d-df97498e5cee" id="viewerIframe" width="100%" heigh="100%" frameborder="0" marginheight="10" marginwidth="10"></iframe>


Con lo que tendrás un dashboard creado desde plataforma que integra tu visor:



Puedes encontrar este tutorial en formato video en:

https://www.youtube.com/watch?v=5us8ArpuGGc