Dipping my toe in the world of interactive mapping

“An image showing a map of the city of Melbourne. Cinemas are shown with a small icon of a movie projector and a bucket of popcorn, with different background colours showing whether the cinema is independent or a chain. A side panel is open showing the information for ACMI cinemas, with routes visible on the map for the nearest tram stop, train station, and car park
Where will your next movie night be?

I’m currently enrolled in the Masters of Geospatial Science at RMIT. As a part of that study, I had a chance to study cartography and visualisation, which is such a delightful intersection of my interests in design, UX, and programming.

For the final mapping assessment for this course, we were asked to create an interactive map for the residents of the City of Melbourne using Mapbox, Javascript, and HTML/CSS. The main requirement was to integrate off-street car parking data from the City of Melbourne Open Data portal, but apart from that the content of the map was left up to us.

As an avid movie fan, I thought it would be fun to map all the cinemas of the City of Melbourne, and provide interactive information on how to get to them, show times, how many screens they have, etc.

Data processing

I manually collected data on each of the cinemas from their websites and Google Maps. This was combined with point location data in ArcGIS Pro to produce a vector data layer that could be imported into Mapbox.

I took the a road polygons layer for the City of Melbourne, extracted the road centerlines, and created a connected road network for the city. I then used this road network, with the cinema locations, to find the route to the closest train station, tram stop, and car park for each cinema. These routes were exported for use with Mapbox as well.

Mapbox base layer styling

I took the “Dark Streets” base layer on Mapbox and modified it using colours from the Gruvbox Dark theme. I wanted to use a dark theme for the map to evoke the feeling of going out at night to the movies!

I also used Mapbox Studio to really cut down on the number of labels present in the basemap. As it’s targeted to local residents, and not intended for use as a navigation tool, I wanted to keep the map as clean as possible and focus on the points of interest: the cinemas.

Interactive map

I wanted to challenge my Javascript skills, so I knew that I wanted to add some interactive UI to the map. I designed a layout in Figma, then set about recreating it in code. The side panel was mostly straightforward, with most of my time on this project spent on polishing small UX tweaks: how the map zooms around, how the navigation data is loaded onto the side panel and map, and the general constraints on the map. As an avid dark-mode fan, I also added a toggle to allow users to select their preferred theme colour.

Design choices

“An image comparing how various map elements appear with standard vision and deuteranopia, the most common type of colour vision deficiency”
How different map elements appear with the most common CVD

The primary content of the cartography course was focussed on key accessibility and usability of cartographic products, so there are many decisions in this map that I’ve made very deliberately:

  • The colours used in the map are designed to be CVD accessible
  • The cinema location markers are also designed to be distinguishable visually (i.e. the “projector” faces in different directions) as well as by colour
  • The colour of the transit locations and routes are designed to be semantically salient for Melbourne residents, with the train and tram colours matching the brand styling of Metro Trains and Yarra Trams (the two public transport operators in Melbourne) respectively

Link to the finished map