Google Maps API : gestionnaire automatique de marqueurs

Posté par david le 21 Novembre, 2007 - 20:42. Ingénierie web | JavaScript | Web 2.0

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 :

Google Maps API : gestionnaire de marqueurs

Posté par david le 20 Novembre, 2007 - 19:54. Ingénierie web | JavaScript | Web 2.0

Reprenons notre exploration de l'API Google Maps pour résoudre le problème suivant : comment afficher un unique marqueur regroupant plusieurs marqueurs lorsque le niveau de zoom est faible ? En effet, lorsque le nombre de marqueurs est très important sur une petite région, la carte est difficile à lire et lente à s'afficher. La réponse semble être le gestionnaire de marqueurs GMarkerManager.

Partons de l'exemple 4 d'un précédent billet dans lequel nous déléguons l'affichage des marqueurs à un gestionnaire de marqueurs. Pour cela, on déclare une variable mgr, que l'on instancie dans la fonction load :

var mgr; 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); mgr = new MarkerManager(map); GDownloadUrl("exemple04.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

L'ajout des marqueurs se fait dans la fonctions setup_json en créant d'abord un tableau de marqueurs, markers, ajouter en une fois à la carte via la fonction addMarkers prenant comme second paramètre le niveau de zoom minimum en deçà duquel les marqueurs ne sont pas affichés, et un troisième argument optionnel, le niveau de zoom maximum au delà duquel les marqueurs ne sont pas affichés :

setup_json = function(json, status) { var data = eval('(' + json + ')'); var markers = new Array(); 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); markers.push(marker); } mgr.addMarkers(markers, 5); mgr.refresh(); }

Le résultat est visible sur l'exemple 8.

On peut appeler plusieurs fois la méthode addMarkers avec différents tableaux de marqueurs pour différents niveau de zoom et gérer ainsi, à la mano, les regroupements de marqueurs. Cela implique donc de calculer, sur le serveur, l'emplacement des marqueurs qui prendront la place d'un ensemble de marqueurs et du niveau de zoom auquel on affiche chacun... Pas simple ! Heureusement il existe une solution toute faite via une librairie JavaScript... Suite au prochain épisode !

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

Le syndrome facebook

Posté par david le 25 Octobre, 2007 - 20:52. Conseil | Web 2.0

Billet supprimé à la demande de mon ancien client car il divulguait des « sensitive information ».

Principes de base pour des applications facebook réussies

Posté par david le 18 Septembre, 2007 - 15:09. Conseil | Web 2.0

Pourquoi certaine applications facebook sont de véritables succès tandis que d'autres sont des flops certains ? Selon Jesse farmer, de 20bits, il y aurait six principes de base :

  1. Simplicité. Comme toujours, plus votre application est simple à utiliser, plus ses chances de succès sont élevées.
  2. Socialisation. Facebook étant avant tout un réseau social, ses utilisateurs l'utilisent pour cela. Les fonctionnalités de votre application doivent être sociales avant tout, c'est à dire, présenter certaines facettes (goûts, activités, caractéristiques, etc) d'un utilisateur à d'autres utilisateurs.
  3. Viralité. Plus votre application est intrinsèquement virale, plus elle aura de succès. Certaines ne sont même que des idées virales : Vampires, WereWolves et... Vampires vs. Werewolves
  4. Cohérence. Votre application doit être cohérente avec la philosophie et les fonctionnalités du réseau social. Beaucoup d'applications réussies ne font qu'étendre les fonctionnalité de base de facebook.
  5. Originalité. Certains types d'applications sont déjà sur-représentés, comme les applications de citations (52 à ce jour depuis Dr. Martin Luther King Jr. quotes jusqu'à The Simpsons Quotes). Ne faites pas une n-ième application de ce genre sous peine de faire un flop.
  6. Qualité. Votre application doit être de grande qualité, en particulier, sans bug, rapide et robuste. Les utilisateurs n'hésitent pas à désinstaller une application boguée, lente ou inaccessible, quelqu'en soi l'origine.
Rien de nouveau ici : simplicité, cohérence, originalité et qualité sont des principes universels. S'y ajoutent socialisation et viralité qui sont deux principes extrêmement efficaces sur un réseau social, mais beaucoup plus complexes à mettre en œuvre. L'application doit en effet porter en elle-même ces deux principes, sans pour autant n'être que purement artificielle (comme Vampires par exemple) au risque d'avoir un succès... très éphémère.
Enfin, l'application doit être rentable, c'est à dire générer des revenus, car la popularité à un coût.

Flux XML