Technology

Google Maps visual refresh and UK road styling

Anthony Marshall
Anthony Marshall
30 May 2013
blog post featured image

We’re enjoying investigating the forthcoming update to Google Maps, here at Earthware. As part of understanding the consequences of the new look and feel for one of our clients, we noticed that the specific road styling for the UK seems to have been removed.

Here is a picture of the roads around London showing the M25 orbital (click on the image for a larger version):

<a href="http://earthware-website.azurewebsites.net/Content/images/wp-images/2013/05/clip_image002.gif" target="_blank"><img style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="clip_image002" src="http://earthware-website.azurewebsites.net/Content/images/wp-images/2013/05/clip_image002_thumb.gif" border="0" alt="clip_image002" width="244" height="150" /></a>

On the left panel of the image you'll notice the current Google Maps view that we’re used to seeing with the M25 coloured in blue, the major A roads coloured green, minor A roads in orange, B roads in yellow (when you zoom in far enough) and unclassified roads in white.

The middle panel of the image shows the new look: The motorways are orange and the major A roads are yellow. However, other road types are all uncoloured instead being displayed as a grey line when you are further zoomed out. Although different from what we're used to seeing, this grey line approach when zoomed out does, we think, make the map more readable.

The right panel of the image still shows the new look map, but we have used the <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html" target="_blank">styling wizard</a> to apply colour styling to the roads to make them as close to the old look as possible. We haven’t adjusted the road weighting here so the styled map is coming out with narrower road lines than both the original and the un-styled visual refresh version, which is odd.

If we now add some extra weight to the road line we can fix this:

<a href="http://earthware-website.azurewebsites.net/Content/images/wp-images/2013/05/clip_image004.gif" target="_blank"><img style="background-image: none; padding-top: 0px; padding-left: 0px; margin: 0px; display: inline; padding-right: 0px; border: 0px;" title="clip_image004" src="http://earthware-website.azurewebsites.net/Content/images/wp-images/2013/05/clip_image004_thumb.gif" border="0" alt="clip_image004" width="244" height="150" /></a>

So we’ve done it, right? Fixed the UK styling?

Not quite, take a closer look at the M25 / M4 junction:

<a href="http://earthware-website.azurewebsites.net/Content/images/wp-images/2013/05/clip_image006.gif" target="_blank"><img style="background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;" title="clip_image006" src="http://earthware-website.azurewebsites.net/Content/images/wp-images/2013/05/clip_image006_thumb.gif" border="0" alt="clip_image006" width="244" height="150" /></a>

There are two issues here (arrowed in pink):

<ol> <li>The motorway slip roads have not been included in the controlled access class we used to style the motorways</li> <li>There is no way to target the colour of the B roads – here we have highlighted Bath Road at the bottom of the picture which should be yellow.</li> </ol> <p style="text-align: left;">We have raised a feature request on the Google Maps API issue list here: <a href="https://code.google.com/p/gmaps-api-issues/issues/detail?id=5448">https://code.google.com/p/gmaps-api-issues/issues/detail?id=5448</a> and also on our Google Maps for Business portal, so let’s hope these get addressed! (Update - Google have marked the issue as fixed on 6th June 2013, so hopefully that means it is included in the next experimental release)</p> <p style="text-align: left;">If you want to try out the demo for yourself which was created using mapstraction, it is available here: <a href="http://www.earthware.co.uk/demos/tfl/CZ/GoogleVisualrefresh.html" target="_blank">http://www.earthware.co.uk/demos/tfl/CZ/GoogleVisualrefresh.html</a></p> And here is the styling we used: <pre>[ { "featureType": "road.arterial", "elementType": "geometry.stroke", "stylers": [ { "color": "#F8B762" } ] }, { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [ { "color": "#FFC243" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#95D17B" } ] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "weight": 3 } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry.stroke", "stylers": [ { "color": "#6A76BB" } ] }, { "featureType": "road.highway.controlled_access", "elementType": "geometry.fill", "stylers": [ { "color": "#7786DF" } ] } ]</pre>
Close chatbot
Open chatbot
Open chatbot