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

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.

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 sur http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example et quelque chose de plus avancé sur

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

et

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

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.

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

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.

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.

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.

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

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 ".

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.