MAPVIEW

interactive map with POI markers

Anzeige & Export

Export erzeugt eine Grafik in Originalgröße des Kartenbildes (inkl. Marker & Labels).

Karte laden

Bild-URL (gleiche Domain für Export empfohlen)

oder Bild-Datei wählen

Tipp: Für Export muss das Bild lokal (Datei) oder mit aktivem CORS von derselben Domain geladen werden.

Marker laden / bearbeiten

Externe Markerdatei

oder Marker-Datei wählen

Marker-JSON (texteditierbar)

Format: Entweder ein Array von Markern oder ein Objekt mit {"imageUrl","markers"}.
Marker-Felder: {"id","name","type","x","y","info", "color?", "scale?"}. x,y in % (0–100) relativ zum Bild.
Types: city, town, village, poi. Typbasierte Standardfarbe und Standardgröße sind konfiguriert; color/scale überschreiben diese pro Marker.

Beispiel anzeigen

{
  "imageUrl": "./img/map.png",
  "markers": [
    {"id":"c1","name":"Hauptstadt","type":"city","x":42.5,"y":58.1,"info":"Bev. 120k, Handel & Verwaltung","scale":1.6},
    {"id":"t1","name":"Felsdorf","type":"town","x":22.3,"y":31.6,"info":"Bergbau & Steinbrüche","color":"#5eead4","scale":1.5},
    {"id":"v1","name":"Weidenau","type":"village","x":73.9,"y":44.2,"info":"Schafzucht, wöchentlicher Markt"},
    {"id":"p17","name":"Alte Brücke","type":"poi","x":60.1,"y":70.3,"info":"Ruine aus dem 3. Zeitalter","color":"#a78bfa","scale":1.7}
  ]
}

Tipp: Alt+Klick auf die Karte kopiert die Koordinaten (%, 2 Dezimalstellen) in die Zwischenablage.

Legende

Marker-Liste

0 Marker

Ping	Typ	Name	X (%)	Y (%)	Info

Hinweise

• Bild-Koordinaten werden unten rechts angezeigt.
• Marker-Tooltip erscheint bei Hover, Details bei Klick.
• Alt+Klick kopiert Koordinaten als JSON-Snippet: "x": 12.34, "y": 56.78.
• Zoom: Buttons oben, oder Ctrl/Cmd + Scroll am Mauszeiger. Reset stellt 1.0x her.
• Pan: Mit gedrückter Leertaste (oder mittlerer Maustaste) ziehen, Cursor zeigt „grabbing“.
• Modi: Standard ist Ansicht. ?mode=edit blendet Editorbereiche ein. Button „Nur ansehen“/„Bearbeiten“ schaltet um.
• Panel: Button „Panel an/aus“ blendet die linke Spalte ein/aus; Karte füllt dann die Breite.
• Labels: Ein/Aus über Button; der Zustand wirkt auch auf den PNG-Export.
• Export: Für Export via Bild-URL sind CORS-Header nötig. Alternativ Bild als Datei laden.

x: – , y: –

Titel