Google Map API 3 + WMS

Asked 2/12, 2011 at 9:21 Answered 9/10, 2019 at 23:23

Solved javascript jquery google-maps-api-3 wms

Can somebody give me best idea, how to put WMS layer over Google map I have so many layers and so many styles. I research on so many Q and A at StackOverflow, but I didn't get the point about how to manage multiple styles and layers. I would like to put into my JQuery code.

Totalitarianism answered 2/12, 2011 at 9:21 Comment(0)

There is a great example on this here: http://www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm

Here you have 2 kinds of layers:

base layer which is in the bottom
overlayed semi-transparent layer which is above all other layers

(note: in the above example they use WMS just for case 2, but you can of course use it also for 1, as the interface (object google.maps.ImageMapType) is the same for both)

Basically, to add "base layers" you use:

map.mapTypes.set('OSM', new google.maps.ImageMapType({ ... }));

To add overlayed layer you use:

map.overlayMapTypes.push(new google.maps.ImageMapType({ ... }));

To add layers to map type control you use option when creating the map:

mapTypeControlOptions: {
    mapTypeIds: [
        'OSM', 
        google.maps.MapTypeId.ROADMAP, 
        google.maps.MapTypeId.SATELLITE, 
        google.maps.MapTypeId.HYBRID, 
        google.maps.MapTypeId.TERRAIN
    ],
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

The above example illustrates this greatly. As for the styling of the WMS layers, this is pretty complex, I also put a question about this here. Good luck!

Bunnybunow answered 2/12, 2011 at 13:8 Comment(0)

<!DOCTYPE html>
<html>
  <head>
    <title>WMS and Google Maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var EXTENT = [-Math.PI * 6378137, Math.PI * 6378137];

      function xyzToBounds(x, y, z) {
        var tileSize = (EXTENT[1] * 2) / Math.pow(2, z);
        var minx = EXTENT[0] + x * tileSize;
        var maxx = EXTENT[0] + (x + 1) * tileSize;
        // remember y origin starts at top
        var miny = EXTENT[1] - (y + 1) * tileSize;
        var maxy = EXTENT[1] - y * tileSize;
        return [minx, miny, maxx, maxy];
      }

      var getTileUrl = function(coordinates, zoom) {
        return (
          "https://www.mrlc.gov/geoserver/NLCD_Land_Cover/wms?" +
          "&REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1" +
          "&LAYERS=mrlc_display%3ANLCD_2016_Land_Cover_L48" +
          "&FORMAT=image%2Fpng" +
          "&SRS=EPSG:3857&WIDTH=256&HEIGHT=256" +
          "&BBOX=" +
          xyzToBounds(coordinates.x, coordinates.y, zoom).join(",")
        );
      };

      function initMap() {
        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: { lat: 37.783, lng: -122.403 }
        });

        var landcover = new google.maps.ImageMapType({
          getTileUrl: getTileUrl,
          name: "Landcover",
          alt: "National Land Cover Database 2016",
          minZoom: 0,
          maxZoom: 19,
          opacity: 0.75,
        });
        map.overlayMapTypes.push(landcover);
      }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
  </body>
</html>

You can read the details here: https://justin.poehnelt.com/posts/google-maps-wms-layer/

Saponaceous answered 9/10, 2019 at 23:23 Comment(0)

Recommended topics

Hot tags