JSFiddle - React, Tailwind, and code Playground

WMS experiments

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<script src="https://rawgit.com/heigeo/leaflet.wms/gh-pages/leaflet.wms.js"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.dotLegend {
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.bdotColor {
  background: #20a0ff;
}

.gdotColor {
  background: #40b060;
}

.rdotColor {
  background: #b04040;
}

.iLegend {
  width: 14px;
  height: 14px;
  display: inline-block;
}

.iColor {
  background: #ccb;
}

.sliderContainer {
  background: #fff;
}

.zSlider {
  height: 200px;
  display: inline-block;
  margin: 12px;
}

#rdotSlider .ui-slider-range {
  background: #fff;
}

#rdotSlider .ui-slider-handle {
  background: #b04040;
  border-radius: 50%;
}

#gdotSlider .ui-slider-range {
  background: #fff;
}

#gdotSlider .ui-slider-handle {
  background: #40b060;
  border-radius: 50%;
}

#bdotSlider .ui-slider-range {
  background: #fff;
}

#bdotSlider .ui-slider-handle {
  background: #20a0ff;
  border-radius: 50%;
}

#imageSlider .ui-slider-range {
  background: #fff;
}

#imageSlider .ui-slider-handle {
  background: #eed;
  border-radius: 0%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 80%;
  margin: auto;
  min-width: 1100px;
  max-width: 1300px;
  position: relative;
}

@media (min-width: 750px) and (max-width: 970px) {
  .container {
    width: 100%;
    min-width: 750px;
  }
}

.sortable-ghost {
  opacity: .2;
}

.title {
  font-size: 16px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 3px 10px;
  display: inline-block;
  position: relative;
  background-color: #aab;
  z-index: 1000;
}

.block__list {
  padding: 10px 0;
  max-width: 250px;
  margin-top: -8px;
  margin-left: 5px;
  background-color: #fff;
}

.block__list li {
  cursor: move;
}

.block__list_words li {
  font-size: 16px;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  background-color: #fff;
  padding: 8px 20px;
}

.block__list_words .sortable-ghost {
  opacity: 0.4;
  background-color: #ff7;
}

.block__list_words...

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var centerlat = 39.8;
var centerlon = -98.5;

// set default zoom level
var zoomLevel = 4;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

/////////////////////////////////////////////////////////////////////////////////////////////
//displaying the data on the map//
/////////////////////////////////////////////////////////////////////////////////////////////

//Create a pane for each of the layers.
//When created, panes have a zIndex of 400, and rendering order is determined by the order 
//in which they are defined here (panes defined later are on top of those defined earlier).
map.createPane('bpane');
map.createPane('gpane');
map.createPane('rpane');
map.createPane('ipane');
map.createPane('labels');

//pane zIndex can then be adjusted manually 
map.getPane('bpane').style.zIndex = 402;
map.getPane('gpane').style.zIndex = 399;
map.getPane('rpane').style.zIndex = 401;
map.getPane('ipane').style.zIndex = 400;
map.getPane('labels').style.zIndex = 399;

var cdbLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png',{clickable: 'false'}).addTo(map);

var source = L.WMS.source("http://gis.srh.noaa.gov/arcgis/services/NDFDTemps/MapServer/WMSServer", {
format: 'image/png',
transparent: true,
tiled: true,
opacity: 0.6,
attribution: "Attribution Here"
});

var temperature...