Openstreetmap: intégration de la carte dans la page Web (comme Google Maps)

96

Existe-t-il un moyen d'intégrer / mashup l'OpenStreetMap dans votre page (comme la façon dont l' API Google Maps fonctionnement de l' )?

J'ai besoin d'afficher une carte à l'intérieur de ma page avec des marqueurs et d'autoriser le glisser / zoomer, peut-être le routage. Je soupçonne qu'il y aurait une API Javascript pour cela, mais je n'arrive pas à la trouver.

La recherche me donne une API pour accéder aux données brutes de la carte , mais cela semble être plus pour l'édition de la carte; de plus, travailler avec cela serait une tâche lourde pour AJAX.

Piskvor a quitté le bâtiment
la source

Réponses:

32

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

Il existe un guide de démarrage rapide pour la brochure. Outre les fonctionnalités de base telles que les marqueurs, avec les plugins, il prend également en charge le routage à l' aide d'un service externe.

Pour une carte simple, il est à mon humble avis plus facile et plus rapide à configurer que OpenLayers, mais entièrement configurable et modifiable pour des utilisations plus complexes.

Piskvor
la source
25

Démo / exemple de carte simple OSM Slippy

Cliquez sur "Exécuter l'extrait de code" pour voir une carte glissante OpenStreetMap intégrée avec un marqueur dessus. Cela 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.
  • N'utilise Leaflet que comme dépendance.

Remarque:

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

totymedli
la source
J'ai utilisé votre code dans une fonction javascript, et cela fonctionne comme un charme. Mais encore une fois, le déclenchement de cette fonction agrandit la carte osm et détruit tout. Toute solution ?
0x48piraj
2
@ 0x48piraj Veuillez créer un jsfiddle pour illustrer le problème, ou mieux encore: posez une nouvelle question avec votre code qui montre ce qui ne va pas.
totymedli
C'est beau. Merci beaucoup! Une question cependant: chez var target = L.latLng()vous définissez clairement les coordonnées. Une chance de montrer comment implémenter le cas où les coordonnées de plusieurs points sont stockées dans une structure JSON? Merci!
Lucas Aimaretto le
1
Cela n'est utilisé que pour la vue où le centre de la carte doit être situé. Vous ajoutez les marqueurs avec L.marker(target).addTo(map);Just loop votre structure et créez autant de L.latLng()s que vous en avez besoin et passez-les L.marker().
totymedli
6

Jetez un œil à mapstraction . Cela peut vous donner plus de flexibilité pour fournir des cartes basées sur google, osm, yahoo, etc., mais votre code n'aura pas à changer.

Alan
la source
leur site Web semble être en panne.
maddrag0n
1
Cela fonctionne, mais seulement sans le sous-domaine "www": mapstraction.com .. exactement ce que j'ai cherché, merci pour ça!
david
mapstraction n'est pas maintenue depuis près de 10 ans maintenant :)
Julian F. Weinert
5

Je voudrais également jeter un œil aux outils de développement de CloudMade . Ils offrent un service de carte de base OSM magnifiquement stylé, 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.

atogle
la source
4

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

Il y a un exemple sur leur page montrant comment intégrer des tuiles OSM.

Edit: Nouveau lien vers des exemples OpenLayers

diciu
la source
C'est ce que je cherchais, merci beaucoup. Cependant, je ne peux accepter qu'une seule réponse, donc cela va à la plus détaillée.
Piskvor a quitté le bâtiment
3
Le lien est mort.
totymedli
2

Si vous souhaitez simplement intégrer une carte OSM sur une page Web, le moyen le plus simple est d'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éploiement de votre propre Slippy Map ".

Krubo
la source
0

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

Ce sera un remplissage jusqu'à ce que je découvre ma concotion Python Java en utilisant les fichiers de ligne de couverture TIGER du Bureau du recensement.

David Spahn
la source
Moi, je suis bien plus inquiet pour Wordpress que pour JS, mais c'est une question d'opinion. Merci :)
Piskvor a quitté le bâtiment le
Btw TIGER est réservé aux États-Unis.
Piskvor a quitté le bâtiment le