Google Maps API : gestionnaire automatique de marqueurs

Comme nous l'avons vu dans le billet pr??c??dent sur le gestionnaire de marqueurs, l'API Google Maps ne g??re pas automatiquement le remplacement d'un groupe de marqueurs proches par un marqueur unique ?? faible facteur de zoom. Heureusement, Jef Poskanzer a ??crit une librairie impl??mentant cette fonctionnalit?? : Clusterer.

Partons de l'exemple 9 qui est identique ?? l'exemple 4 d'un pr??c??dent billet auquel j'ai ajouter une concentration importante de marqueurs ?? l'est de Paris. D??clarons la librairie dans l'en-t??te HTML :

<script src="http://www.acme.com/javascript/Clusterer2.jsm" type="text/javascript"></script>

La gestion automatique se fait en d??clarant une variable clusterer, instanci??e dans la fonction load :

var clusterer;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(46.85, 1.75), 6);
clusterer = new Clusterer(map);
clusterer.SetMaxVisibleMarkers(10);
clusterer.SetMinMarkersPerCluster(5);

GDownloadUrl("exemple10.json", setup_json);
} else {
alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur.");
}
}

Un objet Clusterer poss??de 4 m??thodes :

• SetMaxVisibleMarkers(n) : d??finie le nombre de marqueurs au del?? duquel le clustering est mis en place (150 par d??faut).
• SetMinMarkersPerCluster(n) : d??finie le nombre minimum de marqueurs constituant un cluster (5 par d??faut).
• SetMaxLinesPerInfoBox(n) : d??finie le nombre de ligne s'affichant dans la fen??tre d'information du marqueur correspondant au cluster (10 par d??faut).
• SetIcon(icon) : d??finie l'ic??ne du marqueur correspondant au cluster si celui par d??faut ne convient pas.

Il suffit ensuite de remplacer chaque appel ?? map.addOverlay(marker) par un appel ?? clusterer.AddMarker(marker, title) (o?? title est la ligne du marqueur r??el qui s'affichera dans la fen??tre d'information du marqueur correspondant au cluster) et chaque appel ?? map.removeOverlay(marker) par un appel ?? clusterer.RemoveMarker(marker). Exemple dans la fonction setup_json :

setup_json = function(json, status) {
var data = eval('(' + json + ')');

for (var i=0; i<data.markers.length; i++) {
var point = new GLatLng(data.markers[i].lat, data.markers[i].lng);
var marker = createMarker(point, data.markers[i].html);
clusterer.AddMarker(marker, data.markers[i].html);
}

}

Le r??sultat est visible sur l'exemple 10.

Cette solution permet de rendre de bons services, mais n'est toute fois pas id??ale. En effet, le clustering est li?? au nombre de marqueurs plut??t qu'?? leur densit??. Ainsi, deux marqueurs supperpos??s ne seront vus que comme un seul marqueur ?? fort grossissement (en l'absence de clustering). D'autre part, l'algorithme n'est pas tr??s pr??cis : sur l'exemple 10, le marqueur plac?? sur Le Havre a ??t?? int??gr?? au cluster bien qu'il en soit assez ??loign?? !

Les autres billets de cette s??rie sur l'API Google Maps :

• API Google Maps : premi??res cartes
• Google Maps API : marqueurs et fen??tres d'informations
• Google Maps API : affichage des donn??es d'un fichier JSON
• Google Maps API : g??olocalisation (geocoding)
• Google Maps API : un marqueur d??pla??able
• Google Maps API : coordonn??es d'un marqueur
• Google Maps API : gestionnaire de marqueurs
• Google Maps API : gestionnaire automatique de marqueurs