Shift a graphic by a set number of pixels

06-28-2021 07:00 AM
New Contributor

I have a div that overlays on my map and I populate dynamic graphics.

If a graphic is under my div, I need to shift it to be just outside of it.

Is there anyway to take a graphic at (XLat, YLon) and shift it to the left by 50 pixels?

0 Kudos
2 Replies
New Contributor III

You might be able to use the MapView.toScreen() method to convert the lat/lon to a ScreenPoint. Add the 50 pixels to the x,y screen coordinates and then use MapView.toMap() method to convert the adjusted screen point back to a map point and update the graphics geometry.

There's also a padding property on the MapView -  .

MVP Esteemed Contributor

@JohnWyant sure you just use the geometryEngines offset method.

Assuming 3.x

  1. Get the graphics extent center
  2. Use the map toScreen method to get the screen point and then add your 50 pixels to the screen point X and/or Y values
  3. Then use the maps toMap to reconvert the screen point that is now shifted by 50 px to get the map point.
  4. Next us the geometryEngine distance on the original point (the graphics extent center) and the new shifted point to get the distance value to use in the next step
  5. Use the geometryEngine offset method to get the offset geometry.

Same can be done in 4.x it is just the MapView that has the toMap and toScreen methods.

0 Kudos