Love Story 2 - Dressed to Kill!

I have given my Meet Cute map a little romantic make-over. Using MapLibre expressions and a bit of creative styling in Maputnik I have managed to transform my Meet Cute base map into something that feels more appropriate for a procedural love-story map generator.

Reimagining Place Names with Expressions

MapLibre allows you to dynamically change label text with expressions, giving you full control over what appears on the map. In my case, I didn’t just want to show “Seattle” - I wanted to see “Sleepless in Seattle.”

By using a case expression, I was able to check the first letter of each city or town name and swap it for something more romantic. For example:

• Cities starting with S become “Sleepless in …”
• Cities starting with L become “Love in …”
• Cities starting with R become “… Romance”
• Cities starting with A become “An Affair in …”

Here’s a simplified snippet showing how this works:

map.setLayoutProperty('label_city', 'text-field', [
'case',
['==', ['slice', ['get', 'name'], 0, 1], 'S'],
['concat', 'Sleepless in ', ['get', 'name']],

['==', ['slice', ['get', 'name'], 0, 1], 'L'],
['concat', 'Love in ', ['get', 'name']],

['==', ['slice', ['get', 'name'], 0, 1], 'R'],
['concat', ['get', 'name'], ' Romance'],

['==', ['slice', ['get', 'name'], 0, 1], 'A'],
['concat', 'An Affair in ', ['get', 'name']],

['get', 'name'] // default ]);

The result? A world map where towns and cities take on the titles of romance movies and love stories. Instead of London, you see “Love in London.” Instead of Rome, you’re reminded of “Rome Romance.” Suddenly the geography itself feels more like part of the love-story theme.

Designing a Romantic Map Style with Maputnik

Of course, labels are only half the story - the map’s colors set the mood too. To create a soft, romantic atmosphere, I turned to Maputnik, a visual editor for Mapbox/MapLibre styles.

Using Maputnik, I swapped out the usual earthy blues and greens for a warmer palette of blush pinks and lavender tones. The result feels like a valentine card painted across the world map.

Once the style was ready, I simply exported the style.json from Maputnik and pointed my MapLibre map to it:

const map = new maplibregl.Map({
container: 'map',
style: 'path/to/romantic-style.json',
center: [2.3522, 48.8566], 
zoom: 2 });

A World of Love Stories

The combination of expressions and custom styling transformed a standard basemap into something much more romantic and poetic. Now, when you zoom across Meet Cute, every city feels like the title of a love story waiting to be told - set against a basemap of warm, romantic colors.