The article discusses methods for building geospatial web applications based on the ICM SB RAS geoportal resources. The sources of information for them are two types of data: web-service-based cartographic layers and data from the operational monitoring sub-system. The developed instrumental software allows you to select data on the geoportal, form, and configure the user interface. The modular structure and functional capabilities of the developed system are considered.
With the development of web technologies, ordinary users can work with various information, using programs and web applications as tools for analysis and viewing. Basically, such an application is a web browser, which allows you to use information systems without pre-installation. The web environment serves as an excellent basis for development, having many software tools in its field that allow you to create user interfaces, components, and applications.
Despite the variety, there are few solutions for the rapid development of geoinformation web
systems. One of them is the ArcGIS Web AppBuilder, which allows you to download various
resources, interact with them using a wide library of tools, configure the user interface, change
the layer’s attribute information, etc. It should also be noted NASA products, for example,
Worldview or TerriaJS from Terria and many other geoportals [
Currently, the possibilities for visualization and analysis of operational environmental monitoring of air in the city of Krasnoyarsk using the developed software components have been implemented. This system is developed using the Node software platform.js, based on the V8 engine, an open source JavaScript framework Vue.js, MongoDB databases.
The sources of information are the resources of the geoportal of the Institute of Computational Modeling, Siberian Branch of Russian Academy of Sciences (ICM SB RAS) (http://gis.krasn.ru).
The developed software consists of several modules. A module is a complete functional fragment of a program. It is designed as a separate file with the source code or a continuous part. A module consists of a single file containing its own logic, imported libraries, files or components, and blocks for defining HTML, CSS, and JavaScript.
There are three large modules in the system, which are divided into smaller parts. The first module is “Personal Account”. It is responsible for the user’s login and for editing user data. The second block is “Project Manager”. It allows the user to view existing projects, create new ones and edit information about their projects. The third module is the “Workspace”. It allows you to display various available resources from the ICM SB RAS geoportal on the map, change their display style, set diferent classes with the style and display conditions, etc. All modules are connected to two databases: the ICM SB RAS and the project repository.
Each parent module has several children. For all child modules, there are single layouts for display, depending on the parent module. There are static and dynamic parts, which are then displayed as a page. The “Personal Account” has its own layout, in which all child elements are already displayed, and the “Project Manager” also has its own layout. When changing the selected child module, the necessary data is transferred from the parent to the child, and the module is selected in the dynamic part of the layout. Figure 1 shows the process of forming a daughter module from dependent components.
The navigation menu is displayed in the static part of the layout. When you select a menu item, the dynamic part changes. The child module of the selected menu item is merged in it. Figure 2 shows the process of forming a page based on child modules for display.
There are two databases that the system communicates with. The first one is the database of
the system itself. This database stores the created projects and copies the users who are part of
the ICM SB RAS geoportal to not create separate users for the geoportal and the application
building system. The second is the database of the ICM SB RAS geoportal. It is a huge dataset,
including data from the environmental monitoring network of the Krasnoyarsk Scientific Center.
All interactions are carried out using the REST-based geoportal API [
The MongoDB database is used to store system information for deploying application applications. MongoDB is a documented database management system that uses the JSON format for storing data. Two data collections have been created in the developed database. The first collection is responsible for storing information about users; the second one is for storing projects. The author’s name is used to link users to their projects. It searches for owned projects and opens access to editing them.
The system works using Node, Vue, and the MongoDB database. Node is a software platform
based on the V8 engine that allows you to use the JavaScript programming language as a
general-purpose language. This means that JavaScript can be used to build web pages and
interact with them and implement a server [
Figure 4 shows the interaction of these three components. As shown in the figure, the web application sends requests from the user to the server (Download the project, Save the project, Get project metadata, Get user data, etc.), then the server processes the requests and forms a request to the database. The response is returned along the chain to the user. Requests from the user are formed according to the architectural style of interaction between REST components that use HTTP requests.
The server can process the following requests and perform certain actions: • Request for registration. The same login and password are used to access the geoportal of the ICM SB RAS and the system. If the login was successful, but you were not previously registered in the system, the system will notify you about this and create a new user record and a place in the database for storing projects. Then you will be redirected to a page where you will need to fill in information about the user. • Login request. If the login is successful, and you have previously logged in, then you will be immediately redirected to the page with all the projects. • Request for projects. The result of the request is a list of projects from the database. • Save request. As a result of this request, the project is saved from the “Workspace” or from the “Project Manager”.
The user interface is built on a JavaScript framework Vue.js. Inside this framework, all work and communication between components are carried out according to the MVVM template. This template allows you to separate the model and views to change them separately from each other. The MVVM template is divided into three parts: • Model describes the data used in the application and may also contain various logic associated with this data. It is the foundation for the necessary operation of the application. • View is a graphical interface. The view can be subscribed to data update events, property changes, etc. If the property has changed, this is reported to all subscribers, and the View requests the updated values from the Model. • View Mode contains the Model converted to the View and commands that the View can use to influence the Model.
The system allows you to request various cartographic resources available on the ICM SB RAS geoportal. This includes resources related to administrative borders, water systems, operational monitoring, etc. There is a separate database of the ICM SB RAS, which stores operational environmental monitoring data. Various data from monitoring posts: wind speed and direction, temperature, humidity, pressure, PM2.5, AQI, MPC fractions, etc. Based on these data, we will consider the operation of the system.
Working with the system begins with the “Personal Account” module, where you need to enter your username and password. After logging in and receiving a key from the server to access various remote resources, the transfer is made to the “Project Manager” module. This module requests the database with projects through the server; the server returns a list of all available projects to the user. As mentioned earlier, now, there are only four child modules of the “Project Manager”, three of which are displayed as a page, and the user can interact with them — this is the display of existing projects, editing, and creating projects. The fourth module works only if the user clicked “go” on the project card, and this module executes a request to get the project structure and transmits data to the “Workspace”. At the moment, the module “Creating a project” is of interest. “Creating a project” — is a page with the initial parameters of the project: • project name; • project Description; • initial substrate; • camera coordinates; • zoom in on the camera; • project coordinate system.
After filling out the form, the user opens the “Workspace” module. This module is a page with two menu panels and a map. The first panel, attached at the top, displays the project name and a button to return to all projects. The second one, attached to the left, displays the active layers of the project and tools. When you click on “Layers”, a submenu opens with the ability to add various cartographic resources from the ICM SB RAS geoportal.
It should be noted that today there are many tools and ready-made systems that ofer
visualization services and analytical processing of operational monitoring data [
Let’s consider the cartographic resources from the “Operational monitoring data” database and build a small project to display data from monitoring posts included in operational monitoring. For example, we will display temperature data for a month. In the beginning, you need to click on the “Layers” panel and click on the “+ Add layer” button. In the menu that appears, please select the posts that interest us and close the add menu. In this example, the monitoring posts “Peschanka”, “Pokrovka”, “Sverdlovsky”, “Svetly”, “Solontsy” will be used.
In the “Layers” menu, the selected monitoring posts will appear as separate layers, and when you click on such a layer, the settings menu will open. You can configure the layer’s behavior in this menu, the display style (marker color, rotation angle, ofset, etc.), classes, projection, etc. Let’s look at the operation of the system using the example of temperature data. There is a tab “Data” in which all available data of the layer’s monitoring post or tabular data is displayed. Select the item “Temperature”. Such systems use coloring depending on the temperature. This coloring can be configured in the “Classes” menu in the settings and set the conditions for which values this class will be triggered.
Let’s take the temperature range from − 30 degrees to +30 and set the step to 10 degrees. You will need only 8 classes with their own coloring. Two classes will be responsible for temperatures outside this range. One class corresponds to a temperature that is less than − 30. The other class corresponds to a temperature that is greater than +30. Let’s call the classes names that will reflect the ranges. Figure 5 shows the class menu. After adding all the classes, you need to configure the display style of each class and set the trigger conditions. Clicking on the class opens a menu with display settings. In this menu, there are settings for diferent types of layers. Since we are currently working with monitoring posts, the settings for them are the same as for points. There is a small marker constructor that allows you to create composite markers. You can specify the fill and stroke color. Rotation angle, X and Y ofset, shape type (circle, square, star, etc.), and text settings. If necessary, you can add several types of shapes to one marker. The interface for setting parameters is shown in the same Figure 5.
The next step is to download data from monitoring posts for a certain period. To do this, there is a “Tools” menu where you can select the “Calendar” tool. In the calendar, you need to set the download range and time step. Take, for example, the month of March in one-day increments. The data will be automatically loaded based on the added posts, and will be stored in the system until the page is reloaded. Now you need to add a timeline from the “Tools” menu, which will allow you to switch the selected days and update the information on the map. By moving through the timeline, the layer calculation event is triggered. This event calls the calculation function, in which each layer is taken, and each class in the layer is viewed. All conditions in all classes are checked and compared with previously loaded values. After all this, the selected layers are converted to GeoJSON format, which the OpenLayers library can recognize, and passed to the “Resource Mapping” module. In this module, layers are iterated, and the main style class is applied to them, and the layer is displayed on the map (Figure 6).
In order to display all the classes of the layer, without opening the settings each time, there is a “Legend” element, which is added through the menu of the elements.