Eine Seekarte mit Tiefen und Seezeichen

Eine Webkarte des Meeres: das Wasser nach Tiefe eingefärbt, Tiefenlinien, und Tonnen, Baken und Leuchtfeuer in ihren Farben. Mit dem Stil Marine, oder mit MapLibre-Layern in einem eigenen Stil. Für Websites von Marinas, Segelschulen, Fähren und Tourismus an der Küste; nicht für die Navigation. 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/marine.json",
  center: [-1.31, 50.8], // der Solent
  zoom: 12
});

Was der Stil Marine zeigt

• Das Meer nach Tiefe eingefärbt, mit schattiertem Meeresboden, und Tiefenlinien mit Beschriftung.
• Leuchttürme, Leuchtfeuer, Lateral- und Kardinaltonnen und Baken in ihren Farben, Gefahren- und Ansteuerungszeichen, Sonderzeichen, Wracks und Felsen. Näher herangezoomt zeigen Leuchtfeuer ihre Kennung, etwa Fl(2) R 6s: zwei rote Blitze alle sechs Sekunden.
• Häfen, Marinas, Ankerplätze und Fährrouten, die Küstenlinie, und Schutzgebiete als Umrisse, weil viele ins Meer hinausreichen.

Leuchttürme, Häfen, Marinas und Ankerplätze erscheinen ab Zoomstufe 9, die anderen Zeichen ab Zoomstufe 11. Der Stil Marine verwendet den Layertyp color-relief, der mit MapLibre GL JS 5.6 kam; er braucht also diese Version oder eine neuere.

Tiefen und Seezeichen in einem eigenen Stil

Tiefen, Tiefenlinien und Seezeichen kommen als drei eigene Kachelsätze. Dieser Code ergänzt sie im Stil light; die Seezeichen sind farbige Kreise, die keine Symbole brauchen:

const API = "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps";
const map = new maplibregl.Map({
  container: "map",
  style: `${API}/styles/light.json`,
  center: [-1.31, 50.8],
  zoom: 12
});
map.on("load", () => {
  map.addSource("bathymetry", { type: "raster-dem", url: `${API}/bathymetry.json` });
  map.addSource("isobaths", { type: "vector", url: `${API}/isobaths.json` });
  map.addSource("seamarks", { type: "vector", url: `${API}/seamarks.json` });

  // die Tiefen kommen unter das Land ("earth"); die Meeresflächen des Layers
  // water würden sie verdecken, dieser Layer behält also nur Seen und Flüsse
  map.setFilter("water", ["all", ["==", ["geometry-type"], "Polygon"], ["!=", ["get", "kind"], "ocean"]]);
  map.setPaintProperty("water", "fill-color", "#b9dbf0"); // Buchten und Seen: ein Blau wie flaches Meer
  map.addLayer({
    id: "sea-depth",
    type: "color-relief", // MapLibre GL JS 5.6 oder neuer
    source: "bathymetry",
    paint: {
      "color-relief-color": ["interpolate", ["linear"], ["elevation"],
        -6000, "#4c8bc0", -1000, "#84b8dd", -200, "#9dc8e6", -50, "#badaef",
        -10, "#d3e9f6", 0, "#e6f3fb"]
    }
  }, "earth");
  map.addLayer({
    id: "isobaths",
    type: "line",
    source: "isobaths",
    "source-layer": "contours",
    paint: { "line-color": "#4f86b8", "line-width": 0.6, "line-opacity": 0.6 }
  }, "earth");
  map.addLayer({
    id: "seamarks",
    type: "circle",
    source: "seamarks",
    "source-layer": "seamarks",
    paint: {
      "circle-radius": ["match", ["get", "kind"], ["lighthouse", "harbour", "marina"], 6, 4],
      "circle-color": ["match", ["get", "colour"],
        "red", "#d0312d", "green", "#2e8b3d", "yellow", "#e2b100", "black", "#222222", "#ffffff"],
      "circle-stroke-color": "#2b3f57",
      "circle-stroke-width": 1
    }
  });
});

• color-relief färbt jedes Pixel der Quelle raster-dem nach seiner Höhe ein; ["elevation"] ist im Meer negativ. Die Farben oben sind die des Stils Marine, mit weniger Stufen.
• Buchten und Mündungen, die OpenStreetMap als Wasserflächen erfasst, wie Southampton Water, behalten eine Farbe; nur das offene Meer erhält die Tiefenfarben.
• In einem Stil-JSON ergänzen Sie die drei Quellen in sources, die zwei Tiefen-Layer vor earth und die Seezeichen gegen Ende von layers.

Die Kacheln

Die Seezeichen stammen aus den Tags seamark:* von OpenStreetMap, die auch OpenSeaMap verwendet, über unseren Overpass-Server; eine Kachel ist höchstens 7 Tage alt. colour enthält die Hauptfarbe eines Zeichens, und manche Zeichen haben keine. category unterscheidet bei Lateralzeichen Backbord von Steuerbord und gibt bei Kardinalzeichen die Richtung an.

Grenzen

• Die Tiefen stammen aus GEBCO, einem weltweiten Raster von etwa 460 m. Sie zeigen, wo das Meer tief oder flach ist, und übersehen Rinnen, Sandbänke und Felsen, die kleiner als das Raster sind.
• Seezeichen in OpenStreetMap können fehlen, veraltet oder falsch platziert sein, und Tonnen werden verlegt. An Bord gelten die amtlichen Seekarten und Bekanntmachungen. Lassen Sie den Hinweis «not for navigation» in Ihrer Karte, wie es die Quellenangabe des Stils Marine tut.
• Nennen Sie GEBCO, wenn Sie die Tiefen zeigen: Die Quellenangabe der Tiefenkacheln fügt die Nennung zur Karte hinzu.
• Jede Kachel mit Tiefen, Tiefenlinien und Seezeichen zählt als eine Kartenkachel. Die erste Ansicht des Stils Marine oben, auf Zoomstufe 13 und mit 1280 × 720 Pixeln, lud 20 Kacheln. Jedes Konto enthält 100'000 im Monat.