Styled Maps: Interactive Map Design – Without Coding
Colorize the background differently, highlight roads and the topography, or on the contrary, create a bare minimum design. It is fun to design maps according to one’s own ideas and requirements. The best thing about it: with the right tools, you don’t even have to know how to program to design the map.
Place the most important thing in the foreground
Styled Maps are about more than just pure aesthetics. The point is to guide the user by making a statement about the targeted selection of information that is displayed on the map. In order to visualize data on a map, for example, certain labels such as highway numbers or points of interest should be removed so as not to distract from the essentials. It is better to use a simple, reduced map as a base. For other purposes, certain details can be useful: for example, nature reserves or infrastructure like airports or hospitals can be displayed.
Mapstylr and Mapbox Studio
Since at Ubilabs we especially works with the map services Google Maps and Mapbox, we want to present how Styled Maps work with these two services, and what you can do with them. The principle is very similar in the two cases.
For Google Maps, besides the Google Maps API Styling Wizard, there are numerous (free) tools on the web to create a personalized map design, for example Snazzy Maps or Mapstylr. We have created our examples with Mapstylr. When the final version of the map has been styled, a JSON is created via the “Get JSON” button; this is then integrated in a demo application on Codepen.
Mapstylr for Google Maps
Malte Modrow (Front-end Developer at Ubilabs) und Mirko Hamann (Designer at Ubilabs) created an example with three maps: On the left is the basic Google map, right is a reduced map, and underneath is a custom styled map with a nocturnal look.
See the Pen Google Maps standard + reduced by Malte Modrow (@mrMetalWood) on CodePen.
See the Pen Google Maps styled by Malte Modrow (@mrMetalWood) on CodePen.
Get your own style for Mapbox
The Mapbox maps are made with the help of Mapbox Studio. A base map and different layers can be selected through a menu. Mapbox proves its strengths quite quickly: on each zoom level, what is seen – and how it looks – can be determined. For example, you can define whether and in what color the country name appears on a specific zoom level. And on an another level it can again be defined with a different color.
For Mapbox we also created two examples for styled maps: on the left is the basic Mapbox map, right is a reduced map, and underneath is a custom styled map with a clean look.
See the Pen Mapbox standard and reduced by Malte Modrow (@mrMetalWood) on CodePen.
See the Pen Mapbox styled by Malte Modrow (@mrMetalWood) on CodePen.
Psychedelic: A different color on each zoom level
Our designer Raphael Jocham has taken it to the extreme with his “Psychedelic Map,” where he has defined each zoom level with different colors, which results in a unique effect while zooming.
See the Pen Mapbox psychadelic by Malte Modrow (@mrMetalWood) on CodePen.
If the ready-styled map is then integrated on one site, it must be coded a little bit. For a simple map, however, it can be quickly managed both through Google Maps and Mapbox.
The Styled Map integrated in the website
Let’s look at a simple setup for a Google map. In order to use the Google Maps API, it first must be integrated in the HTML page:
<script src="https://maps.googleapis.com/maps/api/js"></script>
Next, we need a container where the map is to be rendered. In order to be able to see the map later, one should also make sure that the container has a defined height and a width.
<div id="map"></div>
Subsequently, a simple map is created in JavaScript. For the simplest version, one must only define a center point and a zoom level in order for the map to be displayed.
<script>
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53.5617303,
lng: 9.9835443
},
zoom: 14
});
</script>
Next step for Google Maps
Now we have a base map with the standard styles from Google. If we want to use our author styles, we need only include a “styles” attribute with the exported JSON (i.e. from Mapstylr or Snazzy Maps) when creating the map. For reasons of space, the entire JSON is not shown here.
<script>
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53.5617303,
lng: 9.9835443
},
zoom: 14,
styles: [{
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
} ...]
});
</script>
Finished.
Next step for Mapbox
In Mapbox, the whole thing works quite similarly. Again, the API must initially be included.
<script src='https://api.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.css' rel='stylesheet' />
The appearance of the Mapbox card is also determined as a “style” attribute when creating the map. Both a JSON as well as a URL of Mapbox can be indicated. Both can be viewed or downloaded in Mapbox Studio through the created style.
<div id="map"></div>
<script>
mapboxgl.accessToken = <YOUR_ACCESS_TOKEN>;var map = new mapboxgl.Map({
container: 'map',
center: [9.9835443, 53.5617303],
zoom: 13,
style: "mapbox://styles/ubilabs/citbje2be002l2hrzs7gs8294"
});
</script>
Done!