Multiple icons appear when zooming in on Azure maps

Question

We currently use Azure Maps for our web based solution and everything works great. We have many points on the map (as Shapes) that relate to assets for our customers.

I have been tasked with adding additional functionality, such that as well as displaying assets on the map, we would also like to display customer depots (probably about 3 in total), each with a radius of approx 1km.

I have implemented 2 shape to represent a customer depots, but when I zoom in on the map to street-level, the circle stays where it should, but I get two or three or more random icons appear. On zooming out, all is good.

I've changed the code around to try Shapes and Features, and both give the same result. The only way I can temporarily resolve it, is to limit the layers visibility, when zooming in (which is not great from a user-experience).

Any suggestions for a better way, that works when fully zoomed in?Screenshot 2023-01-11 14.49.42.png

p1 = new atlas.data.Point([0.96015, 51.85546]);
point = new atlas.Shape(p1, null, {
	subType: "Circle",
        radius: 1000,
	icon: 'red',
});

//Load all the custom image icons into the map resources.
Promise.all(iconPromises).then(function () {

	var symbolLayer_assets = new atlas.layer.SymbolLayer(datasource, null, {
        visible: true,
        iconOptions: {
        	allowOverlap: true,
                             
                //Use a match expression to select the image icon based on the property value of the data point.
                image: [
              	     'case',

                      //Verify the feature has a property property.
                      ['has', 'icon'],

                      //If it does, use it to determine which icon to use.
                      [
                      	'match',

                         ['get', 'icon'],
	
                         //For each property value, specify the icon name to use.
                         '25', 'icon-25',
                         '50', 'icon-50',
                         '51', 'icon-51',
                         '61', 'icon-61',
                         '68', 'icon-68',
                         '82', 'icon-82',

                         'black', 'marker-black',
                         'red',   'marker-red',
                         'none',  'none',

                          //Default fallback icon.
                         'marker-red'
                     	],
                        //Default fallback icon.
                        'marker-red'
               		]
      		}
	});
	map.layers.add(symbolLayer_assets);

});


//Create a polygon layer to render the filled in area of the circle polygon, and add it to the map.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
	fillColor: 'yellow',
        fillOpacity: 0.4,
        maxZoom: 24,
}));

Answer 1

Circles are converted into polygons with 37 positions (36 unique, and a common start/end position) when rendered. As such, when rendered with a symbol layer, icons are displayed within a grid pattern within the polygon. Think of an ocean polygon and how the label is almost always visible. Labels are generally within 512px away from each other (one per vector tile used under the hood for rendering). So, if the polygon is using more than 512 pixels of displayed space on the screen, more than one label is likely to be displayed. If you only want a single symbol displayed in the center of the polygon, an easy way to do this is to create a Point geometry from the center position and then adding a filter to the symbol layer that only renders positions. For example:

//Add the center point to the data source.
datasource.add(p1);

var symbolLayer_assets = new atlas.layer.SymbolLayer(datasource, null, {
   //Use a filter to ensure only Point objects are rendered.
   filter: ['==', ['geometry-type'], 'Point']
});

Answer 2

Thank you for your reply, unfortunately it didn't work for me.

I have however found another way to achieve this using an HtmlMarker as follows:-

var depot_shape = new atlas.Shape(new atlas.data.Point([depot.coordinates[0], depot.coordinates[1]]), null, {
	subType: "Circle",
        radius: 10000,
        icon: 'none',
        visible: true
});
datasource.add(depot_shape);
                     
// Add depot marker(s)
var depot_marker = new atlas.HtmlMarker({
        color: 'DodgerBlue',
        text: 'D',
        position: [depot.coordinates[0], depot.coordinates[1]],
        popup: new atlas.Popup({
        	content: '<div style="padding:10px">' + 'Depot #' + index + '</div>',
                pixelOffset: [0, -30]
	})
});
map.markers.add(depot_marker);

//Add a click event to toggle the popup.
map.events.add('click', depot_marker, () => {
	depot_marker.togglePopup();
});

//Create a polygon layer to render the filled in area of the circle polygon, and add it to the map.
map.layers.add(new atlas.layer.PolygonLayer(datasource, null, {
	fillColor: 'rgba(0, 200, 200, 0.4)',
}));