Block: Basemap

Der Basemap-Block bettet eine interaktive Karte auf Basis von basemap.de in eine Seite ein. Die Karte zeigt amtliche deutsche Geodaten und kann mit Orten (markierte Punkte), Kategorien (Farb-Legende) und Bereichen (hervorgehobene Gebiete) angereichert werden.

Block einfügen

1. Klicken Sie im Editor auf das +-Symbol, um einen neuen Block einzufügen.
2. Suchen Sie nach „Basemap“ oder wählen Sie den Block aus der Kategorie Julia Blocks.
3. Der Block erscheint im Editor mit dem Block-Header „Basemap“ und drei eingeklappten Bereichen: Kategorien, Orte und Bereiche.

Karteneinstellungen

Klicken Sie auf den Block, um die Karteneinstellungen zu öffnen. Sie sehen vier Felder:

Tipp: Die Koordinaten des Kartenzentrums lassen sich einfach über OpenStreetMap ermitteln: Suchen Sie den gewünschten Ort, klicken Sie auf der Karte mit der rechten Maustaste und wählen Sie: Hierher navigieren, oder lesen Sie die Koordinaten aus der URL ab.

Kategorien anlegen

Kategorien gruppieren die Orte auf der Karte und werden in der Legende angezeigt. Klicken Sie auf den Bereich Kategorien, um ihn zu öffnen.

Eine neue Kategorie hinzufügen:

1. Klicken Sie auf das +-Symbol unterhalb der bestehenden Kategorien.
2. Geben Sie den Namen der Kategorie ein, z. B. Begegnungsorte.
3. Wählen Sie eine Farbe über den Farbwähler. Diese Farbe erscheint als Punkt in der Kartenlegende und an jedem Marker der zugeordneten Orte.

Eingeklappte Kategorien zeigen Name und Farbpunkt kompakt an. Klicken Sie auf eine Kategorie, um sie zu bearbeiten.

Orte anlegen

Orte erscheinen als farbige Marker auf der Karte. Beim Klicken auf einen Marker öffnet sich ein Popup mit Name, Kategorie und Beschreibung.

Einen neuen Ort hinzufügen:

1. Öffnen Sie den Bereich Orte und klicken Sie auf das +-Symbol.
2. Wählen Sie im Dropdown Kategorie eine der angelegten Kategorien aus. Daneben erscheint automatisch der passende Farbpunkt.
3. Geben Sie den Namen des Ortes ein.
4. Tragen Sie Längengrad und Breitengrad ein.
   Tipp: Auf OpenStreetMap auf den gewünschten Ort mit der rechten Maustaste klicken und „Adresse/Koordinaten abfragen“ auswählen. Die Koordinaten erscheinen im Suchfeld (Format: Breitengrad, Längengrad).
5. Optional: Fügen Sie eine Beschreibung im Textfeld unten ein. Formatierungen sind möglich.

Eingeklappte Orte zeigen den Ortsnamen und den Kategorienamen mit Farbpunkt.

Bereiche anlegen

Mit Bereichen lassen sich Gebiete auf der Karte hervorheben. Der definierte Bereich bleibt normal sichtbar — alles außerhalb wird mit einer halbtransparenten Farbfläche überlagert. Das eignet sich besonders, um ein Stadtviertel oder Einzugsgebiet auf der Karte zu betonen.

Koordinaten des Bereichs ermitteln (geojson.io)

Der Bereich wird durch ein Polygon definiert — eine Liste von Koordinatenpaaren, die den Umriss beschreiben. Die einfachste Methode, diese Koordinaten zu ermitteln, ist das Online-Tool geojson.io.

1. Öffnen Sie https://geojson.io im Browser.
2. Navigieren Sie auf der Karte zu dem Gebiet, das Sie einzeichnen möchten (z. B. über das Suchfeld oben links).
3. Wählen Sie in der linken Werkzeugleiste das Polygon-Werkzeug (Vieleck-Symbol).
4. Klicken Sie die Eckpunkte des Gebiets nacheinander an. Doppelklick schließt das Polygon.
5. Auf der rechten Seite erscheint der GeoJSON-Code. Suchen Sie dort den Abschnitt "coordinates". Der Wert sieht ungefähr so aus:
   [ [ [13.278, 52.538], [13.295, 52.538], [13.295, 52.548], [13.278, 52.548] ] ]
6. Kopieren Sie das innere Array — also den Teil innerhalb des äußeren Klammerpaars:
   [ [13.278, 52.538], [13.295, 52.538], [13.295, 52.548], [13.278, 52.548] ]

Bereich im Block anlegen

1. Öffnen Sie den Bereich Bereiche im Editor und klicken Sie auf das +-Symbol.
2. Wählen Sie eine Farbe für die Überlagerung.
3. Geben Sie den Namen des Bereichs ein, z. B. Charlottenburg-Nord.
4. Stellen Sie die Deckkraft ein (0 = unsichtbar, 1 = vollständig deckend). Empfehlung: 0.3–0.5.
5. Fügen Sie im Feld Koordinaten (JSON) das kopierte Koordinaten-Array aus geojson.io ein.

Bereichsname auf der Karte anzeigen

Optional kann der Name des Bereichs als Beschriftung direkt auf der Karte angezeigt werden:

1. Aktivieren Sie den Schalter Name anzeigen.
2. Ohne weitere Einstellung erscheint der Name automatisch im Mittelpunkt des Polygons.
3. Optional: Tragen Sie unter Label Längengrad und Label Breitengrad eine eigene Position ein, falls der Mittelpunkt ungünstig liegt (z. B. außerhalb des Polygons bei unregelmäßigen Formen). Der Wert 0 bedeutet automatisch.
4. Passen Sie Schriftgröße (Standard: 1.5rem) und Schriftfarbe (Standard: weiß) nach Bedarf an.
5. Im Namensfeld sind einfache HTML-Tags erlaubt, z. B. <br> für einen Zeilenumbruch oder <strong> für Fettdruck.

Ergebnis im Frontend

Die fertige Karte zeigt:

• Eine interaktive Karte im gewählten Basemap-Stil, die sich zoomen und verschieben lässt.
• Farbige Marker für jeden eingetragenen Ort. Ein Klick auf einen Marker öffnet ein Popup mit Name, Kategorie und Beschreibung.
• Eine Legende, die alle Kategorien mit Farbpunkt und Name auflistet. Klicken auf einen Legendeneintrag blendet die zugehörigen Marker ein oder aus.
• Eine halbtransparente Farbfläche außerhalb des definierten Bereichs, die das gewählte Gebiet auf der Karte hervorhebt.
• Optional: Den Bereichsnamen als Beschriftung auf der Karte.

Häufige Fragen

Die Karte lädt nicht.
Stellen Sie sicher, dass das Plugin jb-julia-blocks aktiv ist und die MapLibre-Assets korrekt eingebunden wurden. Prüfen Sie die Browser-Konsole auf Fehlermeldungen.

Der Bereich erscheint nicht auf der Karte.
Das Koordinatenfeld muss einen gültigen JSON-Array mit mindestens drei Punktpaaren enthalten. Überprüfen Sie den Inhalt unter jsonlint.com. Das Format muss sein: [[lng, lat], [lng, lat], …] (Längengrad zuerst).

Die Marker haben alle dieselbe Farbe.
Stellen Sie sicher, dass jedem Ort im Dropdown eine Kategorie zugewiesen ist.

Der Bereichsname erscheint an der falschen Stelle.
Tragen Sie unter Label Längengrad und Label Breitengrad eine Koordinate ein, die innerhalb des Polygons liegt.

Darf ich die Karte kostenlos auf meiner Website einbinden?
Ja. Die Dienste von basemap.de werden vom Bundesamt für Kartographie und Geodäsie (BKG) und den Ländervermessungsbehörden kostenfrei bereitgestellt. Das Einbinden in eigene Websites ist ausdrücklich erlaubt. Die Geodaten stehen unter der Data Licence Germany – Attribution 2.0 (DL-DE-BY-2.0) bzw. Creative Commons Attribution 4.0 (CC-BY 4.0). Sie müssen das BKG als Quelle angeben. Die vollständigen Nutzungsbedingungen finden Sie in den Nutzungsbedingungen basemap.de (PDF). Weitere Informationen zum Produkt: basemap.de – Web Vektor.

Werden persönliche Daten durch basemap.de gesammelt?
Beim Abrufen der Kartenkacheln erfasst das BKG technische Zugriffsdaten: IP-Adresse, Browser- und Betriebssysteminformationen, den abgerufenen Kartenausschnitt (Koordinaten) sowie Datum und Uhrzeit des Zugriffs. Diese Protokolldaten werden bis zu drei Monate gespeichert und anschließend anonymisiert für Statistikzwecke genutzt. Eine Zusammenführung mit anderen Datenquellen findet nicht statt. Die Rechtsgrundlage ist Art. 6 Abs. 1 lit. e DSGVO (Wahrnehmung einer öffentlichen Aufgabe). Da beim Seitenaufruf eine direkte Verbindung zum BKG-Server hergestellt wird, sollten Sie diesen Umstand in Ihrer Datenschutzerklärung erwähnen. Weitere Informationen: Datenschutz beim BKG.