Overlaying wms data using google maps v3 api Source

February 17, 2011 Markdown source

1---
2title: 'Overlaying wms data using google maps v3 api'
3date: '2011-02-17'
4published_at: '2011-02-17T15:44:00.007+11:00'
5tags: ['geoserver', 'geospatial', 'google maps', 'wms', 'work']
6author: 'Gavin Jackson'
7excerpt: 'WMS is a standard protocol used to request mapping data from an OGC compliant map server - two common open source implementations include mapserver and geoserver. WMS renders the tiles server side and...'
8updated_at: '2013-07-24T09:39:16.214+10:00'
9legacy_url: 'http://www.gavinj.net/2011/02/overlaying-wms-data-using-google-maps.html'
10---
11
12[![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvr_nsUgmURvnApocHoOqyx-U_3q8TMNm26PPxYtkO237s6CsFRbqsLFuGFH_-PJM4G6k6AXmHJj7bXpmByVLlq0A39EV8PT47h8Q6vkv1PW-W-DrjbY5ImKKfNDVP-5lQS-P-3hl6-8/s400/screen-capture-3.png)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvr_nsUgmURvnApocHoOqyx-U_3q8TMNm26PPxYtkO237s6CsFRbqsLFuGFH_-PJM4G6k6AXmHJj7bXpmByVLlq0A39EV8PT47h8Q6vkv1PW-W-DrjbY5ImKKfNDVP-5lQS-P-3hl6-8/s1600/screen-capture-3.png)
13
14WMS is a standard protocol used to request mapping data from an OGC compliant map server - two common open source implementations include mapserver and geoserver.
15
16WMS renders the tiles server side and simply sends back an image that meets the specification of the client request (eg. bounding box, styling etc).
17
18The image can comprise of point and vector data (which may be stored in a postgis database, or raster data (imagery) such as geotiff.
19
20The Google maps API does not support WMS directly, however it does support various ways of overlaying images on top of the map.
21
22I came across the following extension that allows you to overlay custom WMS layers and basemap tiles on top of a standard google map.
23
24[http://lyceum.massgis.state.ma.us/wiki/doku.php?id=googlemapsv3:home](http://lyceum.massgis.state.ma.us/wiki/doku.php?id=googlemapsv3:home)
25
26Here is a sample page (I refactored the code a little bit):
27
28[http://blog.canberraphotography.com.au/googlewms/](http://blog.canberraphotography.com.au/googlewms/)
29
30Note that the guts of the code is in:
31[http://blog.canberraphotography.com.au/googlewms/map.js](http://blog.canberraphotography.com.au/googlewms/map.js)
32[http://blog.canberraphotography.com.au/googlewms/wms.js](http://blog.canberraphotography.com.au/googlewms/wms.js)
33
34You can easily add a WMS overlay by calling the loadWMS(map, baseURL, customParams) function, where:
35
36map - is an instance of Google.maps.Map baseURL - is the base URL of your WMS server (eg geoserver) customParams - Additional WMS parameters
37
38```
39var myLatlng = new google.maps.LatLng(-27, 133);
40var myOptions = {
41zoom: 4,
42center: myLatlng,
43mapTypeId: google.maps.MapTypeId.ROADMAP
44}
45var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
46
47var customParams = [
48"FORMAT=image/png8",
49"LAYERS=ALA:ibra7_regions"
50];
51
52loadWMS(map, "http://spatial.ala.org.au/geoserver/wms?", customParams);
53```
54
55The WMS overlay is the Interim Biogeographic Regionalisation of Australia (IBRA) data set, hosted on my work geoserver instance. More information about this data set can be found [here](http://www.environment.gov.au/parks/nrs/science/bioregion-framework/ibra/index.html).
56
57
58

---
title: 'Overlaying wms data using google maps v3 api'
date: '2011-02-17'
published_at: '2011-02-17T15:44:00.007+11:00'
tags: ['geoserver', 'geospatial', 'google maps', 'wms', 'work']
author: 'Gavin Jackson'
excerpt: 'WMS is a standard protocol used to request mapping data from an OGC compliant map server - two common open source implementations include mapserver and geoserver. WMS renders the tiles server side and...'
updated_at: '2013-07-24T09:39:16.214+10:00'
legacy_url: 'http://www.gavinj.net/2011/02/overlaying-wms-data-using-google-maps.html'
---

[![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvr_nsUgmURvnApocHoOqyx-U_3q8TMNm26PPxYtkO237s6CsFRbqsLFuGFH_-PJM4G6k6AXmHJj7bXpmByVLlq0A39EV8PT47h8Q6vkv1PW-W-DrjbY5ImKKfNDVP-5lQS-P-3hl6-8/s400/screen-capture-3.png)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvr_nsUgmURvnApocHoOqyx-U_3q8TMNm26PPxYtkO237s6CsFRbqsLFuGFH_-PJM4G6k6AXmHJj7bXpmByVLlq0A39EV8PT47h8Q6vkv1PW-W-DrjbY5ImKKfNDVP-5lQS-P-3hl6-8/s1600/screen-capture-3.png)

WMS is a standard protocol used to request mapping data from an OGC compliant map server - two common open source implementations include mapserver and geoserver.

WMS renders the tiles server side and simply sends back an image that meets the specification of the client request (eg. bounding box, styling etc).

The image can comprise of point and vector data (which may be stored in a postgis database, or raster data (imagery) such as geotiff.

The Google maps API does not support WMS directly, however it does support various ways of overlaying images on top of the map.

I came across the following extension that allows you to overlay custom WMS layers and basemap tiles on top of a standard google map.

[http://lyceum.massgis.state.ma.us/wiki/doku.php?id=googlemapsv3:home](http://lyceum.massgis.state.ma.us/wiki/doku.php?id=googlemapsv3:home)

Here is a sample page (I refactored the code a little bit):

[http://blog.canberraphotography.com.au/googlewms/](http://blog.canberraphotography.com.au/googlewms/)

Note that the guts of the code is in:
[http://blog.canberraphotography.com.au/googlewms/map.js](http://blog.canberraphotography.com.au/googlewms/map.js)
[http://blog.canberraphotography.com.au/googlewms/wms.js](http://blog.canberraphotography.com.au/googlewms/wms.js)

You can easily add a WMS overlay by calling the loadWMS(map, baseURL, customParams) function, where:

map - is an instance of Google.maps.Map baseURL - is the base URL of your WMS server (eg geoserver) customParams - Additional WMS parameters

```
var myLatlng = new google.maps.LatLng(-27, 133);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

var customParams = [
"FORMAT=image/png8",
"LAYERS=ALA:ibra7_regions"
];

loadWMS(map, "http://spatial.ala.org.au/geoserver/wms?", customParams);
```

The WMS overlay is the Interim Biogeographic Regionalisation of Australia (IBRA) data set, hosted on my work geoserver instance. More information about this data set can be found [here](http://www.environment.gov.au/parks/nrs/science/bioregion-framework/ibra/index.html).