Openstreetmap: incrustación del mapa en la página web (como Google Maps)

¿Hay alguna forma de insertar / mezclar OpenStreetMap en su página (como funciona la API de Google Maps )?

Necesito mostrar un mapa dentro de mi página con algunos marcadores y permitir arrastrar / hacer zoom, tal vez enrutar. Sospecho que habría alguna API de Javascript para esto, pero parece que no puedo encontrarla.

La búsqueda me da una API para acceder a datos de mapas sin procesar , pero eso parece ser más para la edición de mapas; además, trabajar con eso sería una tarea pesada para AJAX.

Necesita usar algunas cosas de JavaScript para mostrar su mapa. OpenLayers es la opción número uno para esto.

Hay un ejemplo en http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example y algo más avanzado en

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

y

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

Ahora también está Leaflet , que se creó pensando en los dispositivos móviles.

Hay una Guía de inicio rápido para el folleto. Además de las funciones básicas como los marcadores, con los complementos también admite el enrutamiento mediante un servicio externo.

Para un mapa simple, en mi humilde opinión es más fácil y rápido de configurar que OpenLayers, pero completamente configurable y modificable para usos más complejos.

Demostración / ejemplo simple de mapa deslizante de OSM

Haga clic en "Ejecutar fragmento de código" para ver un mapa deslizante de OpenStreetMap incrustado con un marcador en él. Esto fue creado con Leaflet .

Código

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

Especificaciones

• Utiliza OpenStreetMaps.
• Centra el mapa en el GPS de destino.
• Coloca un marcador en el GPS de destino.
• Solo usa Leaflet como dependencia.

Nota:

Usé la versión CDN de Leaflet aquí, pero puede descargar los archivos para que pueda servirlos e incluirlos desde su propio host.

Eche un vistazo a mapstraction . Esto puede brindarle más flexibilidad para proporcionar mapas basados ​​en google, osm, yahoo, etc., sin embargo, su código no tendrá que cambiar.

También echaría un vistazo a las herramientas de desarrollo de CloudMade . Ofrecen un servicio de mapas base OSM bellamente diseñado, un complemento OpenLayers e incluso su propio cliente de mapas JavaScript ligero y muy rápido. También albergan su propio servicio de enrutamiento, que mencionó como un posible requisito. Tienen gran documentación y ejemplos.

Puede utilizar OpenLayers (API js para mapas).

Hay un ejemplo en su página que muestra cómo incrustar mosaicos OSM.

Editar: Nuevo enlace a ejemplos de OpenLayers

Si solo desea incrustar un mapa de OSM en una página web, la forma más sencilla es obtener el código iframe directamente del sitio web de OSM:

1. Navegue hasta el mapa que desee en https://www.openstreetmap.org
2. En el lado derecho, haga clic en el icono "Compartir", luego haga clic en "HTML"
3. Copie el código iframe resultante directamente en su página web. Debe tener un aspecto como este:

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

Si desea hacer algo más elaborado, consulte la wiki de OSM " Implementación de su propio mapa deslizante ".

Hay una forma sencilla de hacerlo si le temes a Javascript ... todavía estoy aprendiendo. Open Street crea un complemento de Wordpress simple que puede personalizar. Agregue el complemento OSM Widget.

Esto será un relleno hasta que descubra mi concotión Python Java usando archivos de línea TIGER de coverter de la Oficina del Censo.