Table of Contents:
This tutorial describes how to build a Browser Application with 2 panels:
This implementation requires the new M.App Enterprise 2018 (16.5) release. The new release comes with an additional setup for the geoprocessing engine that must be installed on a dedicated server.
The Geoprocessing engine must be installed on a Web Server that can communicate with the M.App Enterprise server. In particular we have two types of interactions:
There are some software prerequisites that must be installed before proceeding with the setup:
When you have installed the prerequisite you can run the Geoprocessing 2018 setup what will list the packages you are going to install:
At the end of the installation you will be asked to run the configuration wizard in which you can keep the default settings (or refer to the installation document for more details and possibility of changes). The only step where to change the default settings is summarized below:
NOTE: At the end of the installation and configuration you MUST RESTART the server, even if the setup does not notify it..
For additional references and more detailed descriptions refer to the documents provided in the Release Information section.
On the application server side you get now an additional step in the wizard to configure the Geoprocessing server endpoint. You should configure it like in the following picture:
The use case we are going to implement is an App to identify changes over time. We will use a model that takes 2 images (multispectral, 3 bands) as input from the 2 different periods of time. The Recipe will analyze the inputs and will create a new image as output that will then be displayed on the map for user inspection. The output is indeed a thematic raster with a specific color associated to the probability of change in the corresponding area (high probability of change is associated to a RED based range of colors).
As you can see from the preview below we have an area with construction sites, where the model is able to associate, with a good confidence, there have been changes over time.
In this section we will only mention the steps related to this specific type of Apps. If you need additional details on how to configure an App please refer to the main documentation or to more generic tutorials.
For this specific use case you will have to prepare a Legend with a couple of images ("before" and "after" Image; it is not mandatory to add them to the legend, we will use them just to compare the output of the process with those inputs) and OSM and a Map View with the following properties:
The first step is to create a Browser App with 2 panels. The left panel will contain a Recipe template, the right one a Map panel (for the map you will also need a Legend and a MapView). The App configuration will look like this (drag&drop the panel templates to the corresponding sections):
For the Map panel you can click and select the existing MapView that contains the needed layers.
Clicking on the Recipe panel you will have the possibility to select an existing recipe or to create a new one (if it is the first time you use this panel template in your tenant you will have only the possibility of creating a new one).
Click on "Create new" and you will get redirected to the Spatial Workshop user interface.
A Spatial Recipe is a model of interconnected operators that perform geospatial processing.
The definition of the Recipe to analyze inputs and create information as output is done through the Spatial Workshop application. If you are familiar with ERDAS Imagine or GeoMedia, this is the transposition to the web of the Spatial Model Editor user interface. Spatial Workshop is an editing environment for creating algorithms by dragging and dropping spatial operators from the Operators list.
To get additional information about this application you can click on the Help button on the top right corner of the App.
In this particular case you can simply click on the Import button on the top bar and load the model definition attached to this article. You should get a result like the following:
You can change the name or keep the existing one and then save it. The Recipe will be saved in your Tenant configuration and will then be available to be selected for any Application defined with Studio (in particular using the Recipe Panel template).
Looking at the model definition we can see 4 ports:
We will need the name Output Image in the app configuration to automate the display of the output raster on the map.
Going back to the App configuration we can click again on the Recipe Panel and now we are able to select the newly created Recipe and clicking Next on the top right corner we can define the details for the Recipe configuration.
For each input you can already specify values (existing images, the color scheme and the folder for the output). If you check the Bound setting the user will not be able to change the port value (the port will be hidden running the App), otherwise, even if you preselect the values, the user will get the possibility of changing them.
NOTE: input and output files for Recipes will be contained in the M.App Enterprise Warehouse folder on the server side. They will be segregated by Tenant, so a Recipe in the Tenant 'A' will be able to use only files from the Tenant 'A' Warehouse.
Click on JS button for the Recipe Panel and in the left menu click on Code Examples, scroll down, find the Recipe Panel customization and drag&drop it in the central text area (JS of the Recipe). In the code itself you have to modify the OUTPUT_PORT_NAME text with the actual name of the port for the output image (in our case Output Image).
For the Map Panel you have to drag&drop the Add WMS layer to the legend sample in the JS source code (no changes to the source code are required).
The App configuration is over.
In order to test the App you have to open the My Apps page for the tenant you have used so far and run the App. You can set as input parameters the 2 images that you have uploaded already to your M.App Enterprise Warehouse folder (for this specific tenant) and the same folder or a subfolder to store the output together with a desired name (the extension can be selected from the dropdown). You should get something similar to the following:
You can now execute the model
end at the end you should get the output image added automatically to the legend and the map zoomed to its bbox:
You can play with the resulting image in the legend switching it on/off to compare it with the original images (if you have added them to the legend in Studio) or changing the transparency.