title: How to mark the icons according to the GPS coordinates on the map-captured image?
body: <ol>
  <li>Capture a map, create an image, and display it on the screen.</li>
  <li>The image has a start point and an end point.</li>
  <li>Rotate the image so that the starting point is always to the left, regardless of the actual orientation.</li>
  <li>The image is fixed and the user cannot zoom/rotate the image.</li>
  <li>The coordinates of the four vertices(a,b,c,d) are obtained from the server.</li>
  <li>I used a captured image in the question, but Google Maps cannot be used because the app uses a custom image.</li>
  </ol>
  <p>How do I display an icon on the image when I have received specific coordinates within the map area?</p>
  <p>image on real map(<code>top is north</code>)
  <a href="https://i.stack.imgur.com/7Mf6W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Mf6W.png" alt="enter image description here" /></a></p>
  <p>image on screen(<code>top is east</code>)
  <a href="https://i.stack.imgur.com/Ri8rh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ri8rh.png" alt="enter image description here" /></a></p>