Azure Indoor Maps: Pins/Markers are not visible when they are very close to each other.

Koushal Jain 41

Hi All,

I am using Symbol layer for showing the pins in Azure Indoor Maps. When the pins or pins text are nearby to each other they will be hidden and I am not able to see those pins even with max zoom level.

Also the unit label text is not visible when some pins are near by or they collide with unit label text.

Please let me know what is the best approach in order to see both the unit label text and pins when they are near by or collide to each other.

QuantumCache 20,261 Reputation points

2022-10-19T23:09:06.363+00:00

Hello @Koushal Jain Just checking in if you have had a chance to see the previous response.

If the response is helpful, please click "Accept Answer" and upvote it. So that we can close this thread.
AshokPeddakotla-MSFT 32,701 Reputation points

2022-10-26T15:21:49.44+00:00

@Koushal Jain Wanted to follow up with you to understand whether the below information helped.
If below suggestions answers your query, do click Accept Answer and Up-Vote for the same. And, if you have any further query do let us know.

2 answers

rbrundritt 17,181 Microsoft Employee

Zoom level 24 is the max you can zoom in, note that a single pixel at that zoom level is about 1 cm. If your screenshot is at zoom level 24, I would estimate those three pins are within half a meter of each other. There is no way to keep the text from overlapping using unclustered points. When you use clustering and are seeing multiple overlapping circles using the bubble layer, that's because the clusterMaxZoom option of the data source defaults to level 18, which means that when you zoom in closer than level 18, it stops clustering. You can change this value in the data source options.

One approach you could take is to use clustering (with adjusted max zoom to 24) and aggregate the text labels using cluster properties. Then display the cluster using a symbol layer and display the aggregated text. For example, if your text is stored in the "name" property of your features, you could do something like this.

   <!DOCTYPE html>  
   <html lang="en">  
   <head>  
       <title></title>  
     
       <meta charset="utf-8" />      
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  
     
       <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->  
       <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />  
       <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>  
         
       <script>  
           var map, datasource;  
     
           var sampleData = {  
   		  "type": "FeatureCollection",  
   		  "features": [  
   			{  
   			  "type": "Feature",  
   			  "properties": { "name": "Pin 1"},  
   			  "geometry": {  
   				"coordinates": [  
   				  -122.15607542906952,  
   				  47.574635735979626  
   				],  
   				"type": "Point"  
   			  }  
   			},  
   			{  
   			  "type": "Feature",  
   			  "properties":  { "name": "Pin 2"},  
   			  "geometry": {  
   				"coordinates": [  
   				  -122.07369712074322,  
   				  47.56878542872829  
   				],  
   				"type": "Point"  
   			  }  
   			},  
   			{  
   			  "type": "Feature",  
   			  "properties":  { "name": "Pin 3"},  
   			  "geometry": {  
   				"coordinates": [  
   				  -122.11271842468733,  
   				  47.54830420657862  
   				],  
   				"type": "Point"  
   			  }  
   			},  
   			{  
   			  "type": "Feature",  
   			  "properties":  { "name": "Pin 4"},  
   			  "geometry": {  
   				"coordinates": [  
   				  -122.06502571986704,  
   				  47.56293446792915  
   				],  
   				"type": "Point"  
   			  }  
   			}  
   		  ]  
   		};  
     
           //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', {  
                   view: 'Auto',  
     
                   //Add authentication details for connecting to Azure Maps.  
                   authOptions: {  
                       authType: 'subscriptionKey',  
                       subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'  
                   }  
               });  
     
               map.events.add('ready', function () {  
                   //Create a data source and add it to the map.  
                   datasource = new atlas.source.DataSource(null, {  
                       cluster: true,  
     
                       clusterMaxZoom: 24,  
     
                       clusterProperties: {   
                           'name': ['concat', ['concat', ['get', 'name'], '\n']],  
                       }  
                   });  
                   map.sources.add(datasource);  
   				  
   				datasource.setShapes(sampleData);  
     
                   map.layers.add(  
                       new atlas.layer.SymbolLayer(datasource, null, {  
                           textOptions: {  
                               textField: ['get', 'name']  
                           }  
                       })  
                   );  
               });  
           }  
       </script>  
   </head>  
   <body onload="GetMap()">  
       <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>  
   </body>  
   </html>

rbrundritt 17,181 Reputation points Microsoft Employee

2022-10-19T16:26:49.587+00:00
This is the collision detection working. You can disable using the following settings in your symbol layer (in addition to any other options you are using):

iconOptions: { ignorePlacement: true, allowOverlap: true }, textOptions: { ignorePlacement: true, allowOverlap: true }
Please sign in to rate this answer.
Koushal Jain 41 Reputation points

2022-10-20T08:25:57.713+00:00

Hi @rbrundritt , Thanks for your response. We have tried the above options and now we are able to see the text as shown below: ![252335-sample.png][1] As seen in the screenshot the text is not visible properly with max zoom level. Is there a way to increase max zoom level more than 24 as text is overlapping for the pins (optional parameter set to true is also not helping us). Please let me know if there is any other approach to view the text and pins simultaneously in Azure Indoor Maps. Also, once we enabled clustering using bubble layer an additional black circle is appearing below for each pin. How can we remove this? [1]: /api/attachments/252335-sample.png?platform=QnA
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Azure Indoor Maps: Pins/Markers are not visible when they are very close to each other.

2 answers

Your answer