<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>00 - Base Map with WMS Overlay</title>
<!-- Load our local stylesheet -->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- Load the Google Maps API, using our localhost API key -->
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRSPP9rEdPLw3W8siaiuHC3ED5y09RTJKbutSNVCYFKU-GnzKsHwbJ3SUw'></script>
<!-- Load the OpenLayers API library and stylesheet -->
<link rel="stylesheet" href="http://openlayers.org/api/2.7/theme/default/style.css" type="text/css" />
<script src="http://openlayers.org/api/2.7/OpenLayers.js"></script>
<script type="text/javascript">
var lon = -122.8450;
var lat = 42.3438;
var zoom = 18;
var map;
//
// Common code to create a map object and add the Google base layers
//
function initMap() {
map = new OpenLayers.Map( 'map' ,
{controls:[new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.PanZoomBar()],
numZoomLevels:20});
var gmap = new OpenLayers.Layer.Google(
"Google Streets" // the default
);
var gsat = new OpenLayers.Layer.Google(
"Google Satellite",
{type: G_SATELLITE_MAP}
);
map.addLayers([gmap, gsat]);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
function init(){
initMap(); // Set up base map
// Initialize WMS layer from our local GeoServer
var bwms = new OpenLayers.Layer.WMS( "Medford Buildings",
"/geoserver/wms?",
{
transparent:'true',
layers: 'medford:buildings',
'format':'image/png'},
{'reproject': true});
// Add WMS layer to our map
map.addLayer(bwms);
}
</script>
</head>
<body onload="init()">
<div class="container">
<p class="nav">
<a href="index.html">Home</a> |
<a href="01-click-query.html">Next</a>
</p>
<h1>00 - Base Map with WMS Overlay</h1>
<div id="map" class="smallmap"></div>
<p>
This example shows a Google Maps base map and a WMS overlay
generated by GeoServer from the Medford data stored in the
<code>medford.buildings</code> table in PostGIS.
</p>
<p>
The layer switcher (click on the "plus" sign to the right)
can be used to change the base map, and to toggle the WMS
overlay on and off.
</p>
</div>
</body>
</html>