Using the maps component in a low-code app

In this tutorial, you will learn how to add and configure a maps component in a low-code app, by means of an example where the maps component is used to visualize cell towers, their connections, and their coverage.

Expected duration: 30 minutes.

The content and screenshots for this tutorial have been created in DataMiner version 10.4.1.

Prerequisites

• A DataMiner System using DataMiner 10.4.1 or higher, which is connected to dataminer.services.

Note

Depending on your DataMiner version, you may need to activate the ReportsAndDashboardsGQIMaps soft-launch option to be able to use the maps component. See Soft-launch options.

Overview

• Step 1: Set up the data
• Step 2: Visualize the cell towers
• Step 3: Configure the map
• Step 4: Style the markers
• Step 5: Add grouped markers
• Step 6: Visualize connections
• Step 7: Add navigation buttons
• Step 8: Add an overlay

Step 1: Set up the data

1. Go to https://catalog.dataminer.services/details/package/5506.

2. Click the Deploy button to deploy the Maps tutorial package on your DMA.

   This package contains an ad hoc data source that can read in a JSON file and return GQI rows. It also contains three JSON files with cell tower data that will be visualized in this tutorial.

Step 2: Visualize the cell towers

1. Create a new low-code app.

2. In the data pane, create a new query.

3. Configure the query to retrieve the cell towers from the CellTowers.json file using the JSON Reader ad hoc data source.

   

4. Add a maps visualization to the page and add the query to it by applying a data feed.

   The maps component will look at the columns returned by the query and will try to automatically configure the identifier, latitude, and longitude. This means that the cell towers will automatically be shown on the map. By default, the query will be in the first layer.

5. Make sure the component is selected and go to the Layout tab on the right.

6. Under Layer settings, rename the first layer to Cell towers:

   

Step 3: Configure the map

The markers you added in the previous step are all located on a small part of the map, but the map itself shows a large part of the world by default. To make it easier for the users to locate the markers, you can set some default values and limits for the map:

1. Zoom to the area of the map that you would like to have as the default view.

2. In the Layout tab, go to the Map settings section, and click Save current view.

   

   This will set the default map center and default zoom level to what is currently displayed.

3. Under Map zoom, use the slider to limit the minimum zoom level.

   This will make it impossible for a user to zoom out past a certain level.

4. Under Map bounds, select Enable bounds.

   This will limit the bounds of the map, so that the user cannot pan too far away away from the markers.

   

Step 4: Style the markers

At this point, the cell tower markers are always shown in the component, but they still look very basic. To make them stand out more and display some additional information, you can edit their template:

1. In the Layout tab for the component, expand the Layer settings and then expand the Cell towers query.

2. In the Template box, click Edit.

   This will open the template editor.

3. Modify the default ellipse layer to use as the background for a text shape:

   1. In the Layers tab on the left, select the layer and then modify the Dimensions on the right to position it at the bottom right of the template.

   2. Below Show ellipse on the right, click the color icon to select a custom color for the background.

      

4. Create a text layer that displays the number of transceivers on the tower:

   1. In the Tools tab on the left, select Text and then click and drag in the center pane to add a text layer.

   2. In the box below Show text on the right, enter the text {Tranceivers}.

      

      This placeholder text will be replaced by the content of the corresponding cell value from the query data source.

5. Create an icon layer to represent the cell towers:

   1. In the Tools tab on the left, select Icon and then click and drag to place the icon in the right location in the center pane.

   2. In the pane on the right, click Icon, enter tower in the filter box, and select the tower icon.

      

The result should look like this:

Step 5: Add grouped markers

The templates you added in the previous step look good, but at this point the visualization still feels cluttered when you zoom out all the way. You can deal with this by adding grouped markers. For this, you will need to create additional queries to retrieve data from the CellTowersGroups and CellTowersCities JSON files you installed with the package in step 1.

1. In the data pane, create a new query named Cell tower groups, and configure it to retrieve the cell towers from the CellTowersGroups.json file using the JSON Reader ad hoc data source.

2. Create another query similar to the previous one, but this time use the name Cell tower cities and the CellTowersCities.json file.

3. Drag the two new queries to the maps component.

4. Configure a template for both queries that shows the Count of cell towers that are grouped in the markers:

   1. Modify the default ellipse layer to use as the background for a text shape:

      1. In the Layers tab on the left, select the layer.

      2. Below Show ellipse on the right, click the color icon to select a custom color for the background.

         

   2. Create a text layer that displays the number of transceivers in the group:

      1. In the Tools tab on the left, select Text and then click and drag in the center pane to add a text layer.

      2. In the box below Show text on the right, enter the text {Count}.

         This placeholder text will be replaced by the content of the corresponding cell value from the query data source.

   The resulting template should look like this:

   

