This page serves to document all of the customization options available.

The primary component of a strip map is the line, including stations and text. The SVG Strip Map Generator provides the following features.

Each line object has the following fields. Required fields are in red, Optional fields are in blue.

X and Y transforms require special note, as while Y transforms are all in pixels, most X transforms are in terms of stations and the distance between stations (which is calculated automatically based on the number of stations).

All fields that take pixel values must be numbers and NOT Strings. While "16px" may be fine in some cases, the values are often used as numbers in calculations.

• linename - Name of the line. Displayed on each generated strip map in the top left.
• iconID - Array of the large icons to use for this line. Displayed to the left of the line's name.
• strokes - Array of line stroke objects. See below for specification.
• stationtypes - Array of station type objects. See below for specification.
• stations - Array of station objects. See below for specification.
• darkmode - Optional Dark Mode toggle. Set this to true to enable dark mode.
• key - Optional Map Key. See below for specification.
• canvasheight - Canvas Height. Defaults to 480 pixels.
• canvaswidth - Canvas Width. Defaults to 2000 pixels.
• lineheight - Line Height. Controls how far down vertically the main line is. Defaults to 240 pixels.
• linestart - Line Start x coordinate. Controls where the main line starts. Defaults to 128.
• lineend - Line End x coordinate. Controls where the main line ends and is used in determining the spacing between stations. Defaults to 1800.
• stationspacing - If set, locks the distance between stations to the specified value (in pixels). This completely disables the built-in automatic spacing. When using this option, the line strokes will also be scaled as their positions are based on the station spacing. In addition, the value of lineend, if set, is unused. Use this for left-aligned constant spaced maps.
• locknumstations - If set, locks the spacing of stations to the generated default but with the number of stations specified here rather than the number of stations in the stations field of this line object. When using this options, the line strokes will NOT be scaled - their start and end positions will utilize the number of stations in the stations array. Use this for loop lines/non-straight maps. Does not work in conjunction with stationspacing.
• fonttype - Font type to use for general text (e.g. title). Defaults to "Arial".
• texticonfontsize - Font size to use for text icons. Defaults to 20.
• maincustomsvgbg - Custom SVG (renders in the background).
• maincustomsvgfg - Custom SVG (renders in the foreground).
• extraicons - Array of extra icons (standard + text) rendered on map. See Icons section for specification

The required strokes field of the line object is an array of objects that has the following options.

• color - The color of the line. Supports Hex, RGB, and HTML/CSS standard colors.
• strokewidth - The width of the line.
• startdx - The horizontal offset of the start of the stroke (in pixels, not stations). Offsets based off of startpoint.
• enddx - The horizontal offset of the end of the stroke (in pixels, not stations). Offsets based off of endpoint.
• dy - The vertical offset of the stroke.
• startpoint - The starting station of the stroke. Can be negative to extend line offscreen to the left.
• endpoint - The ending station of the stroke. Can be greater than number of stations on line to extend line offscreen to the right.
• startlinkheight - The vertical offset from the stroke for the endpoint. Enables horizontal and angled portions. It is suggested to set linecap to "round" to cover the breaks in the lines if using angles.
• endlinkheight - The vertical offset from the stroke for the startpoint. Enables horizontal and angled portions. It is suggested to set linecap to "round" to cover the breaks in the lines if using angles.
• dasharray - Sets the stroke-dasharray field for the stroke. Should be a string of comma delimited numbers, e.g. 4,4
• linecap - Sets the stroke-linecap field for the stroke. Should be "butt" (svg default if field not provided), "square", or "round"

The required stationtypes field of the line object is an array of objects that has the following options.

• stypeID - The ID for the specified station, for cross referencing later.
• stnnodes - Array of nodes that are part of the station. See below for specification.
• stnfonttype - Font Type to use for station names (for this type of station). Default is "Arial".
• stnfontsize - Font Type to use for station names (for this type of station). Default is 16px.
• stnfontangle - Angle offset at which to render station names (for this type of station). Default is 45 (degrees).
• stntextoffset - Sets y offset for text (distance between center of station icon and text). Defaults to 16px, with positive values going upwards. Stacks with an individual station object's dy and textoffset.
• stniconoffset - Sets y offset for icon (distance between center of station icon and text). Defaults to 16px, with positive values going downwards. Stacks with an individual station object's dy + iconshift and textoffset. This value must be provided as an integer - IE 32, not "32". This is due to the way JavaScript handles strings.

Each object in stnnodes contains the following options.

