JSFiddle - React, Tailwind, and code Playground

by HoffZ

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&amp;dummy=.js"></script>

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

CSS

body {
  padding: 20px;
}

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

JavaScript

var map = new google.maps.Map(document.getElementById("map_canvas"), {
  zoom: 18,
  center: new google.maps.LatLng(59.615436, 11.078327)
});

var wmsLayer = new WmsMapType(
        "NWS Warnings",
        "https://geminiwms.onpowel.com/SpydebergWMS/gemini-va.wms/",
        {layers: "va"});

wmsLayer.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,
      tiled: false,
			
			// 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 = this.url + "?";
		
		for (var key in this.params) {
			url += key + "=" + this.params[key] +...