@alcalin/leaflet-tilelayer-wmts

v2.0.2

Published

3 months ago

A modern, lightweight Leaflet plugin for displaying WMTS tile layers.

Downloads

295

0High
0Medium
0Low

alcalin

leaflet wmts tilelayer gis maps

L.TileLayer.WMTS

A modern, lightweight Leaflet WMTS TileLayer plugin.

✅ Spec-compliant WMTS KVP (SERVICE, REQUEST, VERSION, …)
✅ Works out-of-the-box with GoogleMapsCompatible/WebMercator
✅ Supports custom TILEMATRIX labels for non-GMC grids
✅ extraParams, baseQuery, crossOrigin, error hooks
🧩 Ships both ESM (for npm/bundlers) and UMD (for browsers/demos) builds

Install (npm)

npm i @alcalin/leaflet-tilelayer-wmts leaflet

Peer dep: you must also install leaflet in your app.

Usage (bundlers, ESM)

import * as L from "leaflet";
import { wmts } from "@alcalin/leaflet-tilelayer-wmts";

const map = L.map("map").setView([40.7128, -74.0060], 5);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19
}).addTo(map);

// GoogleMapsCompatible (WebMercator) example
const layer = wmts("https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/WMTS/tile/1.0.0/", {
  layer: "USGSTopo",
  style: "default",
  tileMatrixSet: "default028mm",
  format: "image/png",
  googleMapsCompatible: true,
  crossOrigin: true
});

layer.addTo(map);

Browser Demo (UMD build)

A prebuilt UMD bundle is available under dist/.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>WMTS Plugin Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>
<body>
  <div id="map" style="height:100vh"></div>

  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
  <script src="./dist/leaflet.tilelayer.wmts.min.js"></script>
  <script>
    const map = L.map("map").setView([40.7, -74], 5);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19
    }).addTo(map);

    const layer = LTileLayerWMTS.wmts(
      "https://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/WMTS/tile/1.0.0/",
      {
        layer: "USGSTopo",
        style: "default",
        tileMatrixSet: "default028mm",
        format: "image/png",
        googleMapsCompatible: true
      }
    );
    layer.addTo(map);
  </script>
</body>
</html>

Options

WMTSOptions (in addition to L.TileLayerOptions):

| Option | Type | Default | Description | |---|---|---|---| | layer | string | — | WMTS layer name | | tileMatrixSet | string | — | WMTS matrix set | | style | string | "default" | WMTS style | | format | string | "image/png" | Tile MIME type | | tileMatrixLabels | (string\|number)[] | undefined | Map Leaflet zoom → TILEMATRIX | | googleMapsCompatible | boolean | true | Use XYZ mapping directly | | extraParams | Record<string, any> | {} | Extra query params (e.g., token) | | crossOrigin | string\|true | undefined | Sets crossorigin on tile images | | baseQuery | string | undefined | Appended before WMTS KVPs |

Project Structure

/src
  leaflet.tilelayer.wmts.js      # ESM source
  leaflet.tilelayer.wmts.d.ts    # TypeScript typings
/dist
  leaflet.tilelayer.wmts.umd.js  # UMD build (Rollup output)
  leaflet.tilelayer.wmts.min.js  # Minified UMD build (for browser/demo)
example.html                     # GitHub Pages demo (loads dist build)

Troubleshooting

Failed to resolve module specifier "leaflet"
Use this package in a bundler-based app (npm install). For browser demos, include the UMD build under dist/.

License

Beerware

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme