OpenLayers Single

by HoffZ

HTML

<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<h3>
  Open Layers
</h3>
<div id="ol-map" class="map"></div>


<h3>
  Google Maps API
</h3>
<div id="g-map"></div>

CSS

#g-map {
  height: 300px;
  width: 100%;
}

JavaScript

showOpenLayers();
showGmap();


function showOpenLayers() {
  var layers = [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Image({
      source: new ol.source.ImageWMS({
        url: 'http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
        params: {
          'LAYERS': 'nexrad-n0r-wmst',
          'SRS': 'EPSG:3857',
          'VERSION': '1.1.1'
        },
        ratio: 1,
      })
    })
  ];

  var map = new ol.Map({
    layers: layers,
    target: 'ol-map',
    view: new ol.View({
      center: ol.proj.fromLonLat([-100.0, 40.0]),
      zoom: 4
    })
  });

}


function showGmap() {

  var map = new google.maps.Map(document.getElementById("g-map"), {
    zoom: 4,
    center: new google.maps.LatLng(40.0, -100.0)
  });

  // "Normal" 256 tiles
  //var TILE_WIDTH = 256;
  //var TILE_HEIGHT = 256;

  // Set tile size to map size to get just one single tile. But still  multiple tiles is fetched from server
  var TILE_WIDTH = getMapWidth();
  var TILE_HEIGHT = getMapHeight();


  var wmsOptions = {
    getTileUrl: WMSGetTileUrl,
    tileSize: new google.maps.Size(TILE_WIDTH, TILE_HEIGHT)
  };

  var wmsMapType = new google.maps.ImageMapType(wmsOptions);
  map.overlayMapTypes.insertAt(0, wmsMapType);

  function WMSGetTileUrl(tile, zoom) {
    var projection = map.getProjection();
    var zpow = Math.pow(2, zoom);
    var ul = new google.maps.Point(tile.x * TILE_WIDTH / zpow, (tile.y + 1) * TILE_HEIGHT / zpow);
    var lr = new google.maps.Point((tile.x + 1) * TILE_WIDTH / zpow, (tile.y) * TILE_HEIGHT / zpow);
    var ulw = projection.fromPointToLatLng(ul);
    var lrw = projection.fromPointToLatLng(lr);
    //The user will enter the address to the public WMS layer here.  The data must be in WGS84
    var baseURL = "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?";
    var version = "1.1.1";
    var request = "GetMap";
    var format = "image/png"; //type of image returned 
    //The layer ID.  Can...