JSFiddle - React, Tailwind, and code Playground

by Biel Frontera

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css">
<script src="https://rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<div id="map" style="width: 900px; height: 400px; margin: 0 auto"></div>

JavaScript

var startDate = new Date();
startDate.setUTCHours(12, 0, 0, 0);

var map = L.map('map', {
    zoom: 4,
    fullscreenControl: true,
    timeDimension: true,
    timeDimensionControl: true,
    timeDimensionOptions: {
        timeInterval: startDate.toISOString() + "/P1W",
        period: "PT6H",
        currentTime: startDate.getTime()       
    },
    timeDimensionControlOptions: {
        autoPlay: false,
        playerOptions: {
            transitionTime: 1000,
            loop: true,
        }
    },    
    center: [45.3, 0.9],
});


var testWMS = "https://ogcie.iblsoft.com/metocean/wms"
L.tileLayer.wms(testWMS, {
    layers: 'foreground-lines',
    format: 'image/png',
    transparent: true,
    crs: L.CRS.EPSG4326
}).addTo(map);

var testLayer = L.tileLayer.wms(testWMS, {
    layers: 'temperature',
    format: 'image/png',
    transparent: true,
    opacity: 0.3,
    crs: L.CRS.EPSG4326,
    attribution: 'OGC MetOcean DWG Best Practice Example, IBL Software Engineering'
});
var testTimeLayer = L.timeDimension.layer.wms(testLayer, {
    updateTimeDimension: false,
});
testTimeLayer.addTo(map);

var testLegend = L.control({
    position: 'topright'
});
testLegend.onAdd = function(map) {
    var src = testWMS + "?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetLegendGraphic&LAYER=temperature&STYLE=default";
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML +=
        '<img src="' + src + '" alt="legend">';
    return div;
};
testLegend.addTo(map);