Implementing multiple layers using Map component in Lumira Designer

Introduction

Map is one of the chart component present in lumira designer. It is used to locate the region in the Map.

Whats the problem :

In this blog post we will see how to use the map component and how to create drilldown level in Map using the Layers present in map component.

What needs to be done :

We will add a map component such that on click of a the region it will further drilldown to the areas present in the region depending on the data.

Map component provides layers in the map configuration, with which drilldown of the map can be done.

Pre-Requisites :

Add two datasources DS_1 and DS_2 whose initial view is show below.

DS_1 :

DS_2 :

Steps:

Step 1 : Right click the layout and select Map present in the Chart Components.

Step 2 : Select the Map configuration present in the property of Map component.

Step 3 : In the Map section select add layer and add the type of Geo Info you want to show and select Ok. For this example we will be using both GeoJson type and Latitude/Longitude type.

Step 4 : To create a drilldown level in map based of the click in the map , add another layer and enter the details as shown in the screenshot below and select ok.

Step 5 : In the onselect of the Map component enter the below script to enable the scripting function during runtime.

var B=MAP_1.getSelectedMember(“DS:2,DIM:id_10”).text;

if(MAP_1.getSelectedLayer() == “COUNTRIES”)

{

MAP_1.setLayerVisible(“COUNTRIES”, false);

MAP_1.setLayerVisible(“LAYER_2”, true);

MAP_1.centerMap(“LAYER_2”);

DS_2.setFilter(“DS:2,DIM:id_10”, B);

}

else

{

MAP_1.setLayerVisible(“COUNTRIES”, true);

MAP_1.setLayerVisible(“LAYER_2”, false);

MAP_1.centerMap(“COUNTRIES”);

}

Note :

In the map configuration make sure to select the layer which needs to be shown first and deselect rest of the layers as shown.

Output :

The datasources and the screenshots attached are self made.

Conclusion :

Thus the using of Map component and Implementing multiple layers using Map component in Lumira Designer is created successfully.