In this guide, we will demonstrate the usage of fields relating to stations. Source code for this guide can be found here.
The following fields in the stations field of the line object will be covered:
namestationtypeiconsdyiconshifttextoffseticonoffsetxshiftThe following fields in the stationtypes field of the line object will be covered:
stntextoffsetstniconoffsetOur unfortunate victim will be Ankara Metro Line 1 (map as of Dec 2018). Disclaimer: Please note that some of the changes that we will make will be done solely for the sake of explaining the features that come with the Strip Map Generator. Some of the things we will be doing are NOT recommended when it comes to this particular strip map. Some of the changes will NOT result in an accurate portrayal of the real world metro line.
For now, let us observe the code used to generate Kızılay.
{
"name": ["Kızılay"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEM2_ANK"],
["ICON_LINEAKR_ANK"]
]
}Here we are only using the three required features - name, stationtype, and icons. Our basic station type for this map is a simple circle, as you can see below.
"stationtypes": [
{
"stypeID": "STATION_TYPEA",
"stnnodes": [
{
"stationstrokewidth": 4,
"stationradius": 6,
"scolor": "#DD0000"
}
]
}
]Currently, we have two rows of icons, one for the connection to M2, and the other for the connection to the Ankaray.
We will now discuss the four optional parameters for stations.
Let's begin with dy. We will focus on the first three stations and perform different offsets for each. We have adjusted the main line for this example (so that it still connects the station icons) and have also provided the original straight line in a lighter color.
"stations": [
{
"name": ["Kızılay"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEM2_ANK"],
["ICON_LINEAKR_ANK"]
],
"dy": 64
},
{
"name": ["Sıhhiye"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEBKR_ANK"]
],
"dy": 32
},
{
"name": ["Ulus"],
"stationtype": "STATION_TYPEA",
"icons": [
]
},
{
"name": ["Atatürk Kültür Merkezi"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEM4_ANK"]
],
"dy": -32
},
{
"name": ["Akköprü"],
"stationtype": "STATION_TYPEA",
"icons": [
],
"dy": -64
}
]As you can observe, by adding a value for dy, we offset both the station and its name as well as the icons. Setting a negative value for dy makes them shift up. Setting a positive value makes them shift down. Values are in pixels.
Now, let's observe the change that occurs when adding iconshift and setting iconshift to false (iconshift is set to true by default).
{
"name": ["Kızılay"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEM2_ANK"],
["ICON_LINEAKR_ANK"]
],
"dy": 64,
"iconshift": false
},
{
"name": ["Sıhhiye"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEBKR_ANK"]
],
"dy": 32,
"iconshift": false
}
...
{
"name": ["Atatürk Kültür Merkezi"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEM4_ANK"]
],
"dy": -32,
"iconshift": false
}As seen in the example above, setting iconshift to false prevents the icons from shifting with the station and station name.
dy is a commonly used field due to the prevalence of branching lines, where there may be a need to move stations, station names, and perhaps icons. iconshift may have niche uses where moving the icon is undesirable (due to visibility concerns - especially where there are branches too close together, etc).
Next we will cover text and icon offsets. These are the distance between the center of the station icon and the text/icons themselves. textoffset and iconoffset default to 0 on individual stations, but their corresponding values for station type objects (stntextoffset/stniconoffset) default to 16. Positive values for the text offsets move the text up, while positive values for the icon offsetsmove the icons down. In contrast to dy, which moves the icon AND the text, textoffset and iconoffset and the corresponding values for station type objects only move the text/icons themselves. dy as well as stn****offset and ****offset all stack, though dy is added on as an absolute translation downwards. This is particularly useful if your station icons are particularly large or if they are variable sized.
In the next guide, we will cover cases where this text offset is necessary for readability.
{
"name": ["Kızılay"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEM2_ANK"],
["ICON_LINEAKR_ANK"]
],
"textoffset": 64
},
{
"name": ["Sıhhiye"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEBKR_ANK"]
],
"textoffset": 32
},
{
"name": ["Ulus"],
"stationtype": "STATION_TYPEA",
"icons": [
]
},
{
"name": ["Atatürk Kültür Merkezi"],
"stationtype": "STATION_TYPEA",
"icons": [
["ICON_LINEM4_ANK"]
],
"textoffset": -32
},
{
"name": ["Akköprü"],
"stationtype": "STATION_TYPEA",
"icons": [
],
"textoffset": -64
}As can be observed, there is still an initial offset maintained. when no textoffset is specified and it is additive with the specified text offsets (in pixels).
Let's see stntextoffset used in a realistic scenario. Here we also use stniconoffset. Since we are applying the same offsets on a station type basis, we make the changes to the station type versions (stntextoffset/stniconoffset) rather than the station object versions (textoffset/iconoffset).
"stationtypes": [
{
"stypeID": "STATION_TYPEA",
"stnnodes": [
{
"stationsvg": "M ",
"stationwidth": 40,
"stationheight": 40,
"scolor": "#DD0000",
"componenttype": "CUSTOM"
}
],
"stntextoffset": 28,
"stniconoffset": 28
}
],Here we have created a custom station icon that is 40x40. Without the text and icon offsets, the text and icons would render on top of the icon itself. As this is undesirable, stntextoffset and stniconoffset provide much needed offsets for a more pleasant map.
xshift is one of the more unique attributes that can be applied to a station. Its primary use is with branching lines - see Helsinki Example for a working example.
For now, we will review what xshift does.
xshift, along with the startpoint and endpoint attributes of the stroke object definitions, work in units of stations rather than pixels. The five lines in blue are drawn at positions 0, 1, 2, 3, and 4, respectively.
Let's say (for sake of example) that we want to shift the terminals in by a distance equivalent to a quarter of the distance between stations.
{
"name": ["Akköprü"],
"stationtype": "STATION_TYPEA",
"icons": [
],
"textoffset": -28,
"iconoffset": 28,
"xshift": 0.25
},
...
{
"name": ["Hastane"],
"stationtype": "STATION_TYPEA",
"icons": [
],
"textoffset": -28,
"iconoffset": 28,
"xshift": -0.25
}The blue lines here mark quarter segments of the standard distance between two stations as defined by the number of stations. As you can see, xshift has shifted the terminals by exactly one of these one quarter segments.
Of course xshift is not useful at all for this particular scenario, but it is quite useful for more complex lines.
Refer to Unit 2 of the User Guide for an example on how to utilize xshift with branching lines.