Google Maps Custom Tiles and Conditional Coloring

Google Maps Custom Tiles and Conditional Coloring

This article discusses the creation of custom tiles on Google Maps and displays them using the Google Maps JavaScript API. The API uses a Map Type object to hold information about these maps. A Map Type is an interface that defines the display and usage of map tiles and the translation of coordinate systems from screen coordinates to world coordinates (on the map). Each Map Type must contain a few methods to handle the retrieval and release of tiles and properties that define its visual behavior.

You can also define your map tiles using custom map types or modify the presentation of existing map types using Styled Maps. You must understand how to modify the map’s Map Type Registry when providing custom map types.

Here are several coordinate systems that the Google Maps API uses:

  • Latitude and Longitude values refer to a point in the world uniquely.
  • Tile coordinates refer to a specific tile on the map at the specific zoom level.

The Google Map API breaks up imagery at each zoom level into a set of map tiles. When a map scrolls to a new location or zoom level, the Maps API determines which tiles are needed using pixel coordinates and translates those values into a set of tiles to retrieve. These tile coordinates are assigned using a scheme that makes it logically easy to determine which tile contains the imagery for any given point.

Tiles in Google Maps are numbered from the same origin as that for pixels. For Google’s implementation of the Mercator projection, the origin tile is always at the Northwest corner of the map, with x values increasing from west to east and y values increasing from north to south. Tiles are indexed using x, and y coordinates from that origin. For example, at zoom level 2, when the earth is divided into 16 tiles, each tile can be referenced by a unique x,y pair. The calculation of the tile coordinates from the specified latitude-longitude value is derived from a formula that I would like to share with you:

tilex = floor(((((longitude) + 180) / 360) * (2^zoom level)))
tiley = floor(((1-(log(tan(latitude*((22/7)/180))+1.0/cos(latitude*((22/7)/180))) / (22/7))) * (2^zoom level) / 2.0))

The following JavaScript code shows how to create custom tiles and color them based on a particular value.

function CoordMapType(tileSize) {

this.tileSize = tileSize;

}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

var div = ownerDocument.createElement(‘div’);

div.innerHTML = coord;

div.style.width = this.tileSize.width + ‘px’;

div.style.height = this.tileSize.height + ‘px’;

div.style.fontSize = ’10’;

div.style.borderStyle = ‘solid’;

div.style.borderWidth = ‘1px’;

div.style.borderColor = ‘#AAAAAA’;

//The value will be change as per tiles (range,str1,str3).

var range = 5;

var str1=56;

var str3=37;

if ( ((str1==56)&&(str3==37)) && ((range>0 && range <5)) ) {

div.style.backgroundColor=’#00FF00′;

} else if ( ((str1==56)&&(str3==37)) && ((range>=5 && range <8)) ) {

div.style.backgroundColor=’#FFFF00′;

} else if ( ((str1==56)&&(str3==37)) && ((range>=8 && range <=10)) ) {

div.style.backgroundColor=’#FF0000′;

}

div.style.opacity=0.6;

return div;

};

var map;

var India = new google.maps.LatLng(21.0000,78.0000);

function initialize() {

var mapOptions = {

zoom: 5,

center: India,

maxZoom: 15,

gridSize: 100,

minZoom:5,

draggable: true,

center: India,

scaleControl: true,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById(‘map-canvas’),

mapOptions);

map.overlayMapTypes.insertAt(

0, new CoordMapType(new google.maps.Size(100,100)));

}

google.maps.event.addDomListener(window, ‘load’, initialize);

The above code snippet will create a custom tile of 100*100 on the Google map and the colour of this tile is based on a value of ‘range’ variable.