Getting WMS data on Google Maps

-> back to the notes page

Creating floating WMS layers for the map

On Roadlessland.org I used Mapserver as a WMS server to create tiles from ESRI shapefiles of all the roadless areas, wilderness areas and other forest service areas.

On Roadlessland I also added a new base layer from a USGS WMS service tht serves tiles of topographical maps. Here is an example of how to do that.

To put wms layer in your map on top of all your base layers, you use the javascript file developed by John Deck at Berkeley (wms236.js). Then you use a function built in to Google Maps called "GTileLayerOverlay"

Here is the code for the map on this page:

<script type="text/javascript"> // best to declare your map variable outside of the function so that you can access it from other functions var map; function initialize() { if (GBrowserIsCompatible()) { // set up the map map = new GMap2(document.getElementById("map_canvas")); // set up your wms layer var tile_roadless; tile_roadless= new GTileLayer(new GCopyrightCollection(""),1,17); // these are the layers from your mapserver map file tile_roadless.myLayers = 'ira_fill2,ira_line,wild_hatch'; tile_roadless.myMercZoomLevel=5; tile_roadless.myFormat='image/gif'; // this is the address of your mapserver map tile_roadless.myBaseURL= 'http://thewildwoodstudios.com/cgi-bin/mapserv?map=../roadlessland/maps/ira.map&'; // this is the function performed by John Deck's script tile_roadless.getTileUrl=CustomGetTileUrl; // this specifies the opacity of your layer tile_roadless.getOpacity = function() {return 1.0;} map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); // set the location of the map map.setCenter(new GLatLng(35.846760876811366, -106.03317260742188), 10); // add wms layer with GTileLayerOverlay var MapserverLayer = new GTileLayerOverlay(tile_roadless); map.addOverlay(MapserverLayer); } } </script>