Kartenausschnitt

Diese Anleitung zeigt, wie Sie den Kartenausschnitt in der Anwendung Kartenviewer über die mapView-Konfiguration in der config.json individuell anpassen können.

Vorwissen

Aufbau der mapView-Konfiguration

"mapView": {
  "backgroundImage": "...",
  "startCenter": [x, y],
  "extent": [minX, minY, maxX, maxY],
  "options": [...],
  "resolution": Zahl,
  "zoomLevel": Zahl,
  "epsg": "EPSG:xxxx"
}

Erklärung der mapView Attribute

Attribut	Typ	Beschreibung
backgroundImage	String	Optional. Pfad zu einem alternativen Hintergrundbild.
startCenter	Array	Initialer Mittelpunkt der Karte im gewählten Koordinatensystem.
extent	Array	Begrenzung des sichtbaren Kartenbereichs ([minX, minY, maxX, maxY]).
options	Array	Liste der verfügbaren Zoomstufen (siehe unten).
resolution	Float	Startauflösung. Hat Vorrang vor zoomLevel.
zoomLevel	Integer	Alternativer Startzoom, wenn resolution nicht gesetzt ist.
epsg	String	EPSG-Code des verwendeten Koordinatensystems. Muss unterstützt sein.

→ Dokumentation mapview

Attributbeschreibung von "options"

Eine option definiert eine einzelne Zoomstufe in der Karte. Sie wird über drei Werte festgelegt:
die Auflösung, die Maßstabszahl und das Zoom-Level.

Name	Verpflichtend	Typ	Default	Beschreibung
resolution	ja	Number	–	Auflösung der Zoomstufe
scale	ja	Integer	–	Maßstabszahl der Zoomstufe
zoomLevel	ja	Integer	–	Nummer der Zoomstufe

Struktur einer Zoomstufe

Beispiel:

{
  "resolution": 28,
  "scale": 100000,
  "zoomLevel": 4
}

tipp

Je höher das zoomLevel, desto größer ist der Maßstab (scale) – und desto "näher" ist man an der Oberfläche dran.

Umsetzung

Individuellen Kartenausschnitt bestimmen

Um einen individuellen Startausschnitt zu erstellen, folgen Sie diesen Schritten:

1. Öffnen Sie den Kartenviewer und verwenden Sie das → Koordinatenabfrage-Tool , um die gewünschte Startposition (Mittelpunkt) der Karte zu ermitteln.
2. Notieren Sie sich die Koordinaten (X/Y), z. B. [334058.69, 5809605.26] und tragen Sie sie in das Attribut startCenter ein.
3. Navigieren Sie mittels Zoom im Viewer zu dem Ausschnitt, den Sie als Startansicht verwenden möchten.
4. Unten im Viewer, im Footer-Bereich, finden Sie die aktuelle Auflösung (z. B. 7 oder 2.8).
5. Diese Auflösung geben Sie im Feld resolution in der config.json an.
6. Achten Sie darauf, dass der gewählte Wert exakt in der Liste der options vorkommt – nur dann ist er gültig.

Beispiel 1: BBViewer

