web-dev-qa-db-fra.com

Comment faire face lorsque deux ou plusieurs marqueurs d'une carte sont très proches?

J'apprécierais si vous pouviez m'aider à trouver une solution élégante au problème d'avoir de nombreux marqueurs dans presque la même position d'une carte. Le clustering n'est pas une bonne solution dans ce cas étant donné que, même sur un zoom au niveau de la rue, vous pouvez en voir beaucoup. Je pensais créer une liste déroulante d'éléments à côté de la carte, mais je préfère d'abord vérifier quelques suggestions.

lots of markers even with a stree-level zoom

21

Ayant le point de vue cartographique, à mon avis, le clustering peut certainement être la voie à suivre dans un tel cas.

Dans l'exemple suivant, des points très proches les uns des autres:

enter image description here

étaler en cliquant dessus: ( source de capture d'écran )

enter image description here

Vous pouvez également le combiner avec la méthode "traditionnelle" de clustering. Cela signifie que lorsque vous atteignez votre niveau de zoom maximal et que les objets sont encore trop proches les uns des autres, vous pouvez cliquer sur le symbole de cluster et les objets répartis et vous pouvez cliquer dessus séparément: ( source de capture d'écran )

cluster before click > cluster after click

De plus, vous pouvez donner à vos utilisateurs la possibilité de contrôler les catégories qu'ils souhaitent voir, ce qui augmenterait la convivialité de votre carte, même sans aucune forme de clustering.

24
tallistroan

J'ai trouvé Instagram très pratique en ce qui concerne sa fonctionnalité de carte. Vous pourriez peut-être utiliser quelque chose de similaire à celui-ci puisque

  • il semble moins encombré
  • il est clair combien il y a d'articles
  • lorsque vous cliquez, vous pouvez afficher à droite ou à gauche de l'écran la liste des lieux où ils se trouvent

Instagram

23
Dimitra Miha

Avant de conclure que le clustering est ou n'est pas la voie à suivre, la question est de savoir quels sont les besoins de l'utilisateur.

Il existe potentiellement deux besoins lors de l'utilisation d'une carte:

  • Exploration: qu'est-ce qui existe?
  • Lieu: où est-il?

Une langue: l'utilisateur recherche un "article", par exemple le restaurant "Delicious". Un "article" appartient à une "catégorie d'articles", par exemple "Restaurant". Les autres catégories d'articles peuvent être "Cinéma", "Galerie d'art", "Bars", etc.

Besoin d'exploration: un utilisateur explore des articles d'une catégorie d'articles (par exemple des restaurants) dans une certaine zone de la carte. Il est logique d'afficher tous les éléments dans une certaine zone de carte. L'utilisateur doit pouvoir accéder à tous les éléments uniques de la catégorie d'élément sélectionnée.

Besoin de localisation: Un utilisateur recherche un article spécifique (le restaurant "Delicious") d'une catégorie d'article spécifique ("Restaurant"). L'utilisateur a une idée de l'endroit où il se trouve. L'utilisateur doit pouvoir accéder à tous les éléments uniques de la catégorie d'élément sélectionnée. Pour le besoin de localisation, un accès direct, par ex. via un champ de recherche est efficace (l'utilisateur peut saisir "Délicieux" et la carte affiche les hits).

Dans les deux cas: s'il y a trop d'éléments pour qu'ils se chevauchent sur la carte (comme indiqué dans l'énoncé du problème), l'utilisation d'un groupe d'éléments permet d'éviter les chevauchements. Le groupe d'éléments doit également fonctionner comme un filtre de catégorie. Ainsi, lorsqu'il est sélectionné, les éléments d'autres catégories d'éléments ne sont pas affichés.

J'ai joint un diagramme qui indique comment une interface utilisateur peut prendre en charge la recherche (exploration et localisation).

La solution proposée est similaire à @tallistroan, elle montre le flux entre les groupes d'éléments et les éléments et met l'accent sur l'utilisation des groupes d'éléments comme filtres. La liste des résultats avec le chemin de navigation est facultative, mais utile pour prendre en charge une navigation ciblée entre les niveaux.

enter image description here

Espérons que cela aide.

3
hhd