how do you loop through html markers collection

Question

im trying to loop through a collection of html markers in javascript for azure maps but even though there are markers on the map, the getMarkers method which is supposed to return an array of markers on the map (https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.htmlmarkermanager?view=azure-maps-typescript-latest#azure-maps-control-atlas-htmlmarkermanager-getmarkers) has a length of 0? im not entirely sure how to loop through the marker collection?

Answer 1

First verify you are adding HTML markers to the map. You should have code that looks like this:

//Create a marker that has the default htmlContent.
var marker = new atlas.HtmlMarker({
	position: [0, 0],
});

//Add the marker to the map.
map.markers.add(marker);

Once the markers are added to the map, you can get an array of all markers and loop through them like this:

var markers = map.markers.getMarkers();

for(var i=0;i<markers.length;i++){
	var marker = markers[i];
	
	//Do something with the marker.
}

Now, HTML markers are only one way to display points on the map and should only be used in the following scenarios:

• You want to use CSS or HTML elements to render the pin/marker.
• You have a small number of points. HTML markers use HTML elements to render the icons, the more HTML elements on a page, the slower the page gets. Less than a hundred points is fine, but a few hundred or thousand and you will start to see a slowdown in most computers. You will be unlikely to render ten thousand plus markers.
• You want/need to be able to drag the marker around using the mouse. Dragging HTML markers is a lot smoother than trying to drag an icon that is rendered in an HTML Canvas (WebGL).

Now the main way to render points in Azure Maps, and more modern web map platforms, is with WebGL. Azure Maps does this using data sources and rendering layers. This separates the data management from the rendering process and provides a lot of performance enhancements and advanced styling capabilities. Here is a simple example of how this is done:

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Load data (you can also pass Shape objects, or in an array of GeoJSON features/Shape obejcts in).
datasource.add(new atlas.data.Feature(new atlas.data.Point([0, 0]), {
                myCustomProperty: 'Hello World'
            }));
			
//Create a layer that defines how to render the shapes in the data source and add it to the map.
//Bubble layer renders points as scalable circles on the map.
map.layers.add(new atlas.layer.BubbleLayer(datasource, null, {
	//Use layer options to customize rendering.
}));


//Alternatively, use a symbol layer to render the point as an icon.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
	//Use layer options to customize rendering.
}));

If you then wanted to loop through all the points/shapes in the data source, you can do the following:

var shapes = datasource.getShapes();

for(var i=0;i<shapes.length;i++){
	var shape = shapes[i];
	
	//Do something with the shape.
	//Note that if you use a DataSource, GeoJSON features will usually be converted to a Shape object as these these seamless update the map as you change properties on them. 
	// If you enable clustering, clusters will be GeoJSON features since these are not something you can change properties on and have the map update.
	//If you use a vector tile data source, it will also only provide GeoJSON features as you can't change properties on them either since this is a static data set.
}