Guide 3 - Icon Definitions and Usage

In this short guide, we will demonstrate the usage of fields relating to icon objects. We will also discuss Text Icons and the ways in which icons can be rendered as part of a station. Source code for this guide can be found here.

The following fields in the icons field of the icon object will be covered:

• iconID
• height
• width
• scale
• iconSVG
• iconlink

In this guide, we will showcase a variety of icon types, as well as how to handle scaling/centering as well as usage of more advanced icon features.

Required Icon Object fields

To begin this guide, we will cover the basic required fields.

        {
            "iconID": "ICON_BLUE",
            "height": 48,
            "width": 48,
            "scale": [1.0, 0.67],
            "iconSVG": ""
        }

Every icon must have an Icon ID - this is the ID used to refer to the icon in the icons field of the station objects. In addition, each icon has a height and width. This is because whatever you place in the SVG itself may have arbitrary size, and it is necessary to be able to center the icon appropriately when rendering on the Strip Map.

Currently, scale contains two values. The height and width are multiplied against these, with the first one referring to the size for the main line icon at the top left of the map next to the line name, and the second one referring to the size of the icons rendering under the stations.

Finally, the iconSVG field contains the actual SVG for the icon. Pretty much anything can go in here, but keep in mind that the (0, 0) point is the top left as far as rendering is concerned. You will need to center the icon appropriately, or adjust the height and width to render the icon as intended.

Optional Icon Object fields

Currently, the only optional field for icon objects is iconlink, which allows for an icon to function as a link to another webpage or location on the same page.

"iconlink": "./test-internal.html#line1112"

Usage is quite simple. Place the relative or absolute url for the target to link to.

Icon Usage

Now we will go over some basic usage of icons.

    "stations": [
        {
            "name": ["Single Icon"],
            "stationtype": "STATION_TYPE1",
            "icons": [
                ["ICON_TURQUOISE"]
            ]
        },
        {
            "name": ["Vertical"],
            "stationtype": "STATION_TYPE1",
            "icons": [
                ["ICON_RED"],
                ["ICON_BLUE"],
                ["ICON_ORANGE"]
            ]
        },
        {
            "name": ["Side by Side"],
            "stationtype": "STATION_TYPE1",
            "icons": [
                ["ICON_AQUA", "ICON_AQUAMARINE", "ICON_TURQUOISE"],
                ["ICON_RED", "ICON_PINK", "ICON_HOTPINK"]
            ]
        },
        {
            "name": ["Combination"],
            "stationtype": "STATION_TYPE1",
            "icons": [
                ["ICON_AQUA", "ICON_AQUAMARINE", "ICON_TURQUOISE"],
                ["ICON_PINK", "ICON_HOTPINK"],
                ["ICON_PURPLE"]
            ]
        },
        {
            "name": ["Icon as Station Type"],
            "stationtype": "STATION_TYPE1",
            "icons": [
                ["ICON_OTHER"]
            ],
            "iconoffset": -32
        }
    ]

In the icons field, which is an array of lists, each list represents a single 'row'. Multiple icons can be placed in each row, as seen in the Side by Side example. Multiple rows can be applied as well.

Fields that influence icon placement such as the various offsets will offset all icons. Some niche uses of this include utilizing an icon as the station icon by covering the existing station with the icon, but this is discouraged unless the situation calls for it.

Text Icons

Finally, a brief note about Text Icons. Text Icons are partially a way to inform the map creator of errors with their Icon IDs, and partially a way to allow arbitrary text. Text Icons settings are controlled via fonttype and texticonfontsize fields on the main line object.

    "stations": [
        {
            "name": ["Basic Text Icons"],
            "stationtype": "STATION_TYPE1",
            "icons": [
                ["Bus Terminal"]
            ]
        },
        {
            "name": ["Combined Icons + Text Icons"],
            "stationtype": "STATION_TYPE1",
            "icons": [
                ["ICON_PURPLE"],
                ["National Rail"],
                ["Airport"]
            ]
        },
        {
            "name": ["Text Icons for Vertical Text"],
            "stationtype": "STATION_TYPE2",
            "icons": [
                ["平"],
                ["和"],
                ["通"],
                ["り"],
                ["ICON_AQUA"]
            ]
        }
    ]

Limitations and creative uses of Text Icons both exist. One limitation is that text icons must be the only icon in their respective row - text icons combined with other text icons and regular icons on the same row are not supported. Creative uses include using Text Icons for vertical text such as Chinese and Japanese.

For further examples, refer to the internal tests and other guides.