Openstreetmap: mapa de incorporação em página da web (como o Google Maps)

Existe uma maneira de incorporar / mashup o OpenStreetMap em sua página (como a forma como a API do Google Maps funciona)?

Preciso mostrar um mapa dentro da minha página com alguns marcadores e permitir arrastar / aplicar zoom, talvez rotear. Eu suspeito que haveria alguma API Javascript para isso, mas não consigo encontrar.

A pesquisa me dá uma API para acesso a dados brutos do mapa , mas isso parece ser mais para edição de mapas; além disso, trabalhar com isso seria uma tarefa pesada para AJAX.

Você precisa usar algum material de JavaScript para mostrar seu mapa. OpenLayers é a escolha número um para isso.

Há um exemplo em http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example e algo mais avançado em

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

e

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

Agora existe também o Folheto , que foi criado pensando nos dispositivos móveis.

Existe um guia de início rápido para o folheto. Além de recursos básicos, como marcadores, com plug-ins também suporta roteamento usando um serviço externo.

Para um mapa simples, é IMHO mais fácil e rápido de configurar do que OpenLayers, embora totalmente configurável e ajustável para usos mais complexos.

Demonstração / exemplo de mapa simples OSM Slippy

Clique em "Executar trecho de código" para ver um mapa deslizante do OpenStreetMap integrado com um marcador. Isso foi criado com o folheto .

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>

Especificações

• Usa OpenStreetMaps.
• Centraliza o mapa no GPS de destino.
• Coloca um marcador no GPS de destino.
• Só usa o folheto como uma dependência.

Nota:

Usei a versão CDN do Folheto aqui, mas você pode baixar os arquivos para veiculá-los e incluí-los em seu próprio host.

Dê uma olhada em mapstraction . Isso pode dar a você mais flexibilidade para fornecer mapas com base no google, osm, yahoo, etc, porém seu código não terá que mudar.

Eu também daria uma olhada nas ferramentas de desenvolvedor da CloudMade . Eles oferecem um serviço de mapa de base OSM com um estilo bonito, um plug-in OpenLayers e até mesmo seu próprio cliente de mapeamento JavaScript leve e muito rápido. Eles também hospedam seu próprio serviço de roteamento, que você mencionou como um possível requisito. Eles têm uma ótima documentação e exemplos.

Você pode usar OpenLayers (API js para mapas).

Há um exemplo em sua página mostrando como incorporar blocos OSM.

Editar: Novo link para exemplos de OpenLayers

Se você deseja apenas incorporar um mapa OSM em uma página da web, a maneira mais fácil é obter o código iframe diretamente do site do OSM:

1. Navegue até o mapa que deseja em https://www.openstreetmap.org
2. No lado direito, clique no ícone "Compartilhar" e em "HTML"
3. Copie o código iframe resultante diretamente em sua página da web. Deve ser assim:

<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 você quiser fazer algo mais elaborado, consulte o wiki do OSM " Implementando seu próprio Mapa Slippy ".

Existe uma maneira simples de fazer isso se você tem medo de Javascript ... Ainda estou aprendendo. Open Street cria um plugin simples para Wordpress que você pode personalizar. Adicione o plugin OSM Widget.

Isso será um preenchimento até que eu descubra minha concoção Python Java usando arquivos de linha TIGER coverter do Census Bureau.