swift
// Object length/width in Meters for specific Location on Earth
let objectLatMeter: CLLocationDistance = CLLocationDistance.init(exactly: 18.3)!
let objectLngMeter: CLLocationDistance = CLLocationDistance.init(exactly: 9)!
let mapViewCenterCoordinate = self.mapView.centerCoordinate
let objectmkrect = MKCoordinateRegion.init(center: mapViewCenterCoordinate, latitudinalMeters: objectLatMeter, longitudinalMeters: objectLngMeter)
// ???
let rightSizedRect = self.mapView.convert(objectmkrect, toRectTo: self.imageView)
self.imageView.frame = rightSizedRect
What does self.mapView.convert(objectmkrect, toRectTo: self.imageView) under the hood do? self.imageView is a UIImageView which lays on top of the mapView. What I try to achieve here: I need to resize the UIImageView (which is sitting on top of the map) right at all time according to the zoom. AND IT IS WORKING SO FAR BUT only if i do not rotate :woozy_face:
the translucent organge box is the UIImageView. The blue one is a MKOverly (with a custom Image Renderer) please have a look at the video http s://d.pr/v/yZ8cMh
How can i get the orange UIImageView stay straight but with the right dimension? any ideas?
Post
Replies
Boosts
Views
Activity
Hi, my Name is Markus and I am working on my first app...
What I like to do
The user should be able to place an image freely on the map. The Image must scale in real world dimension. The user also should be able to rotate the image via a slider.
What I did so far
I guess there are smarter ways to do so but it works so fare. The only missing feature is the rotation functionality. I tried to rotate the UIImage but this results in a cropped image since the MKMapRect (which I need to scale) does not rotate
class MapViewController: UIViewController {
		@IBOutlet weak var mapView: MKMapView!
		override func viewDidLoad() {
				super.viewDidLoad()				
				mapView.delegate = self
// prepare the services/map ...
// user can change the orientation via a slider ( 0-2*.pi -> 0-360° )
				draw(orientation: 0)
		}
		func draw(orientation: Double) {
				let region = mapView.region
				let center = region.center
				let pointsPerMeter = MKMapPointsPerMeterAtLatitude(center.latitude)
				// Real-World-Object with 24 Meters length and 4 Meters width
				let objectLength = pointsPerMeter*24
				let objectWidth = pointsPerMeter*4
				let mapSize = MKMapSize.init(width: objectLength, height: objectWidth)
				let mapPoint = MKMapPoint.init(center)
				let objectRect = MKMapRect.init(origin: mapPoint, size: mapSize)
				// clear the map
				mapView.removeOverlays(mapView.overlays)
				// create image overlay from Real-World-Object
				let objectOverlay = ImageOverlay(image: UIImage(named: "nameOfYourImageAsset")!, rect: objectRect.offsetBy(dx: -objectLength/2 , dy: -objectWidth/2))
				// add overlay to map
				mapView.addOverlay(objectOverlay)
		}
}
// found here https://stackoverflow.com/a/45989625/10878331
class ImageOverlay : NSObject, MKOverlay {
		let image:UIImage
		let boundingMapRect: MKMapRect
		let coordinate:CLLocationCoordinate2D
		init(image: UIImage, rect: MKMapRect) {
				self.image = image
				self.boundingMapRect = rect
				self.coordinate = rect.origin.coordinate
		}
}
class ImageOverlayRenderer : MKOverlayRenderer {
		override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
				guard let overlay = self.overlay as? ImageOverlay else {
						return
				}
				let rect = self.rect(for: overlay.boundingMapRect)
				UIGraphicsPushContext(context)
				overlay.image.draw(in: rect)
				UIGraphicsPopContext()
		}
}
If I place a UIImage (via UIImageView) right to the map, there is no relation to the map so I have no Idea how to scale. I hope to get at least some fresh ideas.
Kind Regards, Markus