JSFiddle - React, Tailwind, and code Playground

by HoffZ

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&amp;dummy=.js"></script>
WMS: 
<input id="url" value="https://arcgis.hafslundnett.no/arcgis/services/Varsling24/GeoNIS_luftlinjenett/MapServer/WMSServer/" style="width:100%">
<br> version:
<input id="version" value="1.3.0">
<br> request:
<input id="request" value="GetMap">
<br> layer:
<input id="layer" value="0,1">
<br> styles:
<input id="styles">
<br> format:
<input id="format" value="image/png">
<br> transparent:
<input id="transparent" value="true">
<br> srs:
<input id="srs" value="EPSG:4326">
<br> width:
<input id="width" value="256">
<br> height:
<input id="height" value="256">
<br> tiled:
<input id="tiled" value="true">
<br>
<button id="oppdater">Oppdater</button>
<br>
<br> URL som blir brukt mot WMS:
<br>
<div id="wmsurl">

</div>

<br>
<br>
<div id="map_canvas"></div>

CSS

body {
  padding: 20px;
}

#map_canvas {
  width: 100%;
  height: 50vh;
  border: 1px solid #4D2722;
}

#oppdater {
  font-size: 28px;
}

JavaScript

var mapOptions = {
   zoom: 18,
   center: new google.maps.LatLng(61.151306, 10.412871)
 };

 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 map.mapTypes.set(google.maps.MapTypeId.ROADMAP);

 var Wms = function() {
   //Define custom WMS layer for census output areas in WGS84
   var censusLayer = new google.maps.ImageMapType({
     getTileUrl: function(coord, zoom) {
       // Compose URL for overlay tile
       var s = Math.pow(2, zoom);
       var twidth = 256;
       var theight = 256;

       //latlng bounds of the 4 corners of the google tile
       //Note the coord passed in represents the top left hand (NW) corner of the tile.

       // bottom left / SW
       var gBl = map.getProjection().fromPointToLatLng(
         new google.maps.Point(coord.x * twidth / s, (coord.y + 1) * theight / s));

       // top right / NE
       var gTr = map.getProjection().fromPointToLatLng(
         new google.maps.Point((coord.x + 1) * twidth / s, coord.y * theight / s));

       // Bounding box coords for tile in WMS pre-1.3 format (x,y)
       var bbox = gBl.lng() + "," + gBl.lat() + "," + gTr.lng() + "," + gTr.lat();

       var url = $("#url").val();
       url += "?service=WMS";
       url += "&version=" + $('#version').val();
       url += "&request=" + $('#request').val();
       url += "&layers=" + $('#layer').val();
       url += "&styles=" + $('#styles').val();
       url += "&format=" + $('#format').val();
       url += "&transparent=" + $('#transparent').val();
       url += "&srs=" + $('#srs').val();
       url += "&bbox=" + bbox; //set bounding box for tile
       url += "&width=" + $('#width').val();
       url += "&height=" + $('#height').val();
       url += "&tiled=" + $('#tiled').val();
       //console.log(url)
       $('#wmsurl').html(url);
       return url; //return WMS URL for the tile  
     }, //getTileURL

     tileSize: new google.maps.Size(256, 256),
     opacity: 0.85,
     isPng: true
   });

   // add WMS...