DE:OSM-map as screenshot

From OpenStreetMap Wiki
Jump to navigation Jump to search

Die Karte von Openstreetmap wird auf einer Website am einfachsten als Bild (Screenshot) eingebunden. Dieses Bild wird mit einem Link zu Openstreetmap verknüpft. Mit Klick auf das Bild landet man dann direkt in der zoombaren und verschiebbaren Weltkarte. Dort kann man mit einem Marker gezielt eine Position anzeigen.

Screenshot erstellen

Wähle in der Karte von Openstreetmap einen Ausschnitt, auf dem das was Du auf dem Bild zeigen willst gut zu sehen ist.

  1. erstelle mit <Druck> (oben rechts auf der Tastatur) eine Bildschirmkopie
  2. öffne in einem Bildbearbeitungsprogramm (z.B. Gimp, Photoshop oder ganz einfach Paint) eine neue Datei
    und füge mit <Strg-c> die eben erstellte Bildschirmkopie aus der Zwischenablage ein
  3. schneide mit dem Ausschneide-Werkzeug einen passenden Ausschnitt aus
  4. hier kann nun eine Hervorhebung eingefügt werden, beispielsweise ein Ortsname unterstrichen, ein roter Kreis um das Ziel, eine Fläche eingefärbt, je nach Bearbeitungsprogramm.
  5. Bild (am Besten als .png-Datei) speichern

Bild in Website einbinden

Angezeigt wird das Bild auf der Website durch folgenden HTML-Code:

<img alt="Bildbeschreibungs-Text" src="Bild-Dateiname" border="0">

Positioniert wird das Bild durch CSS (oder eine HTML-Tabelle). Bei XHTML steht direkt vor der schließenden spitzen Klammer ein Schrägstrich.

Bild mit Link zu OpenStreetMap verknüpfen

Erstelle einen Link, der direkt die Weltkarte von OpenStreetMap öffnet und dort einen genauen Kartenausschnitt mit Marker anzeigt.

Verknüpfe das Bild auf der Website mit dem eben erstellten Permalink:

<a href="OSM-Permalink"><img alt="Bildbeschreibungs-Text" src="Bild-Dateiname" border="0"></a>

Bei XHTML steht vor der schließenden spitzen Klammer des img-Tags ein Schrägstrich.

Siehe auch