maplibre-contour

import mlcontour from "maplibre-contour";
import type { PluginDemo } from "../types";

export default {
  center: [7.66, 45.98], // the Matterhorn
  zoom: 12.5,
  run({ map, maplibregl }) {
    // Free terrain tiles (Terrarium encoding) turned into contour lines in the browser.
    const demSource = new mlcontour.DemSource({
      url: "https://elevation-tiles-prod.s3.amazonaws.com/terrarium/{z}/{x}/{y}.png",
      encoding: "terrarium",
      maxzoom: 13,
      worker: true,
    });
    demSource.setupMaplibre(maplibregl);

    map.addSource("contours", {
      type: "vector",
      tiles: [
        demSource.contourProtocolUrl({
          // zoom: [minor interval, major interval] in meters
          thresholds: { 11: [200, 1000], 12: [100, 500], 13: [50, 200], 14: [20, 100] },
          elevationKey: "ele",
          levelKey: "level",
          contourLayer: "contours",
        }),
      ],
      maxzoom: 15,
    });
    map.addLayer({
      id: "contour-lines",
      type: "line",
      source: "contours",
      "source-layer": "contours",
      paint: {
        "line-color": "rgba(110, 80, 40, 0.65)",
        "line-width": ["match", ["get", "level"], 1, 1.2, 0.5],
      },
    });
    map.addLayer({
      id: "contour-labels",
      type: "symbol",
      source: "contours",
      "source-layer": "contours",
      filter: [">", ["get", "level"], 0],
      layout: {
        "symbol-placement": "line",
        "text-field": ["concat", ["number-format", ["get", "ele"], {}], " m"],
        "text-font": ["Noto Sans Regular"],
        "text-size": 10,
      },
      paint: { "text-color": "rgb(110, 80, 40)", "text-halo-color": "white", "text-halo-width": 1 },
    });
  },
} satisfies PluginDemo;