Maps

Sentinel Web Dashboard allows you to build Map reports that provide an extensive list of predefined maps. Also, it is possible to add custom maps to the list of predefined maps.

Predefined maps are delivered in the folder:

SentinelWebDashboard/webdashboard/var/map/default

The content of this folder should not be modified, as this is managed by the application. Custom maps can be created in the folder:

SentinelWebDashboard/webdashboard/var/map/custom

The following steps are used to add custom maps to your system:

  1. Create a map
  2. Deploy the map
  3. Create a mapping file containing area labels
  4. Register the map in definition.xml

Create a map

Create a map in the form of a SVG file. SVG maps are available online or you can build them from scratch using various tools, for example InkScape, a free open-source software (https://inkscape.org/). The following elements are important in the SVG file:

Height and width

Use various tool (for example, InkScape) to identify or to adjust the size of your map. The SVG file can also be edited in a plain text file editor. In this case, the height and width are specified as attributes of the <svg> XML element. The following is a sample from an SVG file:

01.<svg width="600" height="400" viewBox="0 0 550.00001 600.000001" id="svg3345" version="1.1">

Path identifier

SVG files contain so called "paths", and each path is identified by an ID. This ID is essential as it will be used later in different configuration files. If opened in a text editor, path are identified by <path> XML elements. See below a fragment of an SVG file containing a path definition with an ID.

01.<path id="RO-CV" d="...

Deploy the map

It is recommended to create a specific folder in the directory destined for custom maps. Copy the SVG file there. The following is an example of a map called myfirstmap.svg:

SentinelWebDashboard/webdashboard/var/map/custom/myfirstmap/myfirstmap.svg

Create a mapping file containing area labels

For a map, each area code must be associated with a label. This is done with an XML file that is created manually. The following example shows two area codes mapped to human readable labels. These labels are displayed in the Graphical User Interface (GUI).

code sample for Web Dashboard Mapping File

Register the map in definition.xml

Any custom map must be registered in a file named definition.xml situated in the folder

SentinelWebDashboard/var/map/custom

By default, there is no definition.xml file and it must be created manually. Each time a new map is added into the system, it must be registered in this file. The example displays two registered maps:

sample code for Web Dashboard Maps registering

The following elements are important in the definition.xml file.

Note   It is sufficient to refresh the report that contains a map and for modifications in the associated files to be taken into account.

Map ID

Each map will have an id; in the example provided, one map has the ID 10001 and the other 10002. IDs must uniquely identify each map. It is recommended to use integer values for identifiers, starting with 100000.

Name

The name tag defines the name of the map. This value is used as the default label to display in the GUI. In the example provided, one map is named MyCountry and the other YourCountry.

File

The file tag contains the relative path to the SVG file containing the actual map, and it must begin with the folder custom.

Mapping File

The mapping-file tag points to the relative path of the mapping file created.

Area type

The area-type tag's value must match the name attribute's value in the mapping file created. In the provided example this value is counties.

Mapping

The <mapping> tag's value must match the mapping-name attribute's value of the <area-type> in the mapping file. In the provided example, this value is ISO-3166-2.

Translate

The <translate> tag is used to specify two integer values (negative or positive) separated by a comma (,), representing the number of pixels. The first number determines the horizontal translation of the displayed map, while the second number influences the vertical translation of it. Start with the values 0,0 and adjust the values to obtain the desired display.

Size

The <size> tag is used to specify two positive integer values separated by a comma (,). These numbers represent pixels and identify what part of the original image is displayed. Start with the same values as in the SVG file and adjust the values to obtain the desired display. Typically, when you increase the numbers, a zoom-out effect is generated, while lower numbers result in a zoom-in behavior.

Related Links