No more stock Google Maps… Give your maps your own style!

Create custom map themes instantly from photographs that fit your brand’s visual style

Prasanta Kumar Dutta
Diario da Pacific
4 min readJan 2, 2018

--

Remember the last time when you had to place a screenshot of a map in your presentation or brochure or embed one in your website and you simply couldn’t get it to match your visual styles (read colours and fonts)?

Let me guess, it looked something like this —

Screenshot of Google map of a region in Bangalore, India

Well, it is not a child’s play to edit this map… it has got so many elements — the land, water, roads, buildings and so on.

Except for that it is now, with Cartogram, the awesome new tool from Mapbox.

Cartogram homepage — https://www.mapbox.com/cartogram/

Simply drag & drop an image on the page and the tool automatically selects colours from 5 reference points on the image, which you can move around to pick the desired colours from the image. Use the location tool to move the map to your location or any other location of your choice.

Voila! It’s that easy.

I have tried to create two map styles based on the famous painting by Salvador Dali The Persistence of Memory.

The Persistence of Memory (Catalan: La persistència de la memòria) is a 1931 painting by artist Salvador Dalí, and is one of his most recognizable works. (Source: Wikipedia)

The first map style is bold with high contrast between the elements. The 5 markers correspond to Land, Water, Roads, Buildings and Map Labels. The darkest colour is chosen for the land, which helps preserve the visual similarity between the image and the map. The other markers are placed on the prominent contrasting colours on the image.

Zoomed out view of the map with bold style
Map zoomed to southern part of India. Details like the roads and inland waters are visible.
Map zoomed to the city of Bengaluru. The buildings become visible.
On further zooming, the smaller roads appear and the buildings become more detailed.

The next map style is a subtle one, such that all the elements appear with minimal visual noise. These kind of styles are particularly helpful when you want to plot and focus on your own location points on the map and don’t want the map elements to cause much visual intrusion in your content.

In order to achieve this, I have used different variations (values) of the brown colour (picked from the image) in the map, thus preserving the wooden and soil hues that are prominent in the actual image.

Zoomed out view of Bengaluru in the minimal dark theme.
The browns dominate the colours on the map. Light hue of the brown on the map is used for the labels, instead of white to keep the contrast low.

Another variation of the minimal style in light hues.

The dark colour is used only for the labels. All other colours belong to the lighter regions of the image.

Once styled, you can use the maps for your use or save the styles in Mapbox studio for further customization and future use. Inside Mapbox studio, you can change the fonts used on the map, create colour ramps for the elements based on zoom levels and much more!

You can explore the map styles demonstrated here using the following links —

From the above explorations, you must have got a fair idea of the ease of map style customization using Cartogram and the possibilities for your next project!

You can see some really interesting things people have done using this tool in this post from the Mapbox Blog.

I learnt about this as a part of a session on thematic cartography at NID. Feel free to check out the map styles created by others using various images of classical paintings in this session.

--

--

Prasanta Kumar Dutta
Diario da Pacific

Crafting data stories @ReutersGraphics, Information Experience Designer, Front-end developer, Data Artist, Writer, Photographer. https://bio.link/pkddapacific