How to set extent of map for list of coordinates using ArcGIS JavaScript API

Question

I am trying to set the extent for my ArcGIS map using the JavaScript API built in. Here's my code:

              const [Extent] = await loadModules(["esri/geometry/Extent"]);
              let response = new Extent();
              for (const datum of dataPoints) {
                let resExtent = new Extent(
                  datum.latitude,
                  datum.longitude,
                  datum.latitude,
                  datum.longitude,
                  response.spatialReference
                );
                response = await response.union(resExtent);
              }
              viewRef.current.goTo(response);

And my datum list is an array of coordinates such as: [..., {latitude: XXX, longitude: XXX}, ...]. The above code plots the coordinates on the map but the extent is not correct with issues like some points lie in the boundary of the map.

How can I resolve this issue ?

Answer 1

You can expand your Extent a little to make sure that it zooms out a bit more. See https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Extent.html#expand viewRef.current.goTo(response.clone().expand(1.5));

Another aspect is that by default, the mapView will "snap" to the different zoom levels. It's possible that this snaps to a zoom level too far zoomed in. You can turn off this "snap to zoom" behavior by setting the constraints.snapToZoom to false when you create the mapView. See https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#constraints