Eine Wanderkarte mit MapLibre GL JS

Eine Karte für Wanderer braucht Wege mit ihrer Schwierigkeit, Hütten, Haltestellen und Wasser, und das Gelände. Mit dem Stil Outdoor, oder mit den Wegen in einem eigenen Stil, einem Popup für jeden Weg und Ihrer Route darüber. Getestet mit MapLibre GL JS 6.13.0.

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/styles/outdoor.json",
  center: [7.96, 46.6],
  zoom: 13
});

Wege nach Schwierigkeit

Die Farben folgen der Wanderskala des Schweizer Alpen-Clubs SAC, die OpenStreetMap im Tag sac_scale speichert, und den Farben der Schweizer Wegweiser:

Der Stil Outdoor zeigt auch Feldwege, Klettersteige, Hütten, Zeltplätze, Aussichtspunkte, Bahnhöfe und Haltestellen, Trinkwasser, Gipfel mit ihrer Höhe, Fels, Gletscher und Felswände. Wege mit Skala erscheinen ab Zoomstufe 11.

Wege auf einem eigenen Stil

Die Wege kommen als eigene Vektorkacheln, Sie können sie also auf jedem Stil zeichnen. Dieser Code ergänzt sie im Stil light, mit einem Popup für den Weg unter dem Mauszeiger:

map.on("load", () => {
  map.addSource("trails", {
    type: "vector",
    url: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/trails.json"
  });
  map.addLayer({
    id: "trails",
    type: "line",
    source: "trails",
    "source-layer": "trails",
    filter: [">", ["get", "grade"], 0],
    paint: {
      // T1 gelb, T2 und T3 rot, T4 bis T6 blau, wie auf Schweizer Wegweisern
      "line-color": ["match", ["get", "grade"], 1, "#d39b00", [2, 3], "#d0312d", "#1f5fbf"],
      "line-width": ["interpolate", ["linear"], ["zoom"], 11, 1, 16, 3],
      "line-dasharray": [3, 1.6]
    }
  });
  map.on("click", "trails", (e) => {
    const t = e.features[0].properties;
    new maplibregl.Popup()
      .setLngLat(e.lngLat)
      .setText(`${t.name || "Weg"} · T${t.grade}`)
      .addTo(map);
  });
  map.on("mouseenter", "trails", () => (map.getCanvas().style.cursor = "pointer"));
  map.on("mouseleave", "trails", () => (map.getCanvas().style.cursor = ""));
});

Die Kacheln haben zwei Layer, von Zoomstufe 11 bis 13; näher heran vergrössert MapLibre Zoomstufe 13:

• trails: Linien mit grade (0 bis 6, wie in der Tabelle), kind, name, ref und visibility. Wege ohne Skala sind ab Zoomstufe 12 in den Kacheln.
• points, ab Zoomstufe 13: Bus- und Tramhaltestellen, Bahnhöfe, Schiffsanlegestellen, Seilbahnstationen, Trinkwasser und Quellen, mit kind und name.

Sie stammen aus den aktuellen OpenStreetMap-Daten unseres Overpass-Servers, und eine Kachel ist höchstens 7 Tage alt. Ein neu bewerteter Weg erscheint innert einer Woche.

Ihre Route darüber

Eine Route, die Sie geplant oder aufgezeichnet haben, kommt als GeoJSON darüber. Wandeln Sie GPX-Dateien zuerst in GeoJSON um, zum Beispiel mit dem Paket @tmcw/togeojson.

map.addSource("route", { type: "geojson", data: "/route.geojson" });
map.addLayer({
  id: "route",
  type: "line",
  source: "route",
  layout: { "line-cap": "round", "line-join": "round" },
  paint: { "line-color": "#7b2cbf", "line-width": 4, "line-opacity": 0.8 }
});

Als letzter Layer hinzugefügt, liegt die Route über Wegen und Beschriftung. Für das Profil der Route, mit Aufstieg und Abstieg, schicken Sie sie mit demselben Schlüssel an die Höhen-API; das Beispiel Höhenprofil einer Wanderroute tut das für eine Route aus OpenStreetMap.

Grenzen

• Die Skala ist das, was Mitwirkende eingetragen haben. Viele Wege haben keine und erscheinen grau; eine Skala kann alt oder falsch sein. Sagen Sie das in Ihrer App, und verwenden Sie die Karte nicht als einzige Quelle für eine Bergtour.
• Die Grundkarte wird jede Woche aktualisiert, die Wege und Haltestellen innert 7 Tagen.
• Höhenlinien und Gelände stammen aus einem Raster mit 90 m Abstand: gut für Berge, zu grob für kleine Steigungen.
• Jede Weg-, Höhenlinien-, Gelände- und Vektorkachel zählt als eine Kartenkachel. Die erste Ansicht des Stils Outdoor auf Zoomstufe 13,2, 1280 × 720 Pixel, lud 19 Kacheln. Jedes Konto enthält 100'000 im Monat.