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

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

This chapter will introduce you to changing the styling of base maps and will then continue by covering how to display raster data, focusing on external TMS (Tile Map Services), where the raster layer is composed of organized tiles in the map display (for example, OpenStreetMap). Lastly, there are a number of raster layers (traffic, transit, weather, bicycle, and Panoramio) that can be presented on the map by integrating them with the Google Maps JavaScript API.

Google base maps show a variety of details such as water bodies (oceans, seas, rivers, lakes, and so on), roads, parks, and built-up areas (residential, industrial, and so on). As you have observed in the first chapter, 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 the cartographic representation of base maps.

In your web or mobile applications, it is very beneficial to have a diversity of representations (in all different color schemes with different emphasis) in order to keep your audience more involved; maps blend neatly into your website design.

This recipe will guide you through the process of changing the styling of base maps.

Google base maps display an immense amount of content (local POI information, road hierarchies, driving directions, and so on) and a large styling palette. In addition, it provides tools to change the styling of its base maps in its JavaScript API.

Moreover, you can have your other map tile sources displayed as base maps in the Google Maps interface. This feature enables you to display your tiled maps in the Google Maps interface, utilizing most of the tools of the Google Maps JavaScript API.

In this recipe, we will go through displaying OpenStreetMap tiles as base maps in the Google Maps interface, using the JavaScript API.

Google Maps has a selection of base maps as street maps and satellite imagery, which we discussed in the previous chapter; we will now discuss how additional base maps can be introduced to the Google Maps interface.

We can also use tiled map services as overlays to the base maps. By overlay, you can think of a separate sheet of map tiles put over the base maps. You can observe the details of the overlaid layer together with the base map. Examples of overlay layers might be of the boundaries of areas of interest, special POIs that are not found in the Google Maps' base maps, statistical results to be presented with aerial or point styling, and so on.

The tile map services that are used as base maps can technically be used as overlays in the Google Maps JavaScript API. However, using these tile map services (such as OpenStreetMaps) as overlays results in blocking the original base maps of Google Maps, as there would be no blank space in the map of overlaid tile map...

Overlaying tiled map services is a big capability on hand. It enables a variety of tiled map services that come into the scene using the Google Maps API. The existing stock of tiled map services are, in general, global map services, which means that they cover the whole world or at least some continent/country.

We may be interested, for instance, to overlay a map for a university campus, having its rough plan on hand. Or, we may have found some map of a historical sheet and want to make use of it. Or, we may have an internal building plan of a particular building and we would like to see this building plan on top of Google Maps.

Is it possible to overlay these microscale images on top of Google Maps? Yes, certainly! In fact, technically, there would be no difference between using campus plans or building plans instead of tiled map services as overlays. The important thing to note is that those plan sheets should be aligned as tiles similar to the tiled map services...

The Google Maps JavaScript API supports third-party tiled map services or images to be overlaid on top of base maps. However, there is a problem with the overlay layers; they come on top of base maps and make them invisible. Of course, you can turn them on or off according to your choice; however, this is not a solution if you want to see the base maps together with the overlay layers.

In fact, you can just modify the opacity of the overlay layers to see the base maps and the overlay layers.

This recipe is focused on changing the transparency of the overlay layers introduced in the last two recipes.

The Google Maps API lays the foundation for several map-based analysis, including heat maps. A heat map is a form of visualization that shows the concentration of points through gradient color scales.

Points, in this respect, may be the representation of any geographically represented items such as hospitals, houses, schools, measured values of sea pollution tagged with coordinates, the location of waste collection bins, and so on. The list is practically infinite.

Heat maps are very important inputs for geostatistics. In a map display, you capture the intensity in a moment compared to the sole display of the locations of points:

The preceding screenshot depicts the location of the OpenStreetMap points layer in İstanbul, Turkey, as of July. You might just get an idea of where the concentration of points is from the preceding screenshot, but the following screenshot shows it more clearly. The most intensely concentrated locations are colored in red, whereas lesser concentrated...