Intégrer une carte OpenStreetMap sur son site internet et gérer les Clusters


    
        
        
        
        
 

Depuis pas mal de temps je suis à la recherche d’une solution optimale pour afficher un certains nombres de points sur un fond de carte pour mon site Rêvedemontagne.

J’ai d’abords fais du développement en utilisant l’API V3 de chez google. Cependant cette solution est devenue payante et impose désormais que l’on donne son numéro de carte bleue. Personnellement je ne veux pas communiquer ce genre d’information à Google

Après de multiples recherches sur le net je me suis inspiré des tutoriels mis à disposition sur le site https://nouvelle-techno.fr pour développer solution optimale pour mon site avec la solution mondiale openstreetmap.

Je vais donc profiter de ce billet pour vous présenter un Pas à Pas de ce que j’ai fais.

Les prérequis :

Avant de suivre mon Pas à Pas je vous recommande d’abord d’avoir assimiler les deux tutoriels ci-dessous :

Cahiers des charges :

  • Localiser différents types de points sur une carte (Sommets, refuges, cols…)
  • Trouver une solution OpenSource
  • Gérer une grande quantité de données en les groupant sous forme de cluster (plus de 600 points au moments ou j’écris ces lignes)
  • Rendre tous ça dynamique

Déroulement du Pas à Pas :

Dans un premier temps je vous transmet la structure XHTML que nous allons utiliser

Je déclare en tête du fichier les librairies CSS propre à l’utilisation des cartes openstreetmap. Afin de s’assurer d’en avoir toujours la dernière version je vous recommande de les récupérer sur le site internet unpkg.com.

Comme pour le point précédent je rajoute dans le bas du fichier les fichiers javascript indispensables pour l’utilisation d’openstreetmap. hébergés sur unpkg.com

Je rajoute le DIV « map » à l’endroit ou je veux afficher la carte.

Je met un peu de CSS dans le header pour mettre en forme le DIV.
Important, veillez à bien lui assigner une hauteur. Dans le cas contraire votre carte ne s’affichera pas.

Partie javascript

Nous allons voir maintenant la partie un peu plus technique du javascript. Avant toute chose vous aurez besoin d’une liste de points. Comme évoqué dans les prérequis pour notre exemple nous allons utiliser celle mise à disposition sur RêvedeMontagne que vous pourrez retrouver ici. Nous l’appellerons avec la méthode « GET ».

Conclusion :

Vous trouverez ci-dessous l’intégralité du code qui me permet d’afficher les cartes openstreetmap sur le site internet RêvedeMontagne.

J’espère que ce tutoriel vous sera utile. N’hésitez pas à utiliser les commentaires pour toutes questions ou demande d’informations complémentaires.

Adrien

Je suis passionné par les nouvelles technologies, notamment par tous ce qui a un rapport avec le multimédia et la domotique. Ce milieu demande une constante remise en question de ces connaissance. Il faut être constamment à la recherche des dernières actualités. J'ai donc décidé de mettre en place ce blog pour instaurer un lieu d'échange et de partage d'informations. Dans un premier temps je serais l'unique auteur des billets qui seront proposés. en fonction de l'attrait que prendra le site internet je serais peut être amené à demander de l'aide à d'autres personnes.

%d blogueurs aiment cette page :