CODEWITHSUNDEEP
leafletcoordinate-systemswms
thrag
thrag

Reputation: 1536

How to use GeoMet WMS with leaflet

I have been trying to make a WMS service work with leaflet. I just want to use the standard CRS=EPSG:3857 which does seem to be supported by the service. However I just cannot get the WMS layer to line up on the OpenStreetMap base layer.

This picture should line up over Canada. It works in QGIS just fine.

enter image description here Here is a code pen:https://codepen.io/keenedge/pen/dybWgbM

This is the doc page for the WMS I need to use.

I've tried setting crs: L.CRS.EPS3857 in the map and in the WMS layer but it seems to have no effect.

Anyone now how to get this code pen working?

full code here:

<!DOCTYPE html>
<html>

<head>
  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <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-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>
</head>

<body>
  <div id="mapid" style="width: 800px; height: 800px;"></div>
  <script>


    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 19, attribution: osmAttrib });

    var wmsOptions = {
      layers: 'HRDPS.NORTH.PRES_WSPD.275',
      transparency: true,
      format: 'image/png',
      version: '1.3.0'
    }

    var url = 'https://geo.weather.gc.ca/geomet'
    var wmsLayer = L.tileLayer.wms(url, wmsOptions);

    var myMap = L.map('mapid').setView([49, -123], 2);
    osm.addTo(myMap);
    wmsLayer.addTo(myMap);
  </script>



</body>

</html>

Thanks for your help

Upvotes: 1

Views: 282

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

The HRDPS.NORTH.PRES_WSPD.275 layer from that WMS server looks exactly the same in Leaflet than in QGis, when QGis is configured to display EPSG:3857:

qgis screenshot

You're doing nothing wrong. Note that other layers from the same WMS service do cover continental Canada, or the ocean, or some other area.

Upvotes: 1

Related Questions