Knowledge Base

Browse our knowledge base articles to quickly solve your issue.

Changing the size/colour of Map Pins

Note: This is a preview of functionality available in our next update, due for release on 25th November.

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.


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: #ff0000
  • Yellow: #ffff00
  • Blue: #0000ff
  • Green: #00ff00
  • Black: #000000
  • 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:


WHEN person_job_role = 'Director' THEN '-wb-map-pin-color:#00ff00; -wb-map-pin-scale:3.0;'
WHEN person_job_role = 'Manager' THEN '-wb-map-pin-color:#ff0000;-wb-map-pin-scale:1;'
ELSE '-wb-map-pin-color:#0000ff;-wb-map-pin-scale:0.5;'


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