question

PRINCESEBASTIAO-0727 avatar image
0 Votes"
PRINCESEBASTIAO-0727 asked PRINCESEBASTIAO-0727 commented

Fit MultiMarkers to map view

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

source: https://docs.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

azure-maps
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@PRINCESEBASTIAO-0727 in the document you are following we add as an !Important note the following:

"For larger data sets consider either clustering your data or using a Symbol or Bubble layer."

Are you considering using a Bubble layer for your scenario and if so, checkout this related thread on StackOverflow: https://stackoverflow.com/questions/60835006/zoom-and-center-map-to-fit-all-features-on-bubble-layer

Thanks!

0 Votes 0 ·

Thank You @asergaz.

Didn´t notice that important note.

Going to review my code and maybe clustering the data.

Let you know later.

Thanks.

1 Vote 1 ·

1 Answer

rbrundritt avatar image
1 Vote"
rbrundritt answered PRINCESEBASTIAO-0727 commented

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
});







· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks very much.
it works.

0 Votes 0 ·