Skip to main content
Skip table of contents

Configure Mapping Colours

In Map View, users can choose from a selection of colour palette options. These options determine which colours are used to display data on the map. For example:

You can configure the options that are available in this menu by using the cfg command in SuperADMIN.

Any changes you make are applied immediately. Any users who are currently logged in will not see the changes until they return to the catalogue page and reselect one of the datasets.

Define the Colour Swatches

The colour palette for Map View is defined as a series of swatches, containing the name of the palette (this will be shown in the drop-down list) and the hexadecimal colour codes of each of the available colours. For example, the LightBlue-Grey option shown above uses following colour codes:

CODE
{
    "name" : "LightBlue-Grey",
    "colours" : ["#2D78D7", "#55A5E1", "#96D7E6", "#E6F5EB", "#FFFFF2"]
}

Check Which Swatches Are Currently Defined

To check which swatches are currently defined, use the following command in SuperADMIN:

CODE
cfg global superweb2.mapping.palette.swatches

For example:

CODE
> cfg global superweb2.mapping.palette.swatches
superweb2.mapping.palette.swatches :
[
    {
        "name":"Red-Grey",
        "colours":[
            "#FA463C",
            "#F57350",
            "#F5AA8C",
            "#FAF0E1",
            "#FFFFF2"
        ]
    },
    {
        "name":"Yellow-Grey",
        "colours":[
            "#FAA02D",
            "#F5C35A",
            "#F5DC8C",
            "#FAF0E1",
            "#FFFFF2"
        ]
    },
    {
        "name":"LightBlue-Grey",
        "colours":[
            "#2D78D7",
            "#55A5E1",
            "#96D7E6",
            "#E6F5EB",
            "#FFFFF2"
        ]
    },
    {
        "name":"DarkBlue-Grey",
        "colours":[
            "#2D55C8",
            "#5A82E1",
            "#82A5F0",
            "#DCE1F5",
            "#F2FFFF"
        ]
    },
    {
        "name":"LightGreen-Grey",
        "colours":[
            "#6EA532",
            "#91C35A",
            "#BEE17D",
            "#E6F5EB",
            "#FFFFF2"
        ]
    },
    {
        "name":"DarkGreen-Grey",
        "colours":[
            "#326E3C",
            "#5F9B5F",
            "#A0D2A5",
            "#E6F5EB",
            "#FFFFF2"
        ]
    },
    {
        "name":"Purple-Grey",
        "colours":[
            "#DC3C73",
            "#DC6EAA",
            "#E1A0E6",
            "#E6E6FA",
            "#F2FFFF"
        ]
    }
]

In this example, there are 7 swatches defined (each one is enclosed in curly brackets). Each swatch defines 5 colour values.

Update an Existing Defined Swatch

To update one of the existing swatches, use the following commands:

Change the name of an existing swatch:
cfg global superweb2.mapping.palette.swatches[<swatch_index>].name set <name>
Replace all the colours defined for an existing swatch with a new list:
cfg global superweb2.mapping.palette.swatches[<swatch_index>].colours set <list_of_colours>
Update a single colour value in an existing swatch:
cfg global superweb2.mapping.palette.swatches[<swatch_index>].colours[<colour_index>] set <colour>

Where:

<swatch_index>

Identifies the swatch you want to update. Each swatch has a unique index number, starting from 0. For example in the above definitions, the Red-Grey swatch is number 0, and the Yellow-Grey swatch is number 1.

<name>
The name of the swatch. This will be displayed in the drop-down list in SuperWEB2 Map View.
<list_of_colours>

A list of colours to set for this swatch. Specify the colours as hexadecimal values, enclosed in double quotes, separated by commas, and with the entire list enclosed in square brackets.

This will completely replace the existing colours defined for this swatch.

<colour_index>
The index value of a specific colour to update. The colour values are also indexed, starting at 0.
<colour>
A hexadecimal colour value. For example: red is represented in hexadecimal as "#FF0000"

If you change any of the existing swatch colours, add new colours, or change the names of any of the swatches, then you will also need to create or update the PNG images that are used in the legend in PDF downloads. See the section on changing colours below for more information.

For example:

Change the name of the DarkGreen-Grey swatch:

