TTC Interactive Transit Map

An interactive map of Toronto’s TTC subway and streetcar network, extended to include under-construction and proposed lines. Try it out here.

Overview

This project enhances the official TTC map by incorporating future transit expansions into a single, unified visualization. It combines graphic design and frontend development to create a more informative and engaging transit tool.

Features

• Includes subway, LRT, and streetcar lines
• Adds under-construction routes (YNSE, Eglinton Crosstown West, Ontario Line, Scarborough Subway Extension)
• Clickable stations with interactive information display
• Clean, consistent design based on the original TTC map

Tech Stack

• Adobe Illustrator – for editing and extending the base map
• JavaScript – for interactivity and station data display
• HTML/CSS – for structure and styling

How It Works

The original TTC map was modified in Adobe Illustrator to include additional transit lines while preserving its visual style. The map was then integrated into a web interface where JavaScript enables users to click on stations and view relevant information.

How To Use

The project runs from the index.html file. The map.svg file is fetched and placed in the index.html file using JavaScript. From the index file, it is possible to hover and click on different stations.

To view the project locally, download the repo. Because the SVG is placed in the HTML file using fetch(), browsers will block the fetch call, making the project invisible. Running from a local server, or even opening the index.html file in VS Code and viewing it from there will work.

If you do not wish to do so, the project can also be viewed from here.

What's Next

• Finish adding station data and information
• Show each station's connection options to different subway, LRT, streetcar, and bus routes, as well as routes from other transit providers