Openstreetmap: incorporare la mappa nella pagina web (come Google Maps)

C'è un modo per incorporare / mashup OpenStreetMap nella tua pagina (come il modo in cui funziona l'API di Google Maps )?

Devo mostrare una mappa all'interno della mia pagina con alcuni marker e consentire il trascinamento / zoom, magari il routing. Sospetto che ci sarebbero alcune API Javascript per questo, ma non riesco a trovarlo.

La ricerca mi fornisce un'API per l'accesso ai dati cartografici grezzi , ma sembra essere più per la modifica della mappa; inoltre, lavorare con quello sarebbe un compito pesante per AJAX.

Devi usare alcune cose JavaScript per mostrare la tua mappa. OpenLayers è la scelta numero uno per questo.

C'è un esempio su http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example e qualcosa di più avanzato su

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

e

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

Ora c'è anche Leaflet , che è stato creato pensando ai dispositivi mobili.

C'è una guida rapida per il volantino. Oltre alle funzionalità di base come i marker, con i plugin supporta anche il routing tramite un servizio esterno.

Per una mappa semplice, IMHO è più facile e veloce da configurare rispetto a OpenLayer, ma completamente configurabile e modificabile per usi più complessi.

Semplice OSM Slippy Map Demo / Esempio

Fare clic su "Esegui snippet di codice" per vedere una slippy map OpenStreetMap incorporata con un indicatore su di essa. Questo è stato creato con Leaflet .

Codice

// 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>

Specifiche

• Utilizza OpenStreetMaps.
• Centra la mappa sul GPS di destinazione.
• Posiziona un marker sul GPS di destinazione.
• Utilizza solo Leaflet come dipendenza.

Nota:

Ho usato la versione CDN di Leaflet qui, ma puoi scaricare i file in modo da poterli pubblicare e includerli dal tuo host.

Dai un'occhiata a mapstraction . Questo può darti maggiore flessibilità per fornire mappe basate su google, osm, yahoo, ecc.Tuttavia, il tuo codice non dovrà cambiare.

Vorrei anche dare un'occhiata agli strumenti per sviluppatori di CloudMade . Offrono un servizio di mappe di base OSM dal design accattivante, un plug-in OpenLayers e persino il proprio client di mappatura JavaScript leggero e molto veloce. Ospitano anche il proprio servizio di routing, che hai menzionato come possibile requisito. Hanno un'ottima documentazione ed esempi.

Puoi utilizzare OpenLayers (API js per le mappe).

C'è un esempio sulla loro pagina che mostra come incorporare i riquadri OSM.

Modifica: nuovo collegamento agli esempi di OpenLayers

Se desideri semplicemente incorporare una mappa OSM in una pagina web, il modo più semplice è ottenere il codice iframe direttamente dal sito web OSM:

1. Vai alla mappa che desideri su https://www.openstreetmap.org
2. Sul lato destro, fai clic sull'icona "Condividi", quindi su "HTML"
3. Copia il codice iframe risultante direttamente nella tua pagina web. Dovrebbe sembrare come questo:

<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>

Se vuoi fare qualcosa di più elaborato, vedi il wiki di OSM " Deploy your own Slippy Map ".

C'è un modo semplice per farlo se temi Javascript ... Sto ancora imparando. Open Street crea un semplice plugin per Wordpress che puoi personalizzare. Aggiungi il plugin OSM Widget.

Questo sarà un riempitivo fino a quando non scoprirò la mia miscela Python Java usando i file della linea TIGER coverter dal Census Bureau.