top of page
Search

Mapping Montreal Like You've Never Seen It: A Neon-Style Dark Map with Python

  • Writer: Zarrin Tasneem
    Zarrin Tasneem
  • Aug 3
  • 2 min read

Cities look different at night. Lights outline streets, bike paths glow with movement, and patterns emerge that daytime maps just don't capture. In this project, I set out to create a "night mode" map of Montreal, a visually stunning, interactive visualization that blends urban road networks, cycling infrastructure, and custom styles into a map that feels more like art than data.

All of it was built using Python, Folium, and OpenStreetMap data via OSMnx.


Why a Neon Map?

Standard maps are practical but I wanted something that’s also aesthetic, expressive, and fun to explore.

This map:

  • Uses a dark base layer to simulate night-time context

  • Highlights different road types with distinct neon-like colors

  • Overlays bike lanes in vibrant green

  • Includes a floating legend for readability

It’s perfect for urban data exploration, dashboard integration, or just a cool visual for presentations and portfolios.


What’s On the Map?

  • Motorways: Bright red

  • Primary/Secondary roads: Yellow to green

  • Residential & service roads: Lavender and pink

  • Bike network: Vibrant green lines overlaid on the base map

Each geometry was streamed and styled live from OpenStreetMap, and rendered using Folium inside a Jupyter Notebook.


How It Works (At a High Level)

  1. OSMnx pulls in Montreal’s entire drive network and bike network separately.

  2. Roads are grouped by their “highway” tag in OpenStreetMap (e.g., motorway, residential).

  3. Each group is styled with a custom color in Folium, over a dark CartoDB basemap.

  4. The bike network is layered on top for emphasis using a contrasting color.

  5. A custom HTML legend floats on the map so viewers can decode what they’re seeing.

All of this is displayed right inside a notebook — no web server, no exports, no need for GIS software.

ree

Figure 1: Shows a colorized road network of Montreal


ree

Figure 2: Shows the different road types in different colors

Why This Map is Unique

Most open data maps focus on clarity, not beauty. This map embraces aesthetic data visualization. It’s inspired by:

  • Transit maps

  • Video game HUDs

  • Cyberpunk cityscapes

Yet underneath, it’s 100% real GIS data, meaning you can add layers, perform analysis, and integrate with dashboards.


Applications

  • Urban mobility planning

  • Public engagement visualizations

  • Portfolio/UX demos

  • GIS education or art installations

You can also swap out the road network for:

  • Trees

  • Land use parcels

  • Transit stations

  • Pollution sensors


Want to Build Your Own?

If you’re familiar with Python and Jupyter, you can build this using:

  • osmnx for spatial data

  • folium for map rendering

  • shapely for geometry handling

Add-on ideas:

  • Animate bike traffic over time

  • Add click-to-reveal popups for landmarks

  • Integrate real-time data feeds


Final Thoughts

This neon Montreal map isn’t just eye-catching, it’s a gateway to reimagining how we see and share urban data. By combining open data with creative visualization, we can build tools that are not only functional, but beautiful.


Feel free to fork it, remix it for your city, or drop in your own spatial layers. The night is yours.

 
 
 

Comments


bottom of page