5. Configure the new markers to only be shown between certain zoom levels:

   1. In the Layout tab for the component, expand the Layer settings and then expand the Cell towers layer.

   2. Expand a query and open the Advanced settings section for that query.

   3. Enter the minimum and maximum zoom levels where the markers of the query should be shown on the map:

      • Cell towers should be shown from 60 to 100.

        

      • Cell towers groups should be shown from 52 to 60.

      • Cell towers cities should be shown from 50 to 52.

When you zoom in on the map, more and more grouped markers should now be shown, until the cell towers themselves become visible:

Step 6: Visualize connections

Now that all the cell towers are shown on the map, you can visualize the connections between them:

1. Create a new query.

2. Select the data source Start from and the query Cell towers.

   This CellTowers data set contains a source column with the ID of the cell tower that another tower is linked to.

3. Create a new query that starts from the CellTowers query and joins itself based on this column:

   1. As the name of the query, specify Connections.

   2. Select the operator Join and the type Inner.

   3. Below the Join operator, select the data source Start from and the query Cell towers.

   4. Select the fields Source and Tower ID.

4. Create a new concatenated column of the IDs of both towers:

   1. Continuing from the same query, add the operator Column manipulations with the manipulation method Concatenate.

   2. Select the column Tower ID.

   3. In the Format box, specify {0}/{1}.

   4. In the New column name box, specify Connection ID.

5. Select only the necessary columns to display the connections:

   1. Continuing from the same query, add the operator Select.

   2. Make sure only the following columns are selected: Connection ID, Latitude, Longitude, Latitude (2), and Longitude (2).

   This will result in a new data set with a unique ID and two sets of coordinates that you can visualize as lines on the map:

   

6. To be able to show and hide these connections, add them to the maps component in another layer than the cell towers:

   1. Drag the query from the Data pane to the component.

   2. In the Layout pane, under Layer settings, click Add layer to add a new layer.

   3. Drag and drop the Connections query from the top layer to the new layer.

   4. To make sure that the connections are shown underneath the markers, increase the weight of the new layer by one.

   5. To make sure the query is visualized as connection lines, hover over the query and click Set as line to the right of the query name.

      

      The component will try to automatically configure the dimensions and show the lines on the map.

   6. In the Style section, pick a color, width, and type for the lines.

This is what the configuration of the connections will look like:

This will be the result in the maps component:

Step 7: Add navigation buttons

Now that your map will show the grouped cell towers and connections, you should add a way to easily navigate between different groups of markers. For this, you can add a grid component that visualizes another query:

1. In the visualizations pane, in the Other section, select the grid visualization and drag it to the area below your map component.

2. In the Data pane, create a query that starts from the cell tower cities and sorts them by transceiver count:

   

3. Drag the new query to the grid component.

4. Go to the Layout pane for the component, and click Edit in the Item templates section.

5. Configure the template as follows:

   1. Modify the default text layer to display the text in a larger font and center it in the template:

      1. Below Show text on the right, change the font size:

         

      2. In the same section, change the color of the text:

         

      3. Use the buttons at the bottom to center the text horizontally and vertically:

         

   2. Create a transparent layer that executes actions when clicked:

      1. In the Tools tab on the left, select Rectangle and then click and drag in the center pane to add a rectangle layer.

      2. Below Show rectangle on the right, select a custom color for the background, making sure the opacity is set to 100:

         

      3. Click the Configure actions button on the right to add the actions that should be executed when an item in the grid is clicked:

         1. Select Execute component action and Pan to view to pan to the grouped marker.

         2. Link the latitude and longitude arguments to the corresponding columns that are fed by the grid:

            

         3. Click Add action at the bottom to add another action.

         4. Select Execute component action and Set zoom level to set the zoom level to a level where the cell towers are visible:

            

         5. Click Ok to close the actions configuration and Save to save the template.

In the end, the component should look and function like this:

Step 8: Add an overlay

As a final touch to finish the configuration, you can now add an overlay to the component to visualize the coverage of all the cell towers. This can be done via a KML file that is toggled with a component action:

1. In the visualizations pane, in the Other section, select the button visualization and drag it below your maps component, to the right of the grid component.

2. Configure an action for the button:

   1. In the Settings tab for the component, click the button next to On click.

   2. Select Execute component action and Toggle overlay.

   3. Enter KMLs/CellTowersCoverage.kml as a local source for the overlay.

      This overlay file is included in the package you deployed in step 1.

   

You should now have a fully functioning application that can visualize (grouped) markers, their connections, and their coverage, and that allows users to easily navigate to the different cell towers on the map.