0

So I have an Image of the map which users can plot points and then the location the user has touched or clicked is then saved by sending the e.nativeEvent.locationX value and e.nativeEvent.locationY value to my database. This will allow the user to review the points they have plot before in the future.

What's the problem

So when I plot the point on my Tablet and review where I placed the plot on the map using my PC, It is displayed incorrectly. I assume this is due to different screen sizes and the image being a different size depending on the device.

How do I resolve this issue so that the plots are consistent no matter what device you are using?

Jim
  • 67
  • 1
  • 8
  • I have not implemented any map feature, but based on what you share, the Point Of Interest (POI) is different when you view it on PC. This don't seems like a responsive design issue to me, since the longitude and latitude is stored upon clicking, regardless of map size, the plotting should always correct. Have you check the long and lat that you received? or review the logic on how you pin the POI on map when you receive long lat from your database. – Tommy Leong Feb 08 '21 at 02:37
  • @TommyLeong I think it is as the image increases/decreases in size depending on the device screen size – Jim Feb 08 '21 at 02:45
  • I am also sending e.nativeEvent.locationx and y to the database, the values do not change – Jim Feb 08 '21 at 02:46
  • Understand you have sent the locationX and Y to DB. Have you check the location X and Y value received on your application while rendering (to see if it's the same as what you saved in DB)? – Tommy Leong Feb 08 '21 at 02:57
  • yes i can confirm that the locationX and Y is saved and received with same values @TommyLeong – Jim Feb 08 '21 at 15:28

1 Answers1

0

You'll need to keep track of what size the image is when you're getting the points. So, for example, if your point is (5,5) on an image that is being displayed at 25x25, you may want to store the values in your database as (20,20) -- eg 5/25,5/25. So, it's a relative point rather than an absolute point.

Then, on the other device, maybe that image gets displayed at 200x200 -- then, your point would get displayed at 40,40 -- 200/5,200/5

If you need to keep track of what the Image/View size is, you can refer to plenty of existing questions on that topic such as: Get size of a View in React Native

Note: it's also important that you are displaying the image with the same aspect ratio on both devices

jnpdx
  • 45,847
  • 6
  • 64
  • 94