Adding Raster Layers

Exclusive offer: get 50% off this eBook here
Google Maps JavaScript API Cookbook

Google Maps JavaScript API Cookbook — Save 50%

Over 50 recipes to help you create web maps and GIS web applications using the Google Maps JavaScript API with this book and ebook

$26.99    $13.50
by Alper Dincer Balkan Uraz | December 2013 | Web Development

In this article by Alper Dincer and Balkan Uraz, the authors of the book Google Maps JavaScript API Cookbook, we will cover:

  • Styling of Google base maps

(For more resources related to this topic, see here.)

This article will cover about working with raster layers. The collection of sections is composed of most common use cases regarding the handling of raster layers in the Google Maps JavaScript API.

Raster is one of the prime data types in the GIS world and Google Maps JavaScript API presents an extensive set of tools to integrate external sources of imagery. Also, the API enables the application developers to change the styling of its own base maps with a palette of practically unlimited array of choices.

This article will introduce you to change the styling of base maps and then continue with the display of raster data, focusing on external Tiled Map Services (TMS) where the raster layer is composed of organized tiles in the map display.(ex: Openstreetmap). Lastly, there a number of raster layers (traffic, transit, weather, bicycle and Panoramio) that are to be presented within their integration with Google Maps JavaScript API.

Styling of Google base maps

Google base maps show a variety of details, such as water bodies (oceans, seas, rivers, lakes etc.), roads, parks, and built-up areas (residential, industrial and so on.). As you have observed in the first article, all these are shown in predefined cartographic parameters. With the styling capability of base maps, you have a virtually unlimited set of choices in terms of cartographic representation of base maps.

In your web or mobile applications, it is very beneficial to have diversity of representations (in all different colour schemes with different emphasis) in terms of keeping your audience more involved and having maps blend in nicely into your website design.

The following steps will guide you through the process of changing the styling of base maps.

Getting ready…

We can continue from the 1st part of Article 1 – Google Maps JavaScript API Basics – as we do not need to call back the basics of getting the map and so on.

How to do it…

Your result will look like bluish Google Maps, if you follow the steps below:

  1. Create an array of styles as follows:

    var bluishStyle = [ { stylers: [ { hue: "#009999" }, { saturation: -5 }, { lightness: -40 } ] },{ featureType: "road", elementType: "geometry", stylers: [ { lightness: 100 }, { visibility: "simplified" } ] }, { featureType: "water", elementType: "geometry", stylers: [ { hue: "#0000FF" }, {saturation:-40} ] }, { featureType: "administrative.neighborhood", elementType: "labels.text.stroke", stylers: [ { color: "#E80000" }, {weight: 1} ] },{ featureType: "road", elementType: "labels.text", stylers: [ { visibility: "off" } ] }, { featureType: "road.highway", elementType: "geometry.fill", stylers: [ { color: "#FF00FF" }, {weight: 2} ] } ]

  2. Add your styles array to the initMap() function.

  3. Within the initMap() function, create a styledMapType object with its name and referencing the your styles array:

    var bluishStyledMap = new google.maps.StyledMapType(bluishStyle, {name: "Bluish Google Base Maps with Pink Highways"});

  4. Add mapTypeControlOptions object having mapTypeIds property to your original mapOptions object:

    var mapOptions = { center: new google.maps.LatLng(39.9078, 32.8252), zoom: 10, mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.
    ROADMAP, 'new_bluish_style']} };

  5. Relate the new mapTypeId to your styledMapType object:

    map.mapTypes.set('new_bluish_style', bluishStyledMap);

  6. And lastly, set this new mapTypeId to be displayed:

    map.setMapTypeId('new_bluish_style');

  7. You can observe the bluish styled Google base maps, as seen above.

How it works...

Firstly, let's observe the bluishStyle array consisting of one or more google.maps.MapTypeStyle objects arranged like this:

