Openstreetmap: incrustar mapa en la página web (como Google Maps)

Ahora también hay Leaflet, que está construido con dispositivos móviles en mente.

Existe una Guía de inicio rápido para el prospecto. Además de características básicas como marcadores, con plugins también soporta enrutamiento usando un servicio externo.

Para un mapa simple, es más fácil y rápido de configurar que OpenLayers, pero totalmente configurable y modificable para usos más complejos.

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

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

Simple Folleto Ejemplo

Especificaciones

• Utiliza OpenStreetMaps.
• Centra el mapa en el GPS objetivo.
• Coloca un marcador en el GPS objetivo.

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/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>
<div id="osm-map"></div>

Nota:

Usé la versión CDN de Leafletaquí, pero puedes descargar los archivos para que puedas servirlos e incluirlos desde tu propio host.

Puede usar OpenLayers (API js para mapas).

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

Hay una forma sencilla de hacerlo si le temes a Javascript...Todavía estoy aprendiendo. Open Street hace un simple plugin de Wordpress que puedes personalizar. Añadir complemento de widget de OSM.

Esto será un relleno hasta que averigüe mi concotion Python Java usando los archivos de línea coverter TIGER de la Oficina del Censo.