Why should I use this?
Maps can becomes very cluttered for users. All of the roads, rivers, labels, points of interest and more can quickly make it hard to
There are a number of reasons why you may wish to style your maps, such as:
- Hiding Points of Interest to free up space on your map
- Theming the map to match the colour scheme of your app
- Highlighting routes (roads) on the map
- Reducing the complexity of the map by removing landscapes
- Changing the style of the map based on the time of day
- Hide specific map elements that you do not wish to display
The reasons and possibilities are endless, so let’s dive in so you can get started implement this into your app 🙂
Setting the map style
Setting the map style is pretty simple to do within your application. Once you’ve got access to the map instance that you wish to theme, you can simple use the setMapStyle() method to pass in either a JSON string (maybe a value sent from your server or a users preference) or a RAW JSON file from your resources directory. We can then set this like so:
https://gist.github.com/hitherejoe/2006bce040efaa3a986d756a3f54d2ac
Within this JSON we can declare two main parts of the Google Map component to modify the styling, these are:
- Selectors — These are the geographic components on the map that can be styled, such as roads / parks/ rivers. You can also style the labels which are used for these components.
- Stylers — There are properties which can be used to alter both the colour and/or visibility if elements on the map.
Luckily for us, Google provide a handy tool to create this JSON file 🙌
Using the Google Maps Styling Wizard
Introducing the Google Map Styling Wizard — go check it out, it basically does all of the hard work for us!
We can do a number of things with this tool, such as adjust the density of the roads:
Or the density of landmarks:
or even the density of the labels displayed on the map:
And if that wasn’t enough, we can even change the complete look and feel of the map by choosing one of 6 options 😱
Pretty neat, huh? 😍
So that’s all of the simple styling, there is so much more that we can do with the wizard. If you click the little MORE OPTIONS button you’ll be presented with an advanced menu of options. From this menu we can customise the style for:
- Geometry — Change properties for both the fill and stroke for geometric components within the map.
- Labels — Change properties for the text fill / outline and properties for icons shown on the map.
We can then create styles based on these and apply them selectivily per feature type, such as:
- Everything — Set styles for all of the components shown on the map
- By Administration — Set styles for elements based on the administrative status of the element.
- Landscape — Set styles for elements based on it’s landscape status.
- Points of Interest — Set styles for specific points of interest icons that are displayed on the map.
- Road — Set styles for different types of roads on the map.
Once a feature is selected, you can then select an element type which you want to apply the styling to.
Once we’ve chosen our feature and elements, we can then select the stylers to apply to it. For example, let’s say we want to adjust the stylers for the fill of geometry elements for all features:
We can set stylers such as the colour:
Or maybe we want to change the weight of the element:
Or adjust the saturation for the selected element:
Once we’ve set the fill stylers, we may then also want to set some stylers for the stroke property of geometric elements:
Or if we just wish to change the geometric stylers for Natural Landscapes:
JSON Styling
We can use JSON to create styles for our Google Maps look and feel — it allows us to change the properties of various elements on our maps. This can range from roads to labels to rivers and much more. As previously mentioned, the wizard creates all of the JSON we need for us — but it’s important to understand what this is made up of. So let’s take a look at an example of some generated SON below:
[ { "featureType": "all", "stylers": [ { "color": "#F0F0F0" } ] },{ "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape", "elementType": "geometry", "stylers": [ { "color": "#DEDEDE" } ] } ]
So whats this doing? Well this JSON is telling our map that we want all features to have the colour #F0F0F0, all geometry elements for the road.arterial feature to be hidden and all geometry components for the landscape features to be coloured with #DEDEDE. So what are these styling elements? Well:
- The featureType is an optional property and is used to define which features should have this style applied to them. Features can be components such as road, water, parks — they are geographical characteristics displayed on the map.
- The elementType is the property to be selected for the declared feature. These elements are all children of the declared feature — this includes items such as geometry and labels. Note: If this is not specified then all elements belonging in the feature are selected.
- The stylers are the attributes to be applied to the declared elements and features — these are properties such as the visibility, colour, weight and more.
You can read more about styling here 🙂
And that’s all!
I hope this quick article has given you an insight into how to style your Google Map instances within your app! The wizard is a very powerful tool, just be careful not too get too carried away with the styling! I’d love to see where you’re using this in your apps, so do drop me a tweet should you have anything to share!
P.s Check out my other projects at hitherejoe.com