<html lang="en">
<head>
<meta charset="utf-8">
<style>
#map {
width: 100%;
height: 400px;
}
</style>
<title>GeoMet Simple WMS Leaflet Example</title>
<meta name="description" content="GeoMet OpenLayers Example">
<meta name="author" content="CCMEP">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div id="map">
</div>
</body>
</html>
let map = L.map("map").setView([57, -97], 3);
let OpenStreetMap_Mapnik = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
let wmsLayer = L.tileLayer
.wms("https://geo.weather.gc.ca/geomet?", {
layers: "GDPS.ETA_TT",
version: "1.3.0",
opacity: 0.5
})
.addTo(map);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.