CODE
> cfg global superweb2.mapping.palette.swatches[5].name set "DarkGreenToGrey"
superweb2.mapping.palette.swatches[5].name : Updated

Swatch names do not currently support spaces. Although swatches with these names will appear in the drop-down list in Map View, users will not be able to download PDFs.

Replace the colours for the LightBlue-Grey swatch:

CODE
> cfg global superweb2.mapping.palette.swatches[2].colours set ["#3D78D7","#35A5E1","#36D7E6","#36F5EB","#3FFFF2"]
superweb2.mapping.palette.swatches[2].colours : Updated

Update the final colour value in the Red-Grey swatch from #FFFFF2 to #EEEEEE:

CODE
> cfg global superweb2.mapping.palette.swatches[0].colours[4] set "#EEEEEE"
superweb2.mapping.palette.swatches[0].colours[4] : Updated

Using Unicode Characters in Swatch Names

If your swatch names contain Unicode characters, you may need to change a setting on the Tomcat server to ensure that users can download PDFs.

Click here to learn more...

When users download a PDF, SuperWEB2 needs to load the PNG images so that it can include them in the legend. If your swatch names have Unicode characters then the PNG files will also have Unicode characters. To ensure that SuperWEB2 can access them, you need to make sure that your Tomcat server is configured to use UTF-8 encoding in URLs.

This setting is not enabled by default. To make the change:

  1. Open <tomcat_home>\conf\server.xml in a text editor.
  2. Locate the following section:

    XML
    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" />
  3. Add URIEncoding="UTF-8" to the Connector:

    XML
    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" 
               URIEncoding="UTF-8" />
  4. Save your changes and restart the Tomcat service.

Add a New Swatch

To add a new swatch, use the same commands as above to set the name and colours, but simply make sure that you use the next index value up.

For example, if you wanted to add a new eighth swatch to the seven existing ones shown above (index values 0 - 6) you would use the index value of 7:

CODE
> cfg global superweb2.mapping.palette.swatches[7].name set "Grey-Green"
superweb2.mapping.palette.swatches[7].name : Created
> cfg global superweb2.mapping.palette.swatches[7].colours set ["#FFFFF2","#E6F5EB","#A0D2A5","#5F9B5F","#326E3C"]
superweb2.mapping.palette.swatches[7].colours : Created

Changing Colours in Swatches

If you make any changes to the swatch colours, rename any of the swatches, or add new swatches, then you also need to update the PNG images in <tomcat_home>\webapps\webapi\mapping\mapview.

This directory must contain a PNG for every colour in every swatch:

These PNG images are used in the legend in PDF downloads, so you need to keep them synchronised with any changes that you make in SuperADMIN.

Each image must be:

  • In PNG format.
  • 24 pixels wide by 14 pixels high.
  • A solid block of colour that matches the corresponding colour defined in the swatch.
  • Named using the name of the swatch followed by an index value that corresponds to the colour it represents in the swatch. The .png extension in the filename must be lower case.

    Index numbering for the PNG filenames starts at 1, rather than 0. So if you update the first colour defined in the Red-Grey swatch in SuperADMIN (using the command cfg global superweb2.mapping.palette.swatches[0].colours[0] set <colour>) then you need to update Red-Grey1.png to match your new colour value.

    If you rename any of the swatches in SuperADMIN, you will need to update all the corresponding PNGs so that they use the updated name in their filenames.

Set the Default

The default colour swatch is shown first when you switch to Map View. One of the configured colour palettes must be set as the default.

To check which colour swatch is currently set as default, use the following command:

CODE
cfg global superweb2.mapping.defaultPalette

For example:

CODE
> cfg global superweb2.mapping.defaultPalette
superweb2.mapping.defaultPalette : "Red-Grey"

To change the default colour palette, use the following command:

CODE
cfg global superweb2.mapping.defaultPalette set <name>

Replace <name> with the name of one of the swatches defined in superweb2.mapping.palette.swatches. For example:

CODE
cfg global superweb2.mapping.defaultPalette set "LightBlue-Grey"

The value must match one of the defined swatches exactly (case sensitive). If there is no swatch defined with this name, or if defaultPalette is not defined, then users will not be able to access Map View.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.