mrt-badges

A small service rendering the SVG station badges of Singapore MRT stations. You can then use the SVGs in your designs or render them in your website or do anything you want.

Usage

https://mrt-badges.joulev.dev/<station identifier>

where the station identifier is as follows:

• Each line part of each station starts with the line identifier followed by an optional number
• Standard transfer stations are separated by :
• Tap out to transfer stations are separated by -
• Wrap a code in curly braces (e.g. {JW1}) to render it with the dashed "under study" border. Only the wrapped code is dashed, so the rest of the badge keeps its solid border. (Some clients require the braces to be URL-encoded as %7B and %7D.)
• Use ?bg_<lineCode>=<hex> to set a custom line background colour and ?fg_<lineCode>=<hex|dark|light> to set a custom line foreground colour. The line code in the query parameter is case-insensitive, and custom backgrounds default to light foreground text. Example: ?bg_sl=d685a6. Do not use #, as that would be treated as a URL fragment and would not even reach the rendering server!

Read the examples below for more details.

Examples

Lines

• Thomson–East Coast Line: https://mrt-badges.joulev.dev/TEL

  

Single Line Stations

• Kent Ridge MRT station: https://mrt-badges.joulev.dev/CC24

  

• Founders' Memorial MRT station: https://mrt-badges.joulev.dev/TE22A

  

Standard Transfer Interchanges

• Orchard MRT station: https://mrt-badges.joulev.dev/TE14:NS22 (or NS22:TE14 depending on the order you want)

  

• Outram Park MRT station: https://mrt-badges.joulev.dev/EW16:NE3:TE17

  

• Tanah Merah MRT station: https://mrt-badges.joulev.dev/EW4:CG

  

Tap out to Transfer Interchanges

• Newton MRT station: https://mrt-badges.joulev.dev/NS21-DT11

  

LRT Stations

• Sengkang MRT/LRT station: https://mrt-badges.joulev.dev/NE16:STC

  

• Phoenix LRT station: https://mrt-badges.joulev.dev/BP5

  

Future Stations

Confirmed lines only, so Seletar Line is not included.

• Teck Ghee MRT station: https://mrt-badges.joulev.dev/CR12

  

• Pasir Ris MRT station: https://mrt-badges.joulev.dev/CP1:CR5:EW1

  

• Jurong East MRT station: https://mrt-badges.joulev.dev/JE5:NS1:EW24

  

Under Study Stations

Stations still "under study" on the future system map use a dashed border instead of a solid one. Wrap a code in curly braces to get this border. The brace applies to a single code, so you can mix a dashed "under study" code with solid existing codes in the same badge.

• JS2A MRT station: https://mrt-badges.joulev.dev/{JS2A}

  

• An under study line meeting an existing station, where only the new code gets the dashed border: https://mrt-badges.joulev.dev/{JS2A}:NS6

  

Custom Line Colours

• Say there is a Long Island line, #123456 in the future. Then: https://mrt-badges.joulev.dev/LL1?bg_ll=123456

  

• Custom background and foreground colours: https://mrt-badges.joulev.dev/SL1:TE1?bg_sl=fda5d1&fg_sl=dark

  

Why not, go wild!

• Downtown MRT and Marina Bay MRT are within a 15 minute walk so can be treated as one tap out to transfer station: https://mrt-badges.joulev.dev/DT17-NS27:TE20:CE2

  

• Well... https://mrt-badges.joulev.dev/EW1-NS2:NE3-CC4-DT5:TE6:CR7-JS8

  

Limitations

• Only supports horizontal for now, so an arbitrary direction like this is not supported

  

• The badges do not match 100% with official badges you see on official maps. The reason being we do not have the official vector graphic nor the official font. That said I think the version here should be very close to the official badges already.

Credits

• The font here is an unofficial clone of the LTA Identity font by JinGen Lim.

• The official system map by LTA as of 10 March 2024 and the unofficial future system map by bananasolid was used to study the colours and the dimensions of the badges. The future system map is also used to capture the screenshots in the limitations section above.

License

• The source code is MIT licensed.

• The service at https://mrt-badges.joulev.dev is provided free of charge on a best effort basis, meaning I will try all my best to keep it running but if personal reasons force me to bring it down, I will have to do that. Hence self-hosting is recommended: just run the Docker container somewhere.

Development

• bun dev to develop locally at http://localhost:3000

• bun check to run Biome checks