Placeholder

Knowledge Base

Browse our knowledge base articles to quickly solve your issue.

Changing the size/colour of Map Pins

It is possible within the Report to change the colour and size of the Map Pins with custom criteria which is applied through a calculated column, like other CSS Styling.

kb_maps_pincolours_large.png

Colour coding Map Pins is made of two parts:

  • -wb-map-pin-color:#000000 - this defines the colour of the pin.
  • -wb-map-pin-scale:0.5 - this defines the size of the pin.

The colours are defined through Hexadecimal values, a few examples include:

  • Red: #c12e28
  • Yellow: #edc20b
  • Blue: #3f7ec1
  • Green: #38a582
  • Black: #1a1e25
  • White: #ffffff

Note: For a complete guide on Hexadecimal colours we would recommend referring to guide such as W3 Schools.

The Scale of the Pin can be set anywhere between 0.5 and 3

The easiest way to set up the colour coding will be through a CASE statement such as below:

CASE 
WHEN person_job_role = 'Director' THEN '-wb-map-pin-color:#38a582; -wb-map-pin-scale:1.2;'
WHEN person_job_role = 'Manager' THEN '-wb-map-pin-color:#c12e28;-wb-map-pin-scale:1;'
ELSE '-wb-map-pin-color:#3f7ec1;-wb-map-pin-scale:0.8;'
END

The above translates to;

  • When the Person’s job title is Director then the Map Pin will be Green and Large
  • When the Person’s job title is Manager then the Map Pin will be Red and Regular sized.
  • Otherwise the pin will be blue and small.

You can find a worked example of changing the colour and size of the Map Pin based on a Person’s Job Title in our Forum. 

Related content