Comment représenter plusieurs broches au même endroit sur une carte?
Je crée une très petite application qui permet à mes utilisateurs de publier du contenu sur une carte.
L'écran d'accueil de l'application contient une carte avec tous les messages (comme indiqué ci-dessous).
PROBLÈMES
01 - si un utilisateur publie un post dans la même zone, deux broches seront superposées de sorte que vous ne pourrez pas accéder à l'une d'entre elles
02 - si beaucoup de contenu est publié, il sera difficile de cliquer sur chaque épingle
03 - lorsque vous zoomez complètement, il y aura trop de broches
Quelqu'un peut-il recommander d'essayer autre chose s'il vous plaît?
"Comment puis-je faire correctement le clustering sur une carte" est une question courante dans les applications de cartographie.
Réponse courte: Le clustering ne fonctionne pas. Il n'y a pas de bon UX de clustering, car le clustering n'est pas un bon UX.
La raison est simple: L'utilisateur s'intéresse soit à une zone, soit à un point . Il pourrait être intéressé par la densité d'une zone (population, nombre de glaciers à moins de 5 minutes de marche, peu importe), mais les points n'ont pas de densité .
La "moyenne" de deux points ne sera ni l'un ni l'autre. Parfois, cela a un sens (la moyenne des pierres de Stonehenge pourrait représenter le monument), mais la plupart du temps, cela n'a aucun sens.
Cela explique peut-être pourquoi ni Google Maps, Nokia Maps, ni aucun autre fournisseur de cartes à grande échelle n'ont de cluster sur leur carte . Remarque: la plupart d'entre eux l'avaient en phase de conception, Google Maps a même atteint le stade de test A/B lors de sa suppression.
Bien sûr, comme pour chaque règle empirique UX, il y a des exceptions . Jusqu'à présent, je n'en ai vu qu'un: les annonces immobilières. C'est une information significative sur le nombre de propriétés en vente dans une zone donnée, même si celle que j'ai vue avait la notion de quartiers et de quartiers à regrouper. (c'est http://otthonterkep.hu/ )
La solution est également liée à cela: vous devez décider si vous avez des zones ou des points d'intérêt. Bien sûr, ce qui pourrait être un point "d'en haut" pourrait être un domaine examiné de près: par exemple, une ville.
Une zone peut avoir une densité , puis vous pouvez faire une coloration de densité de la zone. Si vous n'avez pas de zones géographiques définies pour une raison quelconque, vous pouvez utiliser des cartes thermiques ou des informations de densité basées sur les cellules (qui sont essentiellement des zones artificielles).
Le regroupement est essentiellement une information de densité affichée sous forme de points - encore une fois, sans signification associée.
Si possible, affichez la densité basée sur les régions, affichez toujours les principales questions de n'importe quelle vue sous forme de liste sous la carte, et affichez les questions individuelles une seule fois suffisamment zoomées pour pouvoir les toucher en toute sécurité indépendamment .
Supposons que vous envisagiez les cartes thermiques, au cas où vous n'auriez pas de régions.
L'un de mes produits cartographiques a défini la chaleur maximale des restaurants comme n'importe quel point, d'où au moins 20 restaurants sont à moins de 5 minutes de marche, la chaleur moyenne était de 10 restaurants et aucune chaleur n'a été définie pour n'importe quel endroit où au moins 2 restaurants n'étaient pas disponibles - donc les structures autonomes ne causeraient pas de "chaleur", car la chaleur était une question de choix et d'abondance.
C'était agnostique au niveau de zoom - une erreur courante que font les fournisseurs de cartes thermiques est qu'ils mesurent en pixels au lieu de mètres, donc leur carte raconte une histoire différente à chaque niveau de zoom.
Une fois zoomé, vous avez vu des endroits répondant aux meilleurs critères de 10% (ou, pour être plus précis: ceux qui étaient au-dessus du cou de la courbe exponentielle des notes) mis en évidence avec de grandes icônes, tandis que les autres étaient de petits points - quelque chose comme Google Maps s'il le fait toujours pour les recherches de "restaurant".
J'espère que cela répond à vos questions.
L'auteur travaille dans une entreprise centrée sur la carte, avait 2 startups basées sur la carte et a travaillé pour l'un des plus grands fournisseurs de cartes de Word en tant que concepteur UX/Prototyper au département de conception de cartes.
Vous communiquez déjà deux dimensions d'informations avec vos icônes:
- Nombre de likes
- Type d'icône (question, publication)
Vous souhaitez ajouter une troisième dimension (plusieurs publications par icône). Ça va être difficile de le faire parce que:
- Faire en sorte que les icônes communiquent plus de 2 dimensions d'informations n'est pas une bonne idée.
- Vous allez avoir besoin d'un moyen d'agréger le nombre de messages/questions pour une icône multiple.
Voici une possibilité:
- Utilisez le
+signe pour indiquer une sorte d'agrégation des likes contenus dans la multi-icône (par exemple, sélectionnez le nombre modal de likes, ou le nombre total de likes. - Taper sur une multi-icône fait apparaître un panneau modal avec les messages/questions à cet endroit, puis l'utilisateur peut sélectionner celui qu'elle veut voir.
La mise en œuvre de ce sera très difficile
Google maps, Yelp, Hotels.com et bien d'autres n'ont pas réussi à faire du bon travail ici car les algorithmes de regroupement géographique ne sont pas faciles.
- Par exemple, imaginez que vous avez 10 points en ligne droite.
- Les regroupez-vous en 2 groupes de 5, 3 groupes de 3 ou 4 ou 5 groupes de 2?
- Où déterminez-vous l'emplacement du multi-pointeur? Comment allez-vous faire cela en temps réel lorsque l'utilisateur fait un zoom avant et arrière sur la carte?
Si vous réussissez à créer un clustering zoomable décent, veuillez déposer une note pour nous montrer vos résultats car quelqu'un pourrait acheter votre entreprise juste pour cet algorithme !!
Il s'agit d'un problème courant avec les cartes. Il existe une solution appelée MarkerClustering. Vous pouvez en lire plus sur le Web. Voici quelques points de départ: https://developers.google.com/maps/articles/toomanymarkers
Et voici un exemple de sa mise en œuvre: http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
