Site des exemples HTML, CSS, Javascript et PHP - Page 6

La cartographie avec OpenStreetMap et Leaflet - 4 types de marqueur

La cartographie fait intervenir 3 acteurs :
• Une base de données cartographique :  OpenStreetMap  est la base libre.
  La BDD contient des objets, des positions et tout un tas d'informations structurées; mais pas le moindre dessin.
• Un fournisseur de tuiles, OpenStreetMap peux aussi fournir les tuiles pour un usage modéré. A la page suivante on essayera OpenTopoMap.
  Les tuiles sont des images souvent en bitmap de 256 x 256 pixels. Au niveau de zoom 1, 4 tuiles représentent le monde; en zoom 10 il faut un peu plus d'un million de tuiles !
• Une bibliothèque d'affichage des tuiles, ici c'est  Leaflet 
  Cette bibliothèque JAVASCRIPT est assez légère bien que très puissante; on peux y adjoindre des extensions.

La DIV contenant la carte DOIT mentionné une largeur et une hauteur, ici par le biais de la classe .Carte
La fonction ShowCarte1() exécutée par le ONLOAD du BODY crée un objet VarCarte en précisant les coordonnées du centre et le niveau de zoom. On crée ensuite les objets Marker; voir le code source.
Nous avons sur cette carte 4 types de marqueurs :
  ► En haut à gauche un marqueur simple
  ► En haut à droite un marqueur avec info-bulle et popup au click
  ► Au milieu un marqueur personnalisé (bateau) avec info-bulle et popup au click
  ► En bas un marqueur personnalisé avec info-bulle et déplaçable; au relachement ses coordonnées apparaissent sous la carte

La bibliothèque Leaflet aves son extension MarkerCluster

Pour fonctionner il faut déclarer un fichier JAVASCRIPT, un fichier CSS et une image pour le marqueur par défaut; l'URL de cette image se retrouve dans le CSS.
L'option MarkerCluster (Voir ci-dessous) comporte aussi un JS et un CSS. Par simplicité j'ai concaténé les 2 fichiers JS et les 2 fichiers CSS.
Vous pouvez télécharger ma version de Leaflet.

Une carte avec un cluster de marqueurs

La fonction ShowCarte2() définit maintenant un objet MarkerClusterGroup, y ajoute des marqueurs. La couche de l'objet MyCluster est ensuite ajoutée à la carte.