JSFiddle - React, Tailwind, and code Playground

by jean-philippe janecek

HTML

<script src="http://ol3js.org/en/master/build/ol.js"></script>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<script src="http://momentjs.com/downloads/moment-with-langs.min.js"></script>
<div id="map" class="map"></div>

CSS

.map {
    height: 500px;
    width: 100%;
}

JavaScript

var time = moment().format('YYYY-MM-DDT12:00:00') +'Z';
var map = new ol.Map({
    target: 'map',
    renderer: 'canvas',
    layers: [
    new ol.layer.Image({
        source: new ol.source.ImageWMS({
            url: 'http://geo.weather.gc.ca/geomet/?lang=E&service=wms&request=GetMap&time=' + time + '&elevation=-1',
            crossOrigin: null,
            attributions: [new ol.Attribution({
                html: '&copy; ' +
                '<a href="http://dd.meteo.gc.ca/doc/LICENCE_GENERAL.txt' +
                '">' +
                'Data source : Environnement Canada</a>'
            })],
            params: {
                'LAYERS': 'GDPS.ETA_GZ',
                'STYLES': 'DEFAULT',
                'FORMAT': 'image/png'
            },
            extent: [-180, -90, 180, 90]
        })
    })],
    view: new ol.View2D({
        center: ol.proj.transform([12.1, 54.18], 'EPSG:4326', 'EPSG:3857'),
        zoom: 2
    })    
});