Karte

Hier liegt eine echte Landkarte, und du kannst jedes der 256 Zeichen darauflegen. Das ist der schnellste Weg, um zu sehen, ob ein Zeichen in der Größe, die ihr verwenden wollt, auf einer Lagekarte noch lesbar ist — und wie es auf verschiedenen Zoomstufen wirkt.

Stell die Größe, das Farbprofil und die Zoomstufe ein und schau nach. Es wird nichts gespeichert und nichts hochgeladen; die Karte ist ein Probierfeld, kein Lagekartenwerkzeug. Die fünf Punkte liegen um Bonn und bedeuten nichts — sie sind Platzhalter, keine Lage.

Schritt für Schritt, mit jedem Bedienfeld einzeln erklärt, steht das unter Ein Zeichen auf eine Karte legen.

Die Zeichen des Katalogs werden geladen …

Zur Auswahl stehen alle 256 Zeichen des Katalogs, gezeichnet nach der Vorlage, die dieses Projekt führt: Taktische Zeichen im Bevölkerungsschutz — Empfehlungen zur Einführung einer FwDV 102/DV 102. Was das für ihre Verbindlichkeit heißt, steht auf Grundlage. Kommst du von der Seite eines Zeichens über Auf der Karte ansehen, steht es schon im Auswahlfeld. Führt ein alter Link auf ein Zeichen, das es nicht mehr gibt, sagt die Karte das, statt stillschweigend ein anderes zu zeigen.

Woher der Kartenuntergrund kommt

Die Karte selbst stammt von OpenFreeMap, die Daten darin von OpenStreetMap. Der Dienst verlangt keine Anmeldung, keinen Schlüssel und kein Konto und erlaubt auch die kommerzielle Nutzung; verpflichtend ist allein die Namensnennung „OpenFreeMap © OpenMapTiles Data from OpenStreetMap“, die unten rechts in der Karte steht. Ist der Dienst nicht erreichbar oder blockiert ein Netz den Zugriff, sagt die Seite das mit dem Grund und zeigt das Zeichen trotzdem — auf neutralem Hintergrund statt auf der Karte.

Was diese Karte nicht kann

Sie fasst dicht beieinanderliegende Zeichen nicht zu Gruppen zusammen, und sie funktioniert nicht ohne Internet. Beides ist nicht gebaut, und beides wird hier auch nicht vorgetäuscht — statt einer Schaltfläche, die nichts tut, steht hier dieser Satz.

Technisch geprüft ist nicht fachlich geprüft

Dass ein Zeichen hier sauber auf der Karte steht, sagt nur, dass die Darstellung funktioniert. Was an einem Zeichen geprüft wurde, steht auf seiner Seite. Und der Stand der Vorlage selbst (AFKzV, 57. Sitzung, 13./14.03.2025: vorläufige Anwendung aufgehoben, Verbreitung ausgesetzt) steht auf der Seite Grundlage.

Für Entwicklerinnen und Entwickler

Ein taktisches Zeichen auf einer Karte ist zweierlei: ein SVG im DOM, das man anklicken und mit CSS anfassen kann, oder ein Bild im Kartenstil, das MapLibre selbst zeichnet und beim Zoomen und Drehen mitführt. Die Auswahl Darstellung zeigt beides mit demselben Zeichen auf derselben Karte, damit der Unterschied sichtbar wird und nicht behauptet werden muss.

Marker. renderSvg() erzeugt das Markup, das Markup wird zum Inhalt eines <div>, und new maplibregl.Marker({ element }) hängt dieses <div> an eine Koordinate. Das Zeichen bleibt ein DOM-Element: Vektorschärfe in jeder Zoomstufe, Ereignisse und Tooltips ohne Umweg. Dafür kostet jeder Marker ein DOM-Element — bei ein paar hundert Zeichen wird das Scrollen zäh.

Symbol Layer. addSymbolImage(map, id, drawing, { size, pixelRatio, theme }) aus @einsatzzeichen/maplibre rastert die Zeichnung und meldet sie über map.addImage() im Kartenstil an; eine symbol-Ebene zeigt sie über icon-image an jedem Punkt einer Quelle. Das Zeichnen übernimmt dann MapLibre, auch bei vielen tausend Punkten. Dafür ist das Bild ein Raster: Größe, Pixel Ratio und Farbprofil stehen beim Anlegen fest, und eine andere Einstellung ist ein anderes Bild unter einer anderen ID.

import { addSymbolImage } from '@einsatzzeichen/maplibre';

addSymbolImage(map, 'ez:base.formation:64:2:reference', drawing, {
  size: 64,
  pixelRatio: 2,
});
map.addLayer({
  id: 'einsatzzeichen',
  type: 'symbol',
  source: 'lage',
  layout: { 'icon-image': 'ez:base.formation:64:2:reference', 'icon-overlap': 'always' },
});

size × pixelRatio muss eine ganze Zahl ergeben — der Bildpuffer kennt keine halben Pixel. MapLibre rechnet über pixelRatio auf die CSS-Größe zurück; deshalb erscheint ein Zeichen bei Pixel Ratio 1, 2 und 3 gleich groß, nur schärfer. Wenn die Größe zwischen Marker und Symbolebene auseinanderläuft, ist die Rechnung falsch, nicht die Karte.

Ein ?symbol=<slug> in der Adresse wählt das Zeichen vor; so verlinkt jede Zeichenseite mit „Auf der Karte ansehen“ hierher. Gelesen wird der Parameter erst nach der Hydration, damit das serverseitig gerenderte Markup mit dem ersten Client-Render übereinstimmt. Die Zeichnungen kommen aus dem Katalog-Snapshot (@einsatzzeichen/core 0.2.0), nicht aus dem Katalog-Index.

Der Kartenstil ist https://tiles.openfreemap.org/styles/positron, ohne Schlüssel; im Repository liegt kein Zugangsdatum, weil keines gebraucht wird. Wer ohne fremden Dienst arbeiten will, setzt basemap="none": dann zeigt die Karte nur eine Hintergrundfläche und lädt nichts nach.

Clustering kann MapLibre (cluster: true an der GeoJSON-Quelle); diese Seite tut es nicht, weil ein Cluster ein eigenes Zeichen bräuchte — welches Zeichen für zehn verschiedene Einheiten steht, ist eine fachliche Frage und keine, die sich in der Website beantworten lässt. Offline-Sprites wären der Weg für Karten ohne Netz; sie zu erzeugen ist Arbeit im Paket @einsatzzeichen/maplibre (Rasterung, Atlas, sprite.json), nicht Arbeit der Website. Diese Seite baut deshalb einzelne Bilder zur Laufzeit, statt ein Sprite vorzutäuschen.