I am trying to zoom to the extent of a feature, but I cannot make it actually fit the feature completely within the map view. It always zooms in too far; what kind of math do I need to do to get it to actually fit? I’m in OpenLayers 9.
For context, selectedHUCs is an object like this {featureId: Feature} so I just get the first value (Feature) out of it.
<code>const selectedFeatureExtent = Object.values(selectedHUCs).map((ft) => {
return ft.getGeometry().getExtent()
})[0]
mapObj.getView().fit(selectedFeatureExtent, {
size: mapObj.getSize(),
duration: 1000,
})
</code>
<code>const selectedFeatureExtent = Object.values(selectedHUCs).map((ft) => {
return ft.getGeometry().getExtent()
})[0]
mapObj.getView().fit(selectedFeatureExtent, {
size: mapObj.getSize(),
duration: 1000,
})
</code>
const selectedFeatureExtent = Object.values(selectedHUCs).map((ft) => {
return ft.getGeometry().getExtent()
})[0]
mapObj.getView().fit(selectedFeatureExtent, {
size: mapObj.getSize(),
duration: 1000,
})
I console.log(mapObj.getSize()) to make sure that it was reporting the same dimensions as the map container div and it is. I don’t understand why OL won’t respect the extent of my layer.
When I print out the feature extent, I get these coordinates:
<code>[-12698330.63495976, 4975133.297025553, -10322056.299630199, 6275174.274099831]
</code>
<code>[-12698330.63495976, 4975133.297025553, -10322056.299630199, 6275174.274099831]
</code>
[-12698330.63495976, 4975133.297025553, -10322056.299630199, 6275174.274099831]
When I print out mapObj.getView().calculateExtent(mapObj.getSize()) I get these coordinates:
<code>[-16258259.1993944, 2844985.6519422685, -9138402.07052512, 7105280.942108838]
</code>
<code>[-16258259.1993944, 2844985.6519422685, -9138402.07052512, 7105280.942108838]
</code>
[-16258259.1993944, 2844985.6519422685, -9138402.07052512, 7105280.942108838]
This is the starting view, where I’m attempting to zoom in on the purple feature:
This is the end view after zooming in: