WMS example - OGC Web Services

WMS from OGC Web Services

by HoffZ

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>


<div id="map" style="position:absolute; left:10px; width:99%; height:95%;"></div>

CSS

#map {
  background-color: grey;
}

JavaScript

//setting up the map
    var map;
 
       
    var wmsMapType;
  
  
    function initialize() {
        //Set the center of the map
        
        var usa = new google.maps.LatLng(38.87, -94.63);
 
        var map_setup = {
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            MapTypeControl: true,
            zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
            navigationControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN },
            
            scrollwheel: false,
            panControl: false,
            maxZoom: 17,
            minZoom: 1,
            scaleControl: true,
            center: usa
            
        }
 
        map = new google.maps.Map(document.getElementById("map"), map_setup);
        
        
      
       
        //Creating the WMS layer options.  This code creates the Google imagemaptype options for each wms layer.  In the options the function that calls the individual 
        //wms layer is set 
      
 
        var wmsOptions = {
            alt: "MapServer Layer",
            getTileUrl: WMSGetTileUrl,
            isPng: false,
            maxZoom: 17,
            minZoom: 1,
            name: "MapServer Layer",
            tileSize: new google.maps.Size(256, 256)
        };
 
 
        //Creating the object to create the ImageMapType that will call the WMS Layer Options. 
        
       wmsMapType = new google.maps.ImageMapType(wmsOptions);
 
      
    //Where the initial map type is set.  This can be adjusted as necessary.  The map name in ' ' indicates the default map viewed when the user 
    //visits the page


    map.overlayMapTypes.insertAt(0, wmsMapType);
    
      
}
   
  //The code that reads in the WMS tiles.  To change the WMS layer the user would update the layers line.  As this is constructed now you need to have this code for each WMS layer.
  //Check with your Web Map Server to see what are...