It is possible to style each layer individually through CSS for the Geo Map component. Here is an example of what a Geo Map with 2 layers will look like by default:
In order to change the style of each layer, Design Studio exposes the layer ID property as a CSS class. This allows you to style each layer separately, and for instance, change the opacity or the behavior on selection. As the classes are tied to the layer ID, showing or hiding a layer will have no impact on the styling of other layers.
Here is a CSS example illustrating how this works:
.REGION_LAYER { /* Layer ID of the choropleth layer */
opacity:0.5; /* Default opacity for the layer */
}
.REGION_LAYER.sapzengeomap-selected {
opacity:0.9; /* Changes opacity to 90% when selected */
}
.REGION_LAYER.sapzengeomap-unselected{
opacity:0.2; /* Changes opacity to 20% when unselected */
}
.BUBBLE_LAYER { /* Layer ID of the bubble chart layer */
opacity:1; /* Default opacity to 100% */
stroke-width:1; /* Adding a white stroke around the bubbles */
stroke:white;
}
.BUBBLE_LAYER.sapzengeomap-selected { /* Changing the fill and stroke when selected */
stroke: black;
fill: red;
}
.BUBBLE_LAYER.sapzengeomap-unselected { /* Changing the opacity when unselected */
opacity:0.1;
}
The result is illustrated in the two figures below:
