Openstreetmap : intégration d'une carte dans une page web (comme Google Maps)

Question

Existe-t-il un moyen d'incorporer/masquer l'OpenStreetMap dans votre page (comme la façon dont le API Google Maps fonctionne) ?

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

La recherche me permet d'obtenir un API pour l'accès aux données cartographiques brutes mais cela semble plutôt destiné à l'édition de cartes ; de plus, travailler avec cela serait une tâche lourde pour AJAX.

Answer 1

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

Vous trouverez un exemple à l'adresse suivante 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

Answer 2

Il y a maintenant aussi Dépliant qui est conçu pour les appareils mobiles.

Il existe un Guide de démarrage rapide pour le dépliant. Outre les fonctionnalités de base telles que les marqueurs, il prend également en charge, grâce à des plugins, les éléments suivants routage en utilisant un service externe.

Pour une carte simple, il est, à mon avis, plus facile et plus rapide à mettre en place qu'OpenLayers, tout en étant entièrement configurable et ajustable pour des utilisations plus complexes.

Answer 3

Jetez un coup d'œ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.

Answer 4

J'aimerais également jeter un coup d'œil à Outils de développement de CloudMade . Ils proposent un service de carte de base OSM de très belle facture, un plugin OpenLayers et même leur propre client cartographique JavaScript léger et très rapide. Ils hébergent également leur propre service de routage, que vous avez mentionné comme une exigence possible. Leur documentation et leurs exemples sont excellents.

Answer 5

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

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

Edit : Nouveau Lien vers les exemples d'OpenLayers