Leaflet WMS Example

Project Setup

This example inspired by the Leaflet Quickstart shows how to integrate Maxar WMS imagery into Leaflet.

Start with the bones of an HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Leaflet Demo</title>
  </head>
  <body></body>
</html>

Include the Leaflet CSS file in the 'head' section:

<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
  crossorigin=""
/>

Include the Javascript file after the Leaflet CSS:

<script
  src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
  integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
  crossorigin=""
></script>

This gives us the following HTML document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <title>Leaflet Demo</title>
  </head>
  <body></body>
</html>

Setting Up The Map

Place a div with the ID of map on your page and add an inline style to give the map some height:

<div id="map" style="height: 600px;"></div>

Add another script tag below your map to begin setting up the logic for the map:

<body>
  <div id="map" style="height: 600px;"></div>
  <script></script>
</body>

Inside the script tag, set up the map, give it a starting location and a zoom level:

const map = L.map("map").setView([39.87, -105.045], 13);

The URL to access Maxar WMS services is:

https://api.maxar.com/streaming/v1/ogc/wms?

const url = "https://api.maxar.com/streaming/v1/ogc/wms?";

You need an API key for authentication.

const myKey = "<Insert API key>";

Leaflet can authenticate with an API key by passing it in the request parameter maxar_api_key. You can specify this parameter in the WMS options object. You'll also specify the layer to use. The global coverage layer is Maxar:Imagery.

const mapOptions = {
    maxar_api_key: myKey,
    layers: "Maxar:Imagery",
  };

A WMS tile layer can be added to the map with the L.tileLayer.wms function:

const wmsLayer = L.tileLayer
  .wms(url, mapOptions)
  .addTo(map);

The complete example is then:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <title>Leaflet Demo</title>
  </head>
  <body>
    <div id="map" style="height: 600px;"></div>
    <script>
      const map = L.map("map").setView([39.87, -105.045], 13);
      const url = "https://api.maxar.com/streaming/v1/ogc/wms?";
      const myKey = "<Insert API Key>";
      const mapOptions = {
        maxar_api_key: myKey,
        layers: "Maxar:Imagery",
      };
      const wmsLayer = L.tileLayer
        .wms(url, mapOptions)
        .addTo(map);
    </script>
  </body>
</html>

Leaflet WMS Example

Project Setup​

Setting Up The Map​

Project Setup

Setting Up The Map