Multiple markers at same point in Azure Maps

Question

Hi,

I recently started using Azure Maps.

In my project I want to show multiple markers at the same point(same latitude and longitude).

I have a list view at the side which shows the marker details. Also there is a popup on the Markers.

When I click on the list view item I want to show the marker with the same details on the list view.

When there is only one marker at one point my code works. But when I have multiple markers at the same point only the first marker is shown(I believe the rest of the markers are below it).

Is there a way to change the position on the markers? By that I mean when I click on one item on the list view I want the marker associated with it to be at the top of the multiple markers.

Thanks in advance

Answer 1

Sounds like clustering is the solution for you. This will create a single pin for the overlapping pins. When clicked, you can get a list of all the child pins within it, then loop through your list and highlight accordingly. Here are some useful resources:

https://learn.microsoft.com/en-us/azure/azure-maps/clustering-point-data-web-sdk

https://azuremapscodesamples.azurewebsites.net/?search=clustering

Tip, here is how you get all the child pins within a cluster:

   datasource.getClusterLeaves(cluster.properties.cluster_id, Infinity, 0).then(function (points) {  
       //Do something with the points.  
     
     
   });  

Answer 2

@rbrundritt thanks for your help. I will try it out.

Thanks for your suggestion to try out WebView in Xamarin Forms. I am now doing it parallel to the web app.

I was able to add the .html file (with Azure Maps) to the respective folders in different platforms and call them from the View.xaml.cs in shared Xamarin forms project.

But I am unable to send a viewmodel object(which has latitude/longitude info coming from database) to the WebView. Any suggestions?

The below is the code used to pass values to js function in the html file

 string jsonString = JsonSerializer.Serialize(vm);  
 await WebView.EvaluateJavaScriptAsync($"jsFunction({jsonString})");  

And code in the jsfuction in the html page is as below,

var locationDetails = [];  
  
function jsFunction(models) {  
     locationDetails = JSON.parse(models);  
}  

But the values are not getting passed to the html page. So the pins are not visible.

Answer 3

When you use clustering it will only show one pin. If you want to show a different pin for a cluster based on what's inside of it, you will want to use a cluster aggregate to aggregate some metric that can be used in a data driven style. https://learn.microsoft.com/en-us/azure/azure-maps/clustering-point-data-web-sdk#aggregating-data-in-clusters For example, the following is a modified version of the sample in the docs that uses a symbol layer and uses a red marker if there is one or more restaurants in a cluster, and a blue marker otherwise.

   var map, datasource;  
     
   //GeoJSON feed that contains the data we want to map.  
   var geojsonFeed = 'https://azuremapscodesamples.azurewebsites.net/Common//data/geojson/SamplePoiDataSet.json';  
     
   //Colors for each EntityType property in point data: [Gas Station, Grocery Store, Restaurant, School]  
   var entityTypes = ['Gas Station', 'Grocery Store', 'Restaurant', 'School'];  
     
   function GetMap() {  
   	//Initialize a map instance.  
   	map = new atlas.Map('myMap', {  
   		center: [-97, 39],  
   		zoom: 3,  
   		view: 'Auto',  
     
   		authOptions: {  
   			authType: 'subscriptionKey',  
   			subscriptionKey: 'szw7L2B0SNkxRapuYhVLZUimqMUHfraJD-joQ65gd4M'  
   		}  
   	});  
     
   	//Wait until the map resources are ready.  
   	map.events.add('ready', function () {  
   	    
   		//Create a data source and add it to the map.  
   		datasource = new atlas.source.DataSource(null, {  
   			cluster: true,  
     
   			//The radius in pixels to cluster points together.  
   			clusterRadius: 50,  
     
   			//Calculate counts for each entity type in a cluster as custom aggregate properties.  
   			clusterProperties: {   
   				'Gas Station': ['+', ['case', ['==', ['get', 'EntityType'], 'Gas Station'], 1, 0]],  
   				'Grocery Store': ['+', ['case', ['==', ['get', 'EntityType'], 'Grocery Store'], 1, 0]],  
   				'Restaurant': ['+', ['case', ['==', ['get', 'EntityType'], 'Restaurant'], 1, 0]],  
   				'School': ['+', ['case', ['==', ['get', 'EntityType'], 'School'], 1, 0]]  
   			}  
   		});  
   		map.sources.add(datasource);  
     
   		map.layers.add([  
   			//Create a symbol layer to render the count of locations in a cluster.  
   			new atlas.layer.SymbolLayer(datasource, null, {  
   				iconOptions: {  
   					image: [  
   						'case',  
   						['>', ['get', 'Restaurant'], 0],  
   						'marker-red',  
   						  
   						'marker-blue'  
   					]  
   				},  
   				textOptions: {  
   					textField: ['get', 'point_count_abbreviated'],  
   					offset: [0, -1],  
   					color: 'white'  
   				}  
   			}),  
     
   			//Create a layer to render the individual locations.  
   			new atlas.layer.SymbolLayer(datasource, null, {  
   				iconOptions: {  
   					image: 'pin-blue'  
   				},  
   				filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.  
   			})  
   		]);  
     
   		//Import the GeoJSON data into the data source.  
   		datasource.importDataFromUrl(geojsonFeed);  
   	});  
   }