Fit MultiMarkers to map view

Question

I am creating a map and adding multiples markers using HTML markers to a given map.

source: https://learn.microsoft.com/en-us/azure/azure-maps/map-add-custom-html

Problem: As I am giving the map multiples makers, I am also zooming and setting the center manually which is not so useful.

Question: Is there any way where I can bound the markers automatically? just by given the map a list of markers and fit by himself all the markers to the map view.

Thanks

Answer 1

Here are the steps to achieve this:

1. Create an array that contains all the positions of the markers. Basically, add you create your markers, copy the position value into an array.
2. Pass this array into the atlas.data.BoundingBox.fromPositions method to calculate the bounding box of the data.
3. Use the maps setCamera function and pass the bounding box value in as the bounds property. Set the padding property to something like 50 to account for the pixel size of the marker.

Here is a quick sample:

var markerPositions = [];

//Add code to add marker position from marker when creating marker.

//Calculate bounding box.
var bbox = atlas.data.BoundingBox.fromPositions(markerPositions);

//Set map camera.
map.setCamera({
    bounds: bbox,
    padding: 50
});