• stationstrokewidth - The stroke width of the station icon components. Not used in CUSTOM.
• stationradius - The radius of the circle station icon component. Only used in CIRCLE.
• stationwidth - The width of the station icon component. Not used in CIRCLE.
• stationheight - The height of the station icon component. Not used in CIRCLE.
• stationsvg - The svg of the station icon component. Meant for usage when circles and rectangles are insufficient (e.g. text/custom paths). Only used in CUSTOM
• scolor - The stroke color of the station icon component. Supports Hex, RGB, and HTML/CSS standard colors. Not used in CUSTOM. Defaults to "black".
• fcolor - The fill color of the station icon component. Supports Hex, RGB, and HTML/CSS standard colors. Not used in CUSTOM. Defaults to "white".
• dy - The vertical offset of the station icon component. Additive effect with same named field on the station objects.
• componenttype - The component type of the station icon component - possible values include "RECT" for rectangle and "CUSTOM" for custom station icons. If this field is not present, the component defaults to a circle.

The required stations field of the line object is an array of objects that has the following options. Note that stations go from left to right on the strip map.

• name - Name of the station as an array (in case of multiple names).
• stationtype - Station type associated with this station. Refers to a stypeID within stationtypes.
• icons - 2D Array of strings referring to icon IDs to attach to the station. These are rendered below the station icon, in order. First dimension is rows, second is columns.
• dy - The vertical offset of the station and station text. Does not affect rendering of icons. Additive effect with same named field on the stnnodes objects.
• iconshift - If set to false, will not apply dy shift to icons.
• textoffset - Sets additional y offset for text (distance between center of station icon and text). Defaults to 0, with positive values going upwards. Stacks with dy and station type object's stntextoffset.
• iconoffset - Sets additional y offset for icon (distance between center of station icon and text). Defaults to 0, with positive values going downwards. Stacks with dy + iconshift and station type object's stniconoffset.
• xshift - Offsets the station position using the distance between stations. Refer to Helsinki example for usage.
• customsvg - Array of custom station SVG objects.

The optional customsvg field of the station object is an array of objects that has the following options. This is optional and is primarily utilized for station numbers/elements that are different between stations. If used, width, height, and svg must all be provided. For a working example, refer to Test 3 in the Internal Test Suite.

• nodewidth - The width of the extra node.
• nodeheight - The height of the extra node.
• nodesvg - The svg of the extra node.

The optional key field of the line object is an object with two fields:

• stationtypes - Array of Station Types to display in the map key.
• lines - Array of Icons and Descriptions of lines to display in the map key.

Each object in the stationtypes array for the map key contains the following options.

• type - Station Type ID. The stypeID field in the main stationtypes object of the line.
• height - Height of the station icon. No default is provided. Note that text rendering for descriptions uses the texticonfontsize setting for its size. This value MUST be provided as an integer, not a string.
• width - Width of the station icon. No default is provided. This value MUST be provided as an integer, not a string.
• description - Text description for the station icon.

Each object in the lines array for the map key contains the following options.

• colwidth - Width of the column. The lines portion of the map key can be split up into multiple columns. The widths of the columns are specified using this field. No default is provided. This value MUST be provided as an integer, not a string.
• rowheight - Height of any given row in the column. No default is provided. Ensure that the value is larger than the second scale option of any icon you wish to display. We recommend values such as 32 or 40 for standard usage. This value MUST be provided as an integer, not a string.
• services - Array of services to display in the column. These use the iconID fields of the icon definition file. Text icons are not supported here. Descriptions will be generated using the description field of the associated icon object.

The SVG Strip Map Generator also uses reusable icon definitions.

Each icon object has a single icons field which is an array of objects with the following specification:

• iconID - ID of the icon. This ID is used to cross reference specific icons. Naturally, each ID must be unique.
• description - Description of the icon. Use in map keys, and is required if using a particular icon in a map key (or else the key is useless).
• height - Height of this icon (Recommended: 48)
• width - Width of this icon (Recommended: 48)
• scale - Scalings of this icon. First is the large icon (Displayed to the left of the line's name, Recommended: 1). Second is the small icon (Displayed under stations, Recommended: 0.67)
• iconSVG - SVG of the icon. The provided SVG should fit within the stated height and width.
• iconlink - URL that is traveled to when clicking the icon as a transfer icon.

The optional extraicons field of the line object object is an array of objects that has the following options. This is optional and is primarily utilized for through-running connections or where multiple lines share track. For a working example, refer to Test 3 in the Internal Test Suite.

As a convenience, text icons are supported by this method for the placement of arbitrary text on the map.

• iconID - The Icon ID of the extra icon.
• iconx - The x coordinate (in pixels) of the extra icon. Utilize this or iconx_stn.
• iconx_stn - The x coordinate (in stations) of the extra icon. Utilize this or iconx.
• icony - The y coordinate (in pixels) of the extra icon. Note that the line height defaults to 240, so use 240 in order to align the icon to the base line.