Openstreetmap: Einbetten der Karte in eine Webseite (wie Google Maps)

Gibt es eine Möglichkeit, die OpenStreetMap in Ihre Seite einzubetten / zu mischen (wie die Google Maps-API funktioniert)?

Ich muss eine Karte auf meiner Seite mit einigen Markierungen anzeigen und das Ziehen / Zoomen, möglicherweise das Routing, zulassen. Ich vermute, dass es dafür eine Javascript-API geben würde, aber ich kann sie anscheinend nicht finden.

Durch die Suche bekomme ich eine API für den Zugriff auf rohe Kartendaten , aber das scheint eher für die Kartenbearbeitung zu sein. Außerdem wäre es für AJAX eine schwere Aufgabe, damit zu arbeiten.

Sie müssen JavaScript verwenden, um Ihre Karte anzuzeigen. OpenLayers ist hierfür die erste Wahl.

Es gibt ein Beispiel unter http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example und etwas Fortgeschritteneres unter

http://wiki.openstreetmap.org/wiki/OpenLayers_Marker

und

http://wiki.openstreetmap.org/wiki/Openlayers_POI_layer_example

Es gibt jetzt auch eine Broschüre , die speziell für mobile Geräte entwickelt wurde.

Es gibt eine Kurzanleitung für die Broschüre. Neben grundlegenden Funktionen wie Markern unterstützt es mit Plugins auch das Routing über einen externen Dienst.

Für eine einfache Karte ist es meiner Meinung nach einfacher und schneller einzurichten als OpenLayers, jedoch vollständig konfigurierbar und für komplexere Anwendungen optimierbar.

Einfache OSM Slippy Map Demo / Beispiel

Klicken Sie auf "Code-Snippet ausführen", um eine eingebettete OpenStreetMap-Slippy-Map mit einer Markierung anzuzeigen. Dies wurde mit Leaflet erstellt .

Code

// Where you want to render the map.
var element = document.getElementById('osm-map');

// Height has to be set. You can do this in CSS too.
element.style = 'height:300px;';

// Create Leaflet map on map element.
var map = L.map(element);

// Add OSM tile leayer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Target's GPS coordinates.
var target = L.latLng('47.50737', '19.04611');

// Set map's center to target with zoom 14.
map.setView(target, 14);

// Place a marker on the same location.
L.marker(target).addTo(map);

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

Technische Daten

• Verwendet OpenStreetMaps.
• Zentriert die Karte auf das Ziel-GPS.
• Platziert eine Markierung auf dem Ziel-GPS.
• Verwendet nur Leaflet als Abhängigkeit.

Hinweis:

Ich habe hier die CDN-Version von Leaflet verwendet , aber Sie können die Dateien herunterladen, um sie von Ihrem eigenen Host bereitzustellen und einzuschließen.

Schauen Sie sich Mapstraction an . Dies kann Ihnen mehr Flexibilität bei der Bereitstellung von Karten geben, die auf Google, Osm, Yahoo usw. basieren. Ihr Code muss sich jedoch nicht ändern.

Ich würde mir auch die Entwicklertools von CloudMade ansehen . Sie bieten einen wunderschön gestalteten OSM-Basiskartendienst, ein OpenLayers-Plugin und sogar ihren eigenen leichten, sehr schnellen JavaScript-Mapping-Client. Sie hosten auch ihren eigenen Routing-Service, den Sie als mögliche Anforderung genannt haben. Sie haben eine großartige Dokumentation und Beispiele.

Sie können OpenLayers (js API für Karten) verwenden.

Auf ihrer Seite finden Sie ein Beispiel für das Einbetten von OSM-Kacheln.

Bearbeiten: Neuer Link zu OpenLayers-Beispielen

Wenn Sie nur eine OSM-Karte in eine Webseite einbetten möchten, ist es am einfachsten, den Iframe-Code direkt von der OSM-Website abzurufen:

1. Navigieren Sie unter https://www.openstreetmap.org zu der gewünschten Karte
2. Klicken Sie auf der rechten Seite auf das Symbol "Teilen" und dann auf "HTML".
3. Kopieren Sie den resultierenden Iframe-Code direkt auf Ihre Webseite. Es sollte so aussehen:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&amp;layer=mapnik" 
style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=12/17.0759/-61.8260">View Larger Map</a></small>

Wenn Sie etwas ausführlicheres tun möchten, lesen Sie das OSM-Wiki " Bereitstellen Ihrer eigenen Slippy Map ".

Es gibt einen einfachen Weg, dies zu tun, wenn Sie Javascript fürchten ... Ich lerne noch. Open Street erstellt ein einfaches Wordpress-Plugin, das Sie anpassen können. Fügen Sie das OSM-Widget-Plugin hinzu.

Dies wird ein Füllstoff sein, bis ich meine Python-Java-Konkotion mithilfe von TIGER-Zeilendateien des Census Bureau herausgefunden habe.