CODEWITHSUNDEEP
azure-mapsazuremapscontrol
David Thielen
David Thielen

Reputation: 32926

Multiple pins - same location

I am displaying a map in my Blazor server side app using AzureMapsControl which wrap Azure maps. I am placing pins using SymbolLayers.

My app is showing upcoming events. There can be numerous different events (on different days) at the same location. Not my use case, but there can be numerous concerts at the same concert hall.

So, what is the best way to render this in Azure Maps. Does it have a mechanism where I pass it 3 individual SymbolLayers and it groups them and provides the UI to list the 3? Or do I need to handle this myself, creating a special SymbolLayer that is a single pin, but then lists the various events there.

The functionality I want from the map is two things:

  1. When the cursor is over the pin, a popup with a short description of the event.
  2. When the pin is clicked, I make a popup over the map visible with the full info on the event.

What I'm asking here (to not violate the Stack Overflow TOS) is - does Azure Maps provide any functionality to handle groups of pins (SymbolLayers)? Or does it do nothing special/different for multiple pins in the same place.

Update: Based on @rbrundritt answer below clustering is clearly the way to go. However, while DataSOurce.SetOptionsAsync() has support to set a Cluster property, that is not sufficient to make this work.

Does anyone know what else needs to be set? I've tried setting some values in SymbolLayerOptions.TextOptions. But nothing I've tried has worked.

Upvotes: 0

Views: 418

Answers (1)

rbrundritt
rbrundritt

Reputation: 17964

There are three main ways I've seen this scenario handled:

  1. Without clustering enabled (pins overlapping), mouse events will return all shapes that are under the mouse as an array (e.g. e.shapes[]). So this provides you with access to all the shapes at a location. From there you can then decide how you want to present this information to the user. A popup or side panel with a list of the content is common. If there is a smaller set of shapes, sometimes I've seen a popup with tabs in or a carousel in it.
  2. When data is clustered, the children of that cluster can be retrieved using the data sources getClusterLeaves method and the ID of the clsuter. Then that data can be presented in similar manners as above. In this scenario, if a cluster has a lot of shapes in it, making the map zoom in, instead of displaying a popup is done. For example: https://samples.azuremaps.com/?search=popup&sample=show-clustered-points-in-popup
  3. When data is clustered, you can have the cluster expand and show all its children, then let the user interact with each one individually: https://samples.azuremaps.com/?search=expand&sample=expanding-spider-clusters This would likely be a lot of work to get working in the Blazor control.

Update:

It's possible that depending on how close you are zoomed in the clustering is disabled. I believe clustering turns off at zoom level 18 by default. You can modify the ClusterMaxZoom option to all you to zoom in cluster and keep points clustered. Here are some data source options to use for clustering:

var options = new DataSourceOptions {
    Cluster = true,       //Turn clustering on.
    ClusterMaxZoom = 22, //Maximum zoom level clustering is done before showing all pins. 
    ClusterRadius = 40   //Pixel distance between pins that get grouped together.
};

If you connect a data source to a symbol layer and don't use a filter, individual locations and clusters will be displayed on the map and look the same. You can use filters and a separate layer for clusters to change how these points look on the map.

It does look like some of the clustering capabilities are missing from that library. This was discussed in this thread: Accessing Azure Maps JavaScript methods via Blazor WASM Maps Component

Upvotes: 0

Related Questions