web-dev-qa-db-fra.com

Openstreetmap: intégrer une carte dans une page Web (comme Google Maps)

Existe-t-il un moyen d’intégrer/de mashup OpenStreetMap dans votre page (comme le moyen API Google Maps fonctionne)?

Je dois afficher une carte dans ma page avec des marqueurs et autoriser le glissement/le zoom, peut-être le routage ... Je suppose qu'il y aurait une API Javascript pour cela, mais je n'arrive pas à la trouver.

La recherche me procure un API pour l’accès aux données cartographiques brutes , mais cela semble être plus pour l’édition de cartes; de plus, travailler avec ça serait une lourde tâche pour AJAX.

javascriptapimapsopenstreetmap
66
Piskvor

Vous devez utiliser des éléments JavaScript pour afficher votre carte. OpenLayers est le choix numéro un pour cela.

Il y a un exemple à http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example et quelque chose de plus avancé à

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

et

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

52
lhahne

Il y a maintenant aussi Leaflet , qui est conçu pour les appareils mobiles. 

Il existe un Guide de démarrage rapide pour la notice. Outre les fonctionnalités de base telles que les marqueurs, avec les plugins, il prend également en charge routing utilisant un service externe.

Pour une carte simple, il est plus facile et plus rapide à configurer à l’IMHO que OpenLayers, tout en étant entièrement configurable et modifiable pour des utilisations plus complexes.

23
Piskvor

Démonstration/exemple de carte simple OSM Slippy

Cliquez sur "Lancer un extrait de code" pour voir une carte intégrée OpenStreetMap avec un marqueur. Ceci a été créé avec Leaflet .

Code

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

Spécifications

  • Utilise OpenStreetMaps.
  • Centre la carte sur le GPS cible.
  • Place un marqueur sur le GPS cible.

Remarque:

J'ai utilisé la version CDN de Leaflet ici, mais vous pouvez télécharger les fichiers afin que vous puissiez les servir et les inclure à partir de votre propre hôte.

11
totymedli

Jetez un oeil à mapstraction . Cela peut vous donner plus de flexibilité pour fournir des cartes basées sur Google, OSM, Yahoo, etc., mais votre code ne devra pas changer.

6
Alan

Je voudrais aussi jeter un coup d'œil aux outils de développement de CloudMade . Ils offrent un service de carte de base OSM magnifiquement conçu, un plugin OpenLayers et même leur propre client de cartographie JavaScript léger et très rapide. Ils hébergent également leur propre service de routage, que vous avez mentionné comme une exigence possible. Ils ont une excellente documentation et des exemples.

5
atogle

Vous pouvez utiliser OpenLayers (API js pour les cartes).

Il y a un exemple sur leur page montrant comment incorporer des tuiles OSM.

3
diciu

Si vous souhaitez simplement intégrer une carte OSM à une page Web, le moyen le plus simple consiste à obtenir le code iframe directement à partir du site Web OSM:

  1. Accédez à la carte souhaitée sur https://www.openstreetmap.org
  2. Sur le côté droit, cliquez sur l'icône "Partager", puis sur "HTML".
  3. Copiez le code iframe résultant directement dans votre page Web. Ça devrait ressembler à ça:

<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 vous voulez faire quelque chose de plus élaboré, consultez le wiki OSM " Déployer votre propre carte Slippy ".

1
krubo

Il existe un moyen simple de le faire si vous craignez le Javascript ... J'apprends toujours. Open Street crée un simple plugin Wordpress que vous pouvez personnaliser. Ajouter le plugin OSM Widget.

Ce sera une charge jusqu’à ce que je trouve ma concotion Java Python à l’aide des fichiers de lignes de recouvrement TIGER du Census Bureau.

0
David Spahn