Guide 4 - Map Keys

In this short guide, we will demonstrate how to set up a map key. Source code for this guide can be found here.

Basics of Map Keys in the Strip Map Generator

The Strip Map Generator supports basic map keys for station types and services. The key attribute of the line object, if present, triggers generation of a map key, and it contains support for station types as well as lines - you can choose to only use one feature, or can choose to use both.

For the purposes of this guide, we will use the above strip map. Observe how below the main map there is a divider and then a description of the services and station icon types. The entire definition of the map key is below.

    "key": {
        "stationtypes": [
            {"type": "STATION_TYPE1", "height": 24, "width": 16, "description": "Request Station"},
            {"type": "STATION_TYPE2", "height": 24, "width": 16, "description": "Regular Station"},
            {"type": "STATION_TYPE3", "height": 24, "width": 16, "description": "Transfer Station"}
        ],
        "lines": [
            {"colwidth": 1000, "rowheight": 32, "services": ["ICON_BLUE", "ICON_RED", "ICON_ORANGE", "ICON_PURPLE", "ICON_AQUA"]},
            {"colwidth": 1000, "rowheight": 32, "services": ["ICON_AQUAMARINE", "ICON_TURQUOISE", "ICON_PINK", "ICON_HOTPINK"]}
        ]
    },

Now, naturally things have been left out of this snippet. Station type definitions and icon details, for example. However, the map key itself is quite simple to generate.

Station Types

First, let us cover station types. There are four required parameters and two optional ones. The station type definition used for this map is below.

    "stationtypes": [
        {
            "stypeID": "STATION_TYPE1",
            "stnnodes": [
                {
                    "stationstrokewidth": 4,
                    "stationradius": 6,
                    "scolor": "#66AA66"
                }
            ]
        },
        {
            "stypeID": "STATION_TYPE2",
            "stnnodes": [
                {
                    "stationstrokewidth": 2,
                    "stationradius": 8,
                    "scolor": "#66AA66"
                }
            ]
        },
        {
            "stypeID": "STATION_TYPE3",
            "stnnodes": [
                {
                    "stationstrokewidth": 2,
                    "stationradius": 8,
                    "scolor": "black"
                }
            ]
        }
    ],

The stationtypes attribute of the map key is an array consisting of all of the station types to describe in the map. You can be selective with regards to which ones to use. The type attribute matches the stypeID attribute, as this is how the station types are identified.

Note that the station type definitions may have a number of nodes, but actual dimensions are not specified. For the purposes of the map key, it needs to know how big the icons are so that it can render them properly. For this reason, height and weight parameters are required. There are also optional xoffset and yoffset attributes in case you used dy on a station type definition, so that it doesn't affect rendering. This is due to internal reuse of the same code, but the option should provide some extra flexibility if necessary.

Finally, the description is rendered with the font specification defined for text icons, using fonttype and texticonfontsize .

Station type descriptions each take up a whole row in the map key.

Line Descriptions

Next, line descriptions. Here multiple columns are supported. Note that the default width of the strip maps are 2000, so using a column width of 1000 works well for two columns. Besides colwidth, rowheight is a required field that notes the height of each row. For lines, uniform heights are required. This value should comfortably fit the tallest icon in use, on the second scale (the icon scale used for transfer icons).

Note that icons of differing widths are supported well here, and the widest icon in a column dictates the amount of space taken by icons in that column. For example, refer to below:

    {
            "iconID": "ICON_AQUA",
            "description": "Aqua Line",
            "height": 48,
            "width": 48,
            "scale": [1.0, 0.67],
            "iconSVG": ""
        },
        {
            "iconID": "ICON_LONGAQUA",
            "description": "Aqua Line Express",
            "height": 48,
            "width": 96,
            "scale": [1.0, 0.67],
            "iconSVG": ""
        },

Here, the Aqua Line Express, with a wider profile than the other lines at 96px in width, renders nicely alongside the other lines.

The actual services shown in the map depend on the services attribute, which is an array of icon IDs. A description must be provided to icons that are expected to be used in map keys (or else, what's the point, exactly?). Note that icons render using their second scale option. If icon links are part of an icon, they are supported in map keys.

With this, you should have the necessary tools to use map keys to their fullest extent.