Zoom and center map to fit all features on (bubble) layer

Question

I have a website that's getting a set of points from the server side, and then rendering a map using the azure-maps-control npm package.

I want the map to be centered and zoomed in such a way that would fit all the points on the screen.

What's the best way to achieve this?

score 7 · Accepted Answer · edited Apr 14 '20 at 00:26

First calculate a bounding box for your points. If you have an array of Point features or atlas.Shape objects, use atlas.data.BoundingBox.fromData, if you have an array of positions, use atlas.data.BoundingBox.fromPositions.

From there you can either paste this into the map options when loading the map or use the maps setCamera to update the map view. In both cases you pass it into the bounds option. Additionally, since you are working with point data, a bounding box will be based on the coordinates and will not take into consideration the pixel size of your icons. To account for that, use the padding option to add a pixel buffer around the bounding box. For example:

map.setCamera({
    bounds: atlas.data.BoundingBox.fromData(featureArray),
    padding: 50
});

A lot of the samples in the sample gallery use this method: https://azuremapscodesamples.azurewebsites.net/index.html

Zoom and center map to fit all features on (bubble) layer

1 Answers1