var bluishStyle = [ { featureType: '', elementType: '', stylers: [ {hue: ''}, {saturation: ''}, {lightness: ''}, // etc... ] }, { featureType: '', // etc... } ]

In this array, you can include several styles (specified in google.maps.MapTypeStyleElementType) for different map features (specified in google.maps.MapTypeStyleFeatureType) and their respective elements – their geometries, labels, and so on (specified in google.maps.MapTypeStyleElementType).

Map features embrace the types of geographic representations that are found in the base maps. Administrative areas, landscape features, points of interest, roads and water bodies are examples of map features.

In addition to these general definitions of map features, Google Maps JavaScript API enables you to specify subtypes of these features. For example, you may wish to be specific on which poi types to change the default style by giving the featureType property as follows:

featureType: 'poi.school'

Or, you can be more specific on landscape map features:

featureType: 'landscape.man_made'

More about google.maps.MapTypeStyleFeatureType object

Complete listing on MapTypeStyleFeatureType object can be found at (https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType) in details.

Please note that, the first element of our styles array does not include any featureType property, making the styler options be valid for the entire base map:

{ stylers: [ { hue: "#009999" }, { saturation: -5 }, { lightness: -40 } ] }

In addition to google.maps.MapTypeStyleFeatureType and their constants, you can also detail google.maps.MapTypeStyleElementType for each map feature: the geometries, geometry strokes and fills, labels, label texts (also, text fill and stroke) and label icons. Having this opportunity, you can style the geometries of roads in different settings than their related icons.

In our article, you have disabled the visibility of all road label texts, not touching their geometry or label icons:

{ featureType: "road", elementType: "labels.text", stylers: [ { visibility: "off" } ] }

More about google.maps.MapTypeStyleElementType object

Complete listing on MapTypeStyleElementType object can be found at (https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleElementType) in details.

For every map feature type and its element type, you can specify a google.maps.MapTypeStyler that covers the options of hue, lightness, saturation, gamma, inverse_lightness, visibility and weight options as an array. In our article, the styler options that make the highway road appear as pink are:

{ featureType: "road.highway", elementType: "geometry.fill", stylers: [ { color: "#FF00FF" }, {weight: 2} ] }

where color option in the stylers array is a RGB Hex string of a pink tone and weight defines the weight of the feature in pixels.

More about google.maps.MapTypeStyler object

Complete listing on MapTypeStyler object can be found at (https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyler) in details.

After defining the styles array in our initMap() function, we have created a StyledMapType object:

var bluishStyledMap = new google.maps.StyledMapType(bluishStyle, {name: "Bluish Google Base Maps with Pink Highways"});

This object takes two arguments, first one is the styles array, the second one is a google.maps.StyledMapTypeOptions object. . Here, we have included only the name property, however you can additionally include maxZoom and minZoom properties between which this StyledMapType object will be displayed. You can note that, the value that we have assigned for the name property is displayed in the interface, as you can see in the screen snapshot of this article.

Once we have created the StyledMapType object, we have added an additional object called mapTypeControlOptions that takes mapTypeIds array in the mapOptions object replacing the mapTypeId property:

var mapOptions = { center: new google.maps.LatLng(39.9078, 32.8252), zoom: 10, mapTypeControlOptions: {mapTypeIds: [google.maps.
MapTypeId.ROADMAP, 'new_bluish_style']} };

This enables us to add multiple styles in addition to the standard ROADMAP map type.

Next comes the step of linking the mapTypeId ('new_bluish_style') that we have specified in mapTypeIds array with the StyledMapType object (bluishStyledMap):

map.mapTypes.set('new_bluish_style', bluishStyledMap);

After linking the mapTypeId with the StyledMapType, we can finish with:

map.setMapTypeId('new_bluish_style');

so that, the map interface opens with a base map styled within our intentions.

In our article, we have covered how to style the base maps according to our taste. We have made use of google.maps.MapTypeStyle object to select the features types (google.maps.MapTypeStyleFeatureType) and related elements (google.maps.MapTypeStyleElementType) and styled them using the google.maps.MapTypeStyler object. Then, we have added our StyledMapType object to the map, showing our own styling of the base maps of Google Maps.

There's more...

Using StyledMapType object is only one of way handling user defined styled base maps in Google Maps JavaScript API.

Another, yet simpler usage is through specifying the styles array in mapOptions object's styles property:

var mapOptions = { center: new google.maps.LatLng(39.9078, 32.8252), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: bluishStyle };

Or; after defining our mapOptions object, we can add the styles property later by:

map.setOptions({styles: bluishStyle });

There is an important difference between using StyledMapType object and mapOptions object's style property. Using StyledMapType object enables us to define a number of (virtually infinite) styles as map types. In addition, these map types can be seen in the map type control in the map interface, so that it is very easy to change back and forth between map types for the user.

However, if the styles are attached to the map by mapOptions object's style property, there is no way for the user to change between multiple styles. In fact, in the map type control, there will be option for your new selecting the styles, because styles are not attached to a StyledMapType object, therefore cannot be identified as map types.

Styled Map Wizard

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Preparing style arrays is a detailed job, with many cartographic details. Finding the correct combination in stylers for each feature and element type would take too much time, especially if you have the only way of editing in a text editor. Google has done a great job on preparing "The Styled Map Wizard" for easing this time consuming task that enables you to perform all your styling in an interface so, you can overview what you are changing in real time. After you finish your work, you can export your changes as JSON to be used as styles array in your application.

Summary

In this article, we presented the addition of external raster data through a series of steps alongside Google layers such as the Tile, Traffic, Transit, and Weather layers.

Resources for Article:


Further resources on this subject:


Google Maps JavaScript API Cookbook Over 50 recipes to help you create web maps and GIS web applications using the Google Maps JavaScript API with this book and ebook
Published: December 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Alper Dincer

Alper Dincer is a civil engineer with an MS degree in Geographical Sciences. He has more than 10 years of experience in developing web and mobile GIS/LBS projects.

Since the beginning of his career, he was always passionate about maps and geo stuff. He started working as a research assistant at a university and then moved to a governmental agency to work with maps. He is also the co-founder of a tech company named Mekansal.

He also has some achievements relating to geo web projects. In 2009, he got the first place in the ESRI Developer Summit Mashup Challenge with his open source project ExtMap. ExtMap was based on the Google Maps JavaScript API v2. He is one of the Google Qualified Developers of the Google Maps JavaScript API program. In 2010, he also worked as a proctor in the same program as a volunteer.

As a developer and entrepreneur, he still likes coding with JavaScript, PHP, and Objective-C on different web and mobile projects. He completely agrees with Steve Jobs' quotes "Love what you do" and "Stay hungry, stay foolish".

Balkan Uraz

Balkan Uraz is a city planner with an MS degree in Geographical Sciences. He has over 15 years of experience in the field of Geographic Information Systems (GIS).

Throughout his career, he has worked on several projects with one thing in common: GIS. In the early days of his career, he worked on projects involving municipal GIS and city information systems. He has also worked as a research assistant while he was conducting the tedious work on his thesis on routing systems.

He has worked on major LBS projects for mobile operators in Turkey that involve both software development and building the data inventory. He co-founded a tech company that specialized in navigation data collection and navigation products. He has also been a GIS consultant for major companies operating in the areas of field tracking and real estate.

In all his projects, he has worked around the same passion: building up the spatial infrastructure.

Books From Packt


 Google Plus First Look: a tip-packed, comprehensive look at Google+
Google Plus First Look: a tip-packed, comprehensive look at Google+

Google App Engine Java and GWT Application Development
Google App Engine Java and GWT Application Development

 Google App Inventor
Google App Inventor

 Google SketchUp for Game Design: Beginner's Guide
Google SketchUp for Game Design: Beginner's Guide

Google Apps: Mastering Integration and Customization
Google Apps: Mastering Integration and Customization

  Instant Google Drive Starter [Instant]
Instant Google Drive Starter [Instant]

Java EE 6 Cookbook for Securing, Tuning, and Extending Enterprise Applications
Java EE 6 Cookbook for Securing, Tuning, and Extending Enterprise Applications

Java 7 JAX-WS Web Services
Java 7 JAX-WS Web Services


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software