San Francisco is for lovers

Mapping iconic Valentine’s Day movie scenes set in San Francisco

Mapbox
maps for developers

--

San Francisco’s iconic Victorian architecture, historic trolley cars, and bustling streets make it a desirable spot for romcoms. What better place to fall in love, lose it, and somehow get it back all in an hour and a half? I wanted to see just how often San Francisco was the backdrop for romance movies, so using data from SFdata and FilmSF I mapped film locations of films ranging from classic romcom to mystery. It turns out, if you’ve got a go-to romance movie you’re planning on watching this Valentine’s day, it probably has at least one scene shot in San Francisco.

Styling the map

A lot of movies on the list are light-hearted romcoms, so I started with a Monochrome map style of a soft pink to keep the airy feeling. I added green and blue back into the map using the color palette to keep track of the map’s simplicity. Distinguishing every landuse would have been too busy for this map style and distracted from the iconography.

To keep the focus on the movie location icons, I removed points of interest icons and highway shields and exit signs. For any data visualization basemap, it’s best to strike a balance between a simple canvas and providing just enough contextual information for the user to understand the significance of the data.

Since the map is lightly colored and the text halos are white, I increased text legibility by changing the halo blur to 0 and slightly increasing the halo-width. This creates a crisper edge around the text.

Creating the icons

There are many ways to represent data: graduated circles, iconography, clusters, and so on. Because this dataset is relatively small and thematic, I decided to represent the data using iconography that matches the movies or genres themselves.

Left: Romcom icon | Middle: “The Princess Diaries” icon | Right: Clapper icon for other films, Axe Icon for “So I Married an Axe Murderer”
  • Romantic Comedies — Romcoms show that true love can conquer anything. While we may have rolled our eyes at some scenes, it’s hard to deny that romcoms are a must for Valentine’s. The icon is a combination of theater masks and hearts because a romcom always has love with a little drama.
  • The Princess Diaries — From Mia and Queen Clarisse’s heartfelt discussions over Sutro Baths to Queen Clarisse crash into a cable car, The Princess Diaries is a classic San Francisco coming-of-age romcom. To symbolize this I created a heart in a crown icon. This isn’t symbolic of Mia’s love for a boy, but rather a love for herself as she finds her confidence in who she is.
  • So I Married an Axe Murderer — From a not-at-all suspicious butcher shop in the Richmond to the busy intersection at Mission and 5th in SOMA, love finds a way between poet Henry and butcher Harriet. The icon represents Henry’s fear of Harriet being “Mrs. X,” a serial killer who kills her husband viciously with an axe, yet he continues to date and eventually marry her.
  • More Valentine’s films — The clapperboard is the universal icon for scenes. Explore the map to find out where these scenes occurred around San Francisco.

Once the icons were done, I uploaded them to Mapbox and added them to the map in Studio. Making a single symbol layer, I set the icon value to match based on the specific name of the films for The Princess Diaries and So I Married an Axe Murderer, the romcom genre, and a fallback value for the rest of the movies. The expression came out like this:

Add the style to your account to create a high-resolution print, or explore the dataset and make the map interactive. You can build on this map by adding your favorite date spots or where you met your better half. Check out our how-to video for uploading data and then our custom icons tutorials series to design the map in Studio and add interactivity with Mapbox GL JS. Be sure to share whatever cool map you make on Twitter with #BuiltWithMapbox.

cli

--

--

mapping tools for developers + precise location data to change the way we explore the world