Incorrect popup location when zooming in

295
1
11-24-2020 11:21 PM
ChrisShaw
New Contributor

We have popup precisely tied to feature location by tracking view.on(click) event and setting popup location like so:

this.view.popup.open({
features: response.results[0].graphic,
location: response.results[0].graphic.geometry
});

ChrisShaw_1-1606288666043.png

However, when zooming in manually or clicking Zoom to in the popup the resulting popup drifts to incorrect location.

 

ChrisShaw_0-1606288805126.png

This issue is present in official demos as well (at least when zooming in with scroll wheel). In some demos when clicking Zoom to the popup snaps back to correct location.

We are using version 4.16

0 Kudos
1 Reply
bmanghi
New Contributor III

I've had initial success with using a FeatureLayer to query a point's geometry, manually setting the returned geometry as the popup's features. Then watching the view's scale and resetting the popup's location property using the popup's selectedFeature property. I also added a function to offset the popup anchor if you're using a symbol with a yoffset.

const createOffsetGeom = (args) => {
  const { geometry, yoffset = 0, xoffset = 0 } = args;
  const screenPoint = view.toScreen(geometry);
  let offsetGeom = {};
  screenPoint.y = screenPoint.y + yoffset;
  screenPoint.x = screenPoint.x + xoffset;
  offsetGeom = view.toMap(screenPoint)
  return { latitude: offsetGeom.latitude, longitude: offsetGeom.longitude };
};
view.watch("scale", (scale) => {
  if (view.popup.visible) {
    view.popup.location = createOffsetGeom({ geometry: 
    view.popup.selectedFeature.geometry, yoffset: -18 });
  }
});

It seems the geometry returned with hitTest is more generalized when you click on the map at smaller scale.

 

0 Kudos