Customize your map backgrounds
From a database like Open Street Map or IGN, an interactive map is a stylized view of this geographical data. To build your product you will often enrich this data with content or services, depending on multiple factors: mobile application or website, its audience, its use case, etc.
In this blogpost we will go over the main concepts of styling a map background: why style? Which impact ? How?
1. A stylized view of geographic information
OpenStreetMap, IGN, TomTom : the map data providers are above all giant databases (the “planet” file on OpenStreetMap is 1,5 TeraBytes of data).
If today as users we consume interactive maps that load instantly several times a day it is because these databases are transformed and styled to be consumable — in other words understood and useful — by our brains on our different devices.
To transform these geographic databases into useful interactive maps, beyond the technical processes (transformation into vector or raster tiles) that allow them to be downloaded and displayed on our screens it is necessary to achieve an often unknown work of map styling.
Styling a map means first of all making a difficult choice: what information should be shown? What information should be omitted? Street names? Administrative’s buildings names? The shapes of buildings? Railroad tracks?
Considering the large amount of geographic information available today, choosing is primarily a matter of selecting and subtracting.
All of these choices reveal a hierarchy and must be applied to the 20 levels of zoom that take you from the globe to your street corner. These choices are quite subtle and we are not aware of the huge impact they can have.
Then each type of information chosen can and should be styled to differentiate it from the other items on the map, to highlight one type of information in relation to another, etc. For a “ traditional “ interactive map, there are already several dozens of types of elements — seas, rivers, streets, buildings, roads, fields, forests — for which you have to choose the color, the transparency, the fonts, etc.
And before starting, the question to ask yourself is: what is the purpose of styling my map?
2. Why do you need map styles?
With Google Maps for so long dominating the interactive map industry (but that’s changing, thankfully!), we may have forgotten that there are different styles of maps.
Today, interactive maps are at the center of many digital products: from media to delivery applications, from treasure hunts to government websites. As Wired states “ Maps became the new search box “.
The key rule is that the style of your interactive maps should match the style of your product. Ceding your design choices to Google or Apple through the default maps in Android and iOS is counterproductive (especially when you know that styling an interactive map can be done well, without effort, see below).
Here are some examples of guidelines that can influence your styling choices for your interactive maps.
2.1 — Style an interactive to match your brand
Your interactive maps must reflect the identity of your product, of your brand. It is an essential communication and interaction space for your users, they must find you on it.
The design is based on color’s configuration, especially for water, roads and lands. As the Louvre did very well with its map of artworks in the world by opting for lime shades matching their graphic charter.
The typography is also an integrated part of the styling choices. The name of the city, the streets, the structures…, all this must be in harmony with your image and your graphic charter as Colmar did on its map.
It is also possible to go even further by choosing a particular style of map to fit your product. Studios such as Stamen Design offer quite original styles such as “watercolor” or “toner”.
2–2 Tailor your map to your audience
Design should not take priority over usefulness, because an interactive map or plan always has a service purpose: to inform, to understand, to locate, to guide, etc. The use of your interactive maps and the objective of your product must therefore influence your choice of style.
Will your interactive map be used on screens in public spaces? Is it used on the move, for local information, or from a computer on large screens?
2–3 Advanced Styles: in-depth enrichments of your maps
Your base map sometimes requires particular enrichments: it can be about particular data layers or elements such as buildings which must be highlighted.
We can think for example of satellite images or elevation curves for “outdoor” themes.
On a more local front, building data can be enriched. For example, Hachette, for the interactive maps of its guide “Un grand week-end à Paris”, wanted to highlight specific buildings, with a particular style applied individually.
To go even further, the buildings can be viewed as interior plans or in 3D rendering. Thus, in addition to the background map in the federation’s colors and designed for mobile use in the Roland Garros application, the FFT wanted to integrate 3D models of the most emblematic courts into the maps of the application.
For the new Cité des Sports, the city of Issy les Moulineaux has enriched the base map with a simplified 3D model of the building and its different floors. The possibilities are endless!
Finally, if we talk about background map, it’s because you will enrich this canvas with information, with your messages in the form of points of interest, routes, areas, etc. This will be the subject of another blogpost!
3. Style your interactive maps like a professional
The possibilities are vast for styling your maps, but this effort of styling is within the reach of most people. You don’t need to be a geomatician or trained in GIS to create a background map that serves your brand, delights your users and enhances your content: several options are available to you, either on your own or with the help of experts.
3.1 Create a style in a few clicks
With the Wemap Pro online tool you have at your disposal a professional map creation tool, available to everyone. In this no-code environment, the customization of map backgrounds is done by a WYSIWYG tool for simple and effective settings.
3.2 A studio for advanced styles
Wemap integrates the Maputnik tool which allows you to setup : display, stylization of all the elements of the map background at all zoom levels. Beware it’s addictive!
Don’t worry, Wemap support is always available to help you design your maps.
3.3 Handmade map backgrounds
If you want to create a custom background map with buildings and 3D models, the Wemap graphics team is here to help you.
You have questions about the creation of customized backgrounds or about Wemap Pro features? The team is listening, contact us !
