• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Frontend

Google Map : Marker cluster par pays

Récemment nous avons eu une demande spécifique pour afficher les marqueurs sur une Google map : les points devaient être groupés par pays.
Notre cas était encore plus spécifique car il fallait que certains points restent en dehors du cluster des pays : nous
 devions pouvoir regrouper toutes les villes de France mais laisser les points de Paris dans un cluster à part. Pour le reste, il fallait regrouper les marqueurs par pays.

Par défaut les clusters regroupent les points par rapport à un rayon sur la carte, en cercle, suivant un certain algorithme. Il n’y a pas de notion de pays, régions ou de frontières qui est prise en compte. J’ai trouvé un cas en leaflet où les développeurs ont modifié l’algorithme suivant leurs besoins – consistant à modifier directement une librairie, ce qui est rarement conseillé – afin de regrouper les points par région.

Mais jusque là personne ne savait comment faire un regroupement des clusters par pays, mais nous avons trouvé une solution ! Celle-ci consiste à renseigner par avance à quel pays appartient un marqueur. Ce n’est pas une solution miracle pour toutes les situations, mais pour tous les sites qui souhaitent regrouper leurs magasins ou lieux d’implantation par pays, les informations sont disponibles en base de données.

L’idée a été de créer plusieurs marker clusters sur la carte : lors de l’initialisation d’un marqueur, on l’ajoute à un cluster ou un autre, suivant ce qu’on souhaite. Cela permet de laisser l’algo de clustering fonctionner tout seul, sans le modifier, et de faire en sorte que les points se regroupent suivant le pays/cluster prédéfini. Un peu de code sera plus clair.

Exemple de cluster par pays

var data = [
  {cluster: 'Paris', name: 'Paris', lat: 48.8589507, lng: 2.2775175},
  {cluster: 'France', name: 'Melun', lat: 48.5421645, lng: 2.6377199},
  {cluster: 'France', name: 'Lyon', lat: 45.7580101, lng: 4.8001017},
  {cluster: 'Germany', name: 'Berlin', lat: 52.5076682, lng: 13.2860632},
  {cluster: 'Germany', name: 'Baden Baden', lat: 48.7574219, lng: 8.1443686},
  {cluster: 'United Kingdom', name: 'Londres', lat: 51.5287718, lng: -0.2416803},
  {cluster: 'United Kingdom', name: 'Bristol', lat: 51.468575, lng: -2.6607488},
  {cluster: 'United Kingdom', name: 'Plymouth', lat: 50.3888309, lng: -4.1824949},
];

function initMap() {
  var map = new google.maps.Map(document.getElementById('cnim-google-map'), {
    center: {lat: 46.52863469527167, lng: 2.43896484375},
    zoom: 5
  });
 
  // Inits marker list by "place" for multiple clusters
  var placeMarkerList = {};
 
  // Checks every place
  for (var index = 0; index < data.length; ++index) {
    var place = data[i];
    var latLng = new google.maps.LatLng(place.lat, place.lng);
 
    // Sets the cluster is not already set
    if(!placeMarkerList.hasOwnProperty(place.cluster)) {
      placeMarkerList[place.cluster] = [];
    }

    // Adds the marker
    var marker = new google.maps.Marker({
      position: latLng
    });
    placeMarkerList[place.cluster].push(marker);
  }
 
  // Parse every cluster to display a marker cluster for each one
  for (var markerName in placeMarkerList) {
    if (placeMarkerList.hasOwnProperty(markerName)) {
      var markerCluster = new MarkerClusterer(map, placeMarkerList[markerName]);
    }
  }
}

Un exemple est disponible sur codepen: http://codepen.io/jvallet/pen/BLpQWV

Le résultat du code ci-dessus (un peu plus stylisé) :

Rendu de la google map avec regroupement des points par pays

Nous avons bien un cluster par pays, et Paris hors du cluster.

Notre carte finale ne contient qu’une centaine de points. Je pense que sur des gros volumes cette solution doit être assez peu performante, à vérifier. Cette alternative a l’avantage d’être flexible, mais impose de connaitre la localisation des différents points à l’avance et de les renseigner ; cela reste tout de même idéal pour les sociétés qui veulent afficher leurs magasins sur une carte.

Dans notre cas, les clusters changent à chaque niveau de zoom (par continent, par pays – sauf les capitales, puis chaque ville est séparée en gardant le cluster pour les capitales…). On supprime et recréé les clusters à chaque changement de zoom sans soucis de performance pour notre volume de données, et le résultat est là : un contrôle plus fin et plus propre des regroupements de marqueurs de la carte.

21/09/2016 3 MIN READ TAGS: Développement, google map, Javascript, markerClusterer BY: Jonathan VALLET 0 COMMENT
SHARE
LIRE LA SUITE

Jonathan VALLET

Passionné de jeux vidéos, j'ai d'abord suivi un cursus de développeur avant de me spécialiser avec une année de Game Design. Après 2 ans et demi chez Ubisoft sur le développement de leur premier MMO par navigateur, puis quelques autres expériences, j'ai rejoint AdFab en 2013. Je m'occupe désormais du développement d'applis mobile et de sites généralement très graphiques.

Développer dans les meilleures conditions en 2017 - Retour d’expérience d’un jeune développeur

Monitoring avec Telegraf, Chronograf et InfluxDB

VOUS POURRIEZ AIMER

Jeux JS13K 2018 – Post mortem – FR

Frontend Jeux J13K : développer un jeu de moins de 13KB

L'actualité AdFab Défi au NDC hackathon : concevoir un produit en 2 jours (part. 2 : le développeur)

Jeux JS13K – Post Mortem – EN

Gestion de projet L’importance de l’analyse d’impact durant une TMA

Frontend Utiliser tous les verbes HTTP avec CORS

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect