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

95

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.

javascript api maps openstreetmap Piskvor saiu do prédio
fonte

Respostas:

32

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.

Piskvor
fonte
25

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

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.

totymedli
fonte
Usei seu código em uma função javascript e funciona perfeitamente. Mas, novamente, ativando essa função, amplia o mapa de osm e destrói tudo. Qualquer solução ?
0x48piraj
2
@ 0x48piraj Por favor, crie um jsfiddle para demonstrar o problema, ou ainda melhor: faça uma nova pergunta com seu código que mostre o que está errado.
totymedli
Isso é lindo. Muito obrigado! Uma pergunta, porém: em var target = L.latLng()você defina claramente as coordenadas. Alguma chance de mostrar como implementar o caso em que as coordenadas de vários pontos são armazenadas dentro de uma estrutura JSON? Obrigado!
Lucas Aimaretto
1
Isso é usado apenas para a visualização em que o centro do mapa deve estar localizado. Você adiciona os marcadores com L.marker(target).addTo(map);Just loop your structure e cria quantos L.latLng()s você precisa e os passa para L.marker().
totymedli
6

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.

Alan
fonte
o site deles parece estar fora do ar.
maddrag0n
1
Funciona, mas só sem o subdomínio "www": mapstraction.com ..exatamente o que pesquisei, obrigado por isso!
David
mapstraction não é mantido há quase 10 anos :)
Julian F. Weinert
5

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.

atogle
fonte
4

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

diciu
fonte
Isso é o que eu estava procurando, muito obrigado. No entanto, só posso aceitar uma resposta, então vou para a mais detalhada.
Piskvor saiu do prédio
3
O link está morto.
totymedli
2

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

Se você quiser fazer algo mais elaborado, consulte o wiki do OSM " Implementando seu próprio Mapa Slippy ".

Krubo
fonte
0

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.

David Spahn
fonte
Eu estou muito mais preocupado com o Wordpress do que com o JS, mas isso é uma questão de opinião. Obrigado :)
Piskvor saiu do prédio em
Btw TIGER é apenas para os EUA.
Piskvor saiu do prédio em