Time for action – customizing Google basemap

Google Maps have a lot of detail, so you might want to come up with a custom Google map style to overlay over the GeoServer base layer:

1. Open chapter7/index.html in your favorite browser.

2. Click on the GeoServer base layer with the Google layer example.

3. Open /chapter7/source/google/geoserver_baselayergooglelayer/index.html and /chapter7/source/google/geoserver_baselayergooglelayer/map.js.

4. Review the map.js file:

   var map;
   
   function mapinitialize() {
      
      var wmsparams = [
       "REQUEST=GetMap",
       "SERVICE=WMS",
       "VERSION=1.1.1",
       "BGCOLOR=0xFFFFFF",
       "TRANSPARENT=TRUE",
       "SRS=EPSG:3857",
       "WIDTH=255",
       "HEIGHT=255",
       "format=image/png"
       ];
      
       //custom base layer options
       var maptypeOptions = {
           getTileUrl: function(coord, zoom)
           {
               var lULP = new google.maps.Point(coord.x*256,(coord.y+1)*256);
               var lLRP = new google.maps.Point((coord.x+1)*256,coord.y*256);
   
               var projectionMap...