In this guide, we will demonstrate the usage of fields relating to station type objects. Source code for this guide can be found here.
The following fields in the stationtypes field of the line object will be covered:
stypeIDstnnodesstnfonttypestnfontsizestnfontanglestntextoffsetstniconoffsetThe following fields in the stnnodes field of the station type object will be covered:
stationstrokewidthstationradiusstationwidthstationheightstationsvgscolorfcolordycomponenttypeFor this guide, we will use a number of simple and boring setups for showcasing usage of the station type object and its component nodes.
To begin this guide, we will cover Station Type Object fields - the ones that control fonts and offsets. These received coverage in the other guides, but will be revisited here. Below is a selection of different permutations of these fields.
"stationtypes": [
{
"stypeID": "STATION_TYPE1",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#66AA66"
}
]
},
{
"stypeID": "STATION_TYPE2",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#66AA66"
}
],
"stnfonttype": "'Times New Roman', 'serif'"
},
{
"stypeID": "STATION_TYPE3",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#66AA66"
}
],
"stnfonttype": "'Times New Roman', 'serif'",
"stnfontsize": 20
},
{
"stypeID": "STATION_TYPE4",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#66AA66"
}
],
"stnfonttype": "'Times New Roman', 'serif'",
"stnfontsize": 20,
"stnfontangle": 20
},
{
"stypeID": "STATION_TYPE5",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#66AA66"
}
],
"stniconoffset": 32,
"stntextoffset": 32
}
],
Station Type 1 contains a simple circle (the default for a station node is a circle). 2, 3, and 4 add font type, size, and angle respectively. The final station showcases the text and icon offsets described in Guide 1.
Now we move onto the core part of this guide - the component nodes of station type objects.
The component nodes, defined in stnnodes, are the individual components that make up the station's graphical presentation. There are three types - CIRCLE, RECT, and CUSTOM. The default is CIRCLE - the other two must be manually specified by setting the value of componenttype to "RECT" or "CUSTOM".
We will start by discussing the basic circle fields. These include stationstrokewidth, stationradius, scolor, and fcolor, as well as dy.
"stationtypes": [
{
"stypeID": "STATION_TYPE1",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#66AA66"
}
]
},
{
"stypeID": "STATION_TYPE2",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 12,
"scolor": "#66AA66"
}
]
},
{
"stypeID": "STATION_TYPE3",
"stnnodes": [
{
"stationstrokewidth": 6,
"stationradius": 6,
"scolor": "#66AA66"
}
]
},
{
"stypeID": "STATION_TYPE4",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "black"
}
]
},
{
"stypeID": "STATION_TYPE5",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "white",
"fcolor": "#66AA66"
}
]
},
],
With the circle, nothing too special goes on - the fields only serve to allow access to standard SVG fields such as stroke width, stroke color, and fill color.
Next, we will cover basic RECT nodes. These have similar fields to that of the circle, but radius is swapped for height and width.
"stationtypes": [
{
"stypeID": "STATION_TYPE1",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationheight": 12,
"stationwidth": 12,
"scolor": "#66AA66",
"componenttype": "RECT"
}
]
},
{
"stypeID": "STATION_TYPE2",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationheight": 16,
"stationwidth": 12,
"scolor": "#66AA66",
"componenttype": "RECT"
}
]
},
{
"stypeID": "STATION_TYPE3",
"stnnodes": [
{
"stationstrokewidth": 6,
"stationheight": 12,
"stationwidth": 12,
"scolor": "#66AA66",
"componenttype": "RECT"
}
]
},
{
"stypeID": "STATION_TYPE4",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationheight": 10,
"stationwidth": 3,
"scolor": "#66AA66",
"componenttype": "RECT",
"dy": -3
}
]
},
{
"stypeID": "STATION_TYPE5",
"stnnodes": [
{
"stationstrokewidth": 2,
"stationheight": 12,
"stationwidth": 12,
"scolor": "#66AA66",
"componenttype": "RECT",
"dy": -10
}
]
},
{
"stypeID": "STATION_TYPE_NONE",
"stnnodes": [
]
},
{
"stypeID": "STATION_TYPE6",
"stnnodes": [
{
"stationstrokewidth": 0,
"stationheight": 8,
"stationwidth": 8,
"scolor": "#66AA66",
"componenttype": "RECT"
}
]
}
],
The usage of parameters for RECT nodes is relatively self-explanatory. Refer to Unit 1 for instructions on the tick style.
For most purposes, circles will outperform square station icons, as the usage of square icons is more situational.
Now we will cover combinations of different node components. Note that they are rendered in the order in which they appear - IE the first one defined will be below the later ones.
"stationtypes": [
{
"stypeID": "STATION_TYPE1",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#66AA66"
}
]
},
{
"stypeID": "STATION_TYPE2",
"stnnodes": [
{
"stationstrokewidth": 2,
"stationradius": 6,
"scolor": "#66AA66"
},
{
"stationstrokewidth": 2,
"stationradius": 6,
"scolor": "#0000FF",
"dy": 8
},
{
"stationstrokewidth": 2,
"stationheight": 4,
"stationwidth": 8,
"scolor": "#FFFFFF",
"dy": 4,
"componenttype": "RECT"
}
]
},
{
"stypeID": "STATION_TYPE3",
"stnnodes": [
{
"stationstrokewidth": 2,
"stationradius": 6,
"scolor": "#66AA66"
},
{
"stationstrokewidth": 2,
"stationradius": 6,
"scolor": "#0000FF",
"dy": 8
},
{
"stationstrokewidth": 2,
"stationheight": 4,
"stationwidth": 8,
"scolor": "#FFFFFF",
"dy": 4,
"componenttype": "RECT"
},
{
"stationstrokewidth": 0,
"stationradius": 3,
"fcolor": "#66AA66"
},
{
"stationstrokewidth": 0,
"stationradius": 3,
"fcolor": "#0000FF",
"dy": 8
}
]
},
{
"stypeID": "STATION_TYPE4",
"stnnodes": [
{
"stationstrokewidth": 2,
"stationheight": 16,
"stationwidth": 16,
"scolor": "#66AA66",
"componenttype": "RECT"
},
{
"stationstrokewidth": 2,
"stationradius": 4,
"scolor": "#66AA66"
}
]
}
],
Here we have two examples of transfer stations and an example where a circle is rendered on top of a square. For transfer stations, dy can be used to offset components and allow for good combinations. However, it may be necessary to cover unwanted parts of prior nodes.
Good references for combinations of nodes include our Helsinki example as well as the Salt Lake City example in Unit 3.
Finally we will discuss CUSTOM nodes. These use stationsvg to hold the SVG that makes up the component, stationwidth and stationheight to properly place the custom component, and dy for further positioning. The height and width are necessary since the Strip Map Generator does not know the dimensions of your custom SVG otherwise. You can utilize text, paths, etc.
Generally speaking, multiple components are utilized when doing custom SVG - for example, a letter or symbol on a circle/square, etc.
"stationtypes": [
{
"stypeID": "STATION_TYPE1",
"stnnodes": [
{
"stationsvg": "<rect x='0' y='0' height='24' width='24' stroke-width='4px' rx='6px' stroke='#66AA66' fill='white'></rect>",
"stationwidth": 24,
"stationheight": 24,
"componenttype": "CUSTOM"
},
{
"stationsvg": "<text x='12' y='12' font-family='Helvetica' font-size='16px' fill='#226622' text-anchor='middle' dominant-baseline='central'>M</text>",
"stationwidth": 24,
"stationheight": 24,
"componenttype": "CUSTOM"
}
]
},
{
"stypeID": "STATION_TYPE2",
"stnnodes": [
{
"stationsvg": "<polygon points='30,15 22.5,28 7.5,28 0,15 7.5,2 22.5,2' fill='#66AA66' stroke='white' stroke-width='1px'></polygon>",
"stationwidth": 30,
"stationheight": 30,
"componenttype": "CUSTOM"
},
{
"stationsvg": "<text x='12' y='12' font-family='Helvetica' font-size='16px' fill='white' text-anchor='middle' dominant-baseline='central'>M</text>",
"stationwidth": 24,
"stationheight": 24,
"componenttype": "CUSTOM"
}
]
},
{
"stypeID": "STATION_TYPE3",
"stnnodes": [
{
"stationstrokewidth": 2,
"stationradius": 12,
"scolor": "#66AA66",
"fcolor": "white"
},
{
"stationsvg": "<text x='12' y='12' font-family='Helvetica' font-size='20px' fill='white' text-anchor='middle' dominant-baseline='central'>🚈</text>",
"stationwidth": 24,
"stationheight": 24,
"componenttype": "CUSTOM"
}
]
},
{
"stypeID": "STATION_TYPE4",
"stnnodes": [
{
"stationstrokewidth": 2,
"stationwidth": 24,
"stationheight": 24,
"scolor": "#66AA66",
"fcolor": "white",
"componenttype": "RECT"
},
{
"stationsvg": "<text x='12' y='13.5' font-family='Helvetica' font-size='20px' fill='white' text-anchor='middle' dominant-baseline='central'>♿</text>",
"stationwidth": 24,
"stationheight": 24,
"componenttype": "CUSTOM"
}
]
}
],
For further examples, see our examples in Guide 1 and Internal Tests.