"mapView": {
  "backgroundImage": "./ressources/img/backgroundCanvas.jpeg",
  "startCenter": [
      368033,
      5806749
  ],
  "extent": [-100737,
      5554842,
      885809,
      6061328
  ],
  "options": [{
          "resolution": 420,
          "scale": 1500000,
          "zoomLevel": 0
      },
      {
          "resolution": 280,
          "scale": 1000000,
          "zoomLevel": 1
      },
      {
          "resolution": 140,
          "scale": 500000,
          "zoomLevel": 2
      },
      {
          "resolution": 70,
          "scale": 250000,
          "zoomLevel": 3
      },
      {
          "resolution": 28,
          "scale": 100000,
          "zoomLevel": 4
      },
      {
          "resolution": 14,
          "scale": 50000,
          "zoomLevel": 5
      },
      {
          "resolution": 7,
          "scale": 25000,
          "zoomLevel": 6
      },
      {
          "resolution": 2.8,
          "scale": 10000,
          "zoomLevel": 7
      },
      {
          "resolution": 2.1,
          "scale": 7000,
          "zoomLevel": 8
      },
      {
          "resolution": 1.4,
          "scale": 5000,
          "zoomLevel": 9
      },
      {
          "resolution": 1.12,
          "scale": 4000,
          "zoomLevel": 10
      },
      {
          "resolution": 0.7,
          "scale": 2500,
          "zoomLevel": 11
      },
      {
          "resolution": 0.42,
          "scale": 1500,
          "zoomLevel": 12
      },
      {
          "resolution": 0.28,
          "scale": 1000,
          "zoomLevel": 13
      },
      {
          "resolution": 0.14,
          "scale": 500,
          "zoomLevel": 14
      },
      {
          "resolution": 0.07,
          "scale": 250,
          "zoomLevel": 15
      }

  ],
  "epsg": "EPSG:25833",
  "startResolution": 420
},

Beispiel 2: Brandenburg an der Havel

"mapView": {
  "backgroundImage": "/ressources/img/backgroundCanvas.jpeg",
  "startCenter": [
      334058.69,
      5809605.26
  ],
  "extent": [
      -100737,
      5554842,
      885809,
      6061328
  ],
  "options": [
      {
          "resolution": 420,
          "scale": 1500000,
          "zoomLevel": 0
      },
      {
          "resolution": 280,
          "scale": 1000000,
          "zoomLevel": 1
      },
      {
          "resolution": 140,
          "scale": 500000,
          "zoomLevel": 2
      },
      {
          "resolution": 70,
          "scale": 250000,
          "zoomLevel": 3
      },
      {
          "resolution": 28,
          "scale": 100000,
          "zoomLevel": 4
      },
      {
          "resolution": 14,
          "scale": 50000,
          "zoomLevel": 5
      },
      {
          "resolution": 7,
          "scale": 25000,
          "zoomLevel": 6
      },
      {
          "resolution": 2.8,
          "scale": 10000,
          "zoomLevel": 7
      },
      {
          "resolution": 1.4,
          "scale": 5000,
          "zoomLevel": 8
      },
      {
          "resolution": 0.7,
          "scale": 2500,
          "zoomLevel": 9
      },
      {
          "resolution": 0.28,
          "scale": 1000,
          "zoomLevel": 10
      },
      {
          "resolution": 0.14,
          "scale": 500,
          "zoomLevel": 11
      }
  ],        
  "epsg": "EPSG:25833",
  "resolution": 7
},

Technische & konzeptionelle Punkte

• EPSG-Code prüfen
  Stellen Sie sicher, dass der verwendete epsg-Code zum Koordinatensystem ihrer Region passt (z. B. EPSG:25833 für Brandenburg).

• Extent sinnvoll wählen
  Der angegebene extent sollte den gewünschten Kartenausschnitt vollständig umschließen – nicht zu groß, nicht zu klein.

• Startcenter korrekt setzen
  Wählen Sie einen Mittelpunkt (startCenter), der innerhalb des extent liegt und den zentralen Arbeitsbereich darstellt.

• Zoomstufen konsistent definieren
  Die Einträge unter options sollten sinnvoll abgestuft sein und keine Duplikate bei zoomLevel oder resolution enthalten.

• Kartenbildschirmgröße beachten
  Die Darstellungsgröße im Browser beeinflusst die sichtbare Fläche – ggf. extent anpassen.

• EPSG-Kompatibilität der Layer prüfen
  Hintergrundkarten und Dienste (z. B. WMS) müssen mit dem angegebenen epsg kompatibel sein.

• Performance im Blick behalten
  Zu viele Zoomstufen oder hohe Auflösungen können die Performance beeinträchtigen.

• Responsives Verhalten testen
  Stellen Sie sicher, dass der Kartenausschnitt auf unterschiedlichen Geräten (Desktop, Tablet, Smartphone) korrekt funktioniert.