2

I am trying to plot some coordinates on the earth on an UIImage which contains a map of the world. (I don't want to use maps)

See an example of the UIImageView below below:

World map

As you see it's working out pretty well but the mapping from coordinates and X Y are incorrect!

Amsterdam's coordinates are: (52.36666489, 4.883333206) and the Center's are (0,0).

I've done the following things to try to make this happen but unfortunately this isn't working out:

  1. I've tried first to 'normalize' the coordinates since latitude ranges from -90 to 90 and latitude -180 to 180. This is done by adding 90 to the real latitude and 180 to the real longitude which yiels the 'normalized' versions:

let normalizedLat = location.coordinate.latitude + 90.0. let normalizedLng = location.coordinate.longitude + 180.0

  1. After that I've calculated the scale factor where the normalizedLat and normalizedLng should scale with:

let heightScaleFactor = mapImageView.frame.height / 180.0 let widthScaleFActor = mapImageView.frame.width / 360.0

And 3. After that i've got the scaling factors I finally can calculate the coordinates by:

let x = Double(widthScaleFActor * CGFloat(normalizedLng)) let y = Double(heightScaleFactor * CGFloat(normalizedLat)) dot.frame = CGRect(x: x, y: y, width: Double(dot.frame.width), height: Double(dot.frame.height))

But for some strange reason Amsterdam is not on the Amsterdam spot and the Center is not on the Center spot.

I am quite sure that my calculations has gone wrong. Any ideas?

Karl-John Chow
  • 775
  • 2
  • 8
  • 26
  • Hey I need to build a map like the one in the link. Can your solution help? https://stackoverflow.com/questions/65335361/need-to-generate-world-map-matrix-along-with-different-coloured-region-and-marke – Ishika Dec 18 '20 at 05:20
  • Very little, I think it worked quite well, but I had many issues with the scaling of the image and such. If you can set a fixed size for your image then it would be way easier. But otherwise, its gonna be tough. – Karl-John Chow Dec 18 '20 at 09:12

1 Answers1

1

Remember, in iOS the origin is in the top-left, not the bottom-left. Positive-y goes down, not up.

You need to factor that in.

dot.frame = CGRect(x: x, y: mapImageView.frame.height - y, width: Double(dot.frame.width), height: Double(dot.frame.height))

Also note that the equator in your image is not in the middle. It's lower in the image so you need to add an additional offset in your calculation of the y value based on the equator's offset in the image.

dot.frame = CGRect(x: x, y: mapImageView.frame.height - y + equatorOffset, width: Double(dot.frame.width), height: Double(dot.frame.height))

It's also possible that your map projection doesn't have a simple linear latitude scale. 0-10 degrees might be 12 pixels while 10-20 degrees might be 11 pixels, etc. and 80-90 is only 3 pixels (or whatever).

rmaddy
  • 314,917
  • 42
  • 532
  • 579
  • Oh you are totally right, the `mapImageView.frame.height - y` did the trick! The map already looks way better right now. The offset is however still a bit wrong. Could you please have a look? http://imgur.com/a/EGvN8 – Karl-John Chow Sep 04 '17 at 03:06
  • The equator is not going through the center of the image. It's a bit lower. You are going to need to add another fudge factor to the `y` value to adjust for the equator offset. – rmaddy Sep 04 '17 at 03:11
  • I see! Thank you very much! – Karl-John Chow Sep 04 '17 at 03:18