Karte von OpenStreetMap einbinden

Detail of "Spider web at sunrise" - Luc Viatour / www.Lucnix.be

Karte von OpenStreetMap einbinden

Interaktives Kartenmaterial auf Ihrem Webauftritt

Mit FirstSpirit ist es möglich interaktive Karten direkt in Ihren Webauftritt einzubinden. In diesem Artikel wird erläutert, wie Sie dies mir dem Kartenmaterial von OpenStreetMap einfach tun können.

Titelleiste Openstreetmap

OpenStreetMap ist offen und unabhängig von Google, Microsoft oder anderen kommerziellen Anbietern. OpenStreetMap funktioniert ähnlich wie ein Wiki:

Registrierte Benutzer können die Karten mit eigenen Informationen anreichern. Die Studierenden der TU Darmstadt tragen bereits intensiv zu OpenStreetMap bei. Auf diese Weise sind hier die Gebäude der TU Darmstadt bereits sehr detailliert eingetragen worden, detaillierter als dies z. B. bei Google-Maps der Fall ist. Sie können die Karten auf diese Weise ebenfalls um die von Ihnen gewünschten Informationen anreichern.

Wenn Sie eine Karte zu Ihrer Seite hinzufügen möchten folgen Sie einfach dieser Anleitung:

Kartenausschnitt festlegen und als HTML-Code generieren

Karten von OpenStreetMap teilen

Öffnen Sie OpenStreetMap im Browser und navigieren Sie zu dem gewünschten Kartenabschnitt. Bitte beachten Sie, dass Java-Script aktiviert sein muss.

Klicken Sie nun in der Leiste rechts auf der Seite auf das Icon für „Teilen“ und wählen Sie anschließend den Reiter HTML aus.

Unter dem Punkt Ausgabe erscheint nun ein HTML-Element „<iframe src=“[…]„>“ wobei Sie aus diesem nur den Inhalt des Attributes „src“ kopieren müssen.

Sie kopieren also nur das hier fett gedruckte, aus dem Textfeld in Ihre Zwischenablage und ignorieren den Rest.

Info: Nutzen Sie immer „https://“ und nicht „http://“

<iframe width=„425“ height=„350“ frameborder=„0“ scrolling=„no“ marginheight=„0“ marginwidth=„0“ src=„https://www.openstreetmap.org/export/embed.html?bbox=8.66652,49.85138,8.6922,49.86637&amp;layer=mapnik“ style=„border: 1px solid black“></iframe><br /><small><a href=„https://www.openstreetmap.org/?lat=49.858875&amp;lon=8.679359999999999&amp;zoom=16&amp;layers=M“>Gr&#246;&#223;ere Karte anzeigen</a></small>

Karte in FirstSpirit-Absatzvorlage „Multimedia-Objekt“ einbetten

Legen Sie nun in Ihrem Projekt eine neue Seite an. Wenn die Karte die ganze Breite einnehmen soll, wählen Sie einfach die Seitenvorlage „Eine extrabreite Spalte“ aus.

Fügen Sie sodann zu dieser oder einer bestehenden Seite einen Absatz vom Typ „Multimedia-Objekt“ (aus dem Ordner „Erweitert“) hinzu.

Tragen Sie nun als Datei den Link ein, den Sie zuvor kopiert hatten. Lassen Sie jedoch den Mime-Type, sowie die Parameter leer.

Tragen Sie als Breite, je nach Seite, max 529px bzw bei extrabreiten Seiten max. 730px ein.

Speichern Sie die Seite wie gewohnt ab und geben Sie sie frei, sobald Sie mit dem Ergebnis zufrieden sind.