8 min read

(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:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here