Skip to Content

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:

default.PNG

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:

new_1.PNGnew_2.PNG

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Laurens Geraedts

    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:

    Etienne1.jpg

    For points I’m getting another result, which does not highlight the selection anymore:

    Etienne2.jpg

    Best regards,

    Laurens.

    (0) 
    1. Etienne Guilhaume Post author

      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.

      Capture.PNG

      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:

      Capture.PNG

      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

      (0) 
      1. Laurens Geraedts

        Hi Etienne,

        Thanks for your swift response. I’ve tried the workaround you suggested:

        Etienne3.jpg

        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.

        (0) 
        1. Etienne Guilhaume Post author

          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

          (0) 
  2. Jonathan Schultzberg

    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!

    (0) 
    1. Etienne Guilhaume Post author

      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

      (0) 
      1. Jonathan Schultzberg

        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

        (0) 

Leave a Reply