JSFiddle - React, Tailwind, and code Playground

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>

JavaScript

var start = new google.maps.LatLng(60.438160, 5.472157);
var mapSetup = {
  zoom: 10,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  MapTypeControl: true,
  center: start
}
map = new google.maps.Map(document.getElementById("map"), mapSetup);


var nett = new WmsMapType(
  "Test",
  "https://wms.gisline.no/wms-sunnmorskart", {
    layers: "VA-Nett"
  });

nett.addToMap(map);















/**
 * wmsMapType.js
 *
 * Author: Beau Grantham
 * http://www.nologs.org/
 * https://github.com/beaugrantham/
 *
 * See here for license terms:
 * http://opensource.org/licenses/MIT
 */

function WmsMapType(name, url, params, options) {
  var TILE_SIZE = 256;
  var EARTH_RADIUS_IN_METERS = 6378137;
  var CIRCUMFERENCE = 2 * Math.PI * EARTH_RADIUS_IN_METERS;

  this.name = name;
  this.url = url;
  this.tileSize = new google.maps.Size(TILE_SIZE, TILE_SIZE); // required by API

  this.tiles = []; // maintain managed tiles

  /*
   * Params representing key/value pairs included in the GetMap query.
   * 
   * Set default values and then override as needed.
   */
  this.params = {
    // General
    service: 'WMS',
    version: '1.1.1',
    request: 'GetMap',

    // Image props
    transparent: true,
    format: 'image/png',
    width: this.tileSize.width,
    height: this.tileSize.height,

    // Spatial Reference System
    srs: 'EPSG:3857',

    // Style
    styles: '',

    // Layers
    layers: ''
  };

  for (var key in params) {
    this.params[key] = params[key];
  }

  /*
   * Extra options.
   * 
   * Set default values and then override as needed.
   */
  this.options = {
    opacity: 0.5,
    cache: false
  };

  for (var key in options) {
    this.options[key] = options[key];
  }

  /*
   * Prototype getTile method.
   */
  this.getTile = function(coord, zoom, ownerDocument) {
    if (!this.params['layers'].length) {
      console.log("[WmsMapType] Required param 'layers' is empty");
      return ownerDocument.createElement('div'); // empty div
    }
    var url =...