Styling Geo Map layers through CSS in Design Studio 1.5
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:
Hi Etienne,
Thanks for the post, it's a nice one! Follow-up question for using a 'points' layer, should that work also? It occurs that showing bubbles will work as expected:
For points I'm getting another result, which does not highlight the selection anymore:
Best regards,
Laurens.
Hi Laurens,
That's actually interesting and it looks like there is a bug in there for the points layer. When inspecting a selected pointer, it looks like both "sapzengeomap-unselected" and "sapzengeomap-selected" classes are applied to different elements.
We'll need to fix that for sure, but in the meantime it looks like it is possible to workaround that with the following CSS. I'm using the > selector to make sure the parent is my POINT_LAYER:
.POINT_LAYER>g>path {
opacity:0.7;
fill:green;
stroke-width:3;
stroke:pink;
}
.POINT_LAYER>g>path.sapzengeomap-selected {
opacity:1;
stroke: black;
fill: red;
}
This is what the geomap looks like afterwards:
It's not ideal and seems to be a little buggy, although this may be related to the fact that I'm working off a dev build. I'll create an internal ticket to make sure we address this issue.
Let me know if that works for you.
Cheers,
Etienne
Hi Etienne,
Thanks for your swift response. I've tried the workaround you suggested:
Displaying the active selector is okay right now. It's only that I seem to be lacking the 'unselect' feature. So it will actively display all previously selected points.
I played around with adding some kind of 'unselect' statement, but that didn't do the trick for me yet. Hoping you have some suggestion on that one as well...
Best regards,
Laurens.
Hi Laurens,
That was the buggy behavior I was referring to actually. I will make sure to add this to the internal bug backlog to address this for 1.6 SP0 hopefully. I don't think there will be a workaround for this unfortunately.
Etienne
Hi Etienne,
Thanks for the clarification, much appreciated.
Best regards,
Laurens.
Is it possible to set the size of a Point-shape? The Points get really large per default and when I have points closely together they overlap. Would be nice if it were possible to make them smaller.
Thanks!
Hello Jonathan,
At the moment it is not possible to do that no, however we do support custom images for points, so you could upload small markers to replace the default ones.
Would that work in your case?
Regards,
Etienne
Don't think it would help since we still wan't to have the Points colored depending on a measure value. The marker option doesn't seem to show the measure value at all.
I managed to make a workaround by buffering the Point-SHAPEs out to polygons. By doing that I can controll the size in advance in the json-layer.
Thanks!
Jonathan
Etienne,
Do you know if this has been changed recently? I'm looking to inverse the sizing. Currently, I am working with postitive and negative numbers, and DS is scaling them accordingly. However, in this case positive numbers are "bad" so we need to invert them to be the smaller bubbles, and negative numbers to be the larger bubbles.
Do you have any insight on this?
Thanks in advance,
Haley