I’ve given my Meet Cute map somewhat romantic make-over. Utilizing MapLibre expressions and a little bit of artistic styling in Maputnik I’ve managed to remodel my Meet Cute base map into one thing that feels extra applicable for a procedural love-story map generator.
Reimagining Place Names with Expressions
MapLibre lets you dynamically change label textual content with expressions, supplying you with full management over what seems on the map. In my case, I didn’t simply wish to present “Seattle” – I needed to see “Sleepless in Seattle.”
Through the use of a case expression, I used to be capable of verify the primary letter of every metropolis or city title and swap it for one thing extra romantic. For instance:
- Cities beginning with S change into “Sleepless in …”
- Cities beginning with L change into “Love in …”
- Cities beginning with R change into “… Romance”
- Cities beginning with A change into “An Affair in …”
Right here’s a simplified snippet exhibiting 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 consequence? A world map the place cities and cities tackle the titles of romance motion pictures and love tales. As a substitute of London, you see “Love in London.” As a substitute of Rome, you’re reminded of “Rome Romance.” All of a sudden the geography itself feels extra like a part of the love-story theme.
Designing a Romantic Map Model with Maputnik
In fact, labels are solely half the story – the map’s colours set the temper too. To create a smooth, romantic ambiance, I turned to Maputnik, a visible editor for Mapbox/MapLibre types.
Utilizing Maputnik, I swapped out the same old earthy blues and greens for a hotter palette of blush pinks and lavender tones. The consequence seems like a valentine card painted internationally map.
As soon as the type was prepared, I merely exported the type.json from Maputnik and pointed my MapLibre map to it:
const map = new maplibregl.Map({
container: 'map',
type: 'path/to/romantic-style.json',
heart: [2.3522, 48.8566],
zoom: 2
});
A World of Love Tales
The mix of expressions and customized styling reworked a normal basemap into one thing far more romantic and poetic. Now, while you zoom throughout Meet Cute, each metropolis feels just like the title of a love story ready to be instructed – set in opposition to a basemap of heat, romantic colours.
