How to set image overlay in WKInterfaceMap over a MapRect

199 views Asked by At

I m trying to add image overlay on a specific area (say United states) in WKInterfaceMap object of Watchkit. In iOS using MKMapView I can add image overlay as:

I have two custom class ImageOverlay & ImageOverlayRenderer

class ImageOverlay: NSObject, MKOverlay {

(topLeftCoordinate: CLLocationCoordinate2D, bottomRightCoordinate: CLLocationCoordinate2D,
     topRightCoordinate: CLLocationCoordinate2D, bottomLeftCoordinate:CLLocationCoordinate2D
     ) {
       // set coordinates here
    }

    var midPointCoordinate: CLLocationCoordinate2D {
    get {
        return CLLocationCoordinate2D(latitude: (topLeftCoordinate.latitude + bottomRightCoordinate.latitude)/2, longitude: (topLeftCoordinate.longitude + bottomRightCoordinate.longitude)/2)
    }
}

func overlayBoundingMapRect() -> MKMapRect {
    let topLeft = MKMapPointForCoordinate(self.topLeftCoordinate)
    let topRight = MKMapPointForCoordinate(self.topRightCoordinate)
    let bottomLeft = MKMapPointForCoordinate(self.bottomLeftCoordinate)
    let bottomRight = MKMapPointForCoordinate(self.bottomRightCoordinate)


    return MKMapRectMake(topLeft.x,
                         topLeft.y,
                         fabs(topLeft.x - topRight.x),
                         fabs(((topLeft.y + topRight.y) / 2.0 ) - ((bottomLeft.y + bottomRight.y) / 2.0 )));
}

//MKOverlay protocol

var boundingMapRect: MKMapRect {
    return overlayBoundingMapRect()
}

var coordinate: CLLocationCoordinate2D {
    return midPointCoordinate
}

}

ImageOverlayRenderer

class ImageOverlayRenderer: MKOverlayRenderer {
    init(overlay: MKOverlay, overlayImages: [UIImage]) {
    self.overlayImages = overlayImages[0]
    super.init(overlay: overlay)
}

override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
        let imageReference: CGImage = self.overlayImages[0].cgImage!;

        let theMapRect: MKMapRect = self.overlay.boundingMapRect;
        let theRect: CGRect = rect(for: theMapRect);

        context.scaleBy(x: 1.0, y: -1.0);
        context.translateBy(x: 0.0, y: -theRect.size.height);
        context.draw(imageReference, in: theRect);

}

}

This is how I use these classes to render overlays:

var circleMapView : MKMapView()
var mapImageOverlay : ImageOverlay?
var circleMapImageRenderer : ImageOverlayRenderer?

// fix coordinates to cover US region
let topLeft = CLLocationCoordinate2D(latitude: topLeftCoordinate.0, longitude: topLeftCoordinate.1)
let bottomRight = CLLocationCoordinate2D(latitude: bottomRightCoordinate.0, longitude: bottomRightCoordinate.1)

let topRight = CLLocationCoordinate2D(latitude: topRightCoordinate.0, longitude: topRightCoordinate.1)
let bottomLeft = CLLocationCoordinate2D(latitude: bottomLeftCoordinate.0, longitude: bottomLeftCoordinate.1)

 mapImageOverlay = ImageOverlay(topLeftCoordinate: topLeft , bottomRightCoordinate: bottomRight, topRightCoordinate:topRight, bottomLeftCoordinate: bottomLeft)

if let overlay = mapImageOverlay {
        circleMapView.insert(overlay, at: 0)
    }

MKMapView delegate draw this as:

func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
    if overlay is ImageOverlay
    {
        let renderer = ImageOverlayRenderer(overlay: imageOverlay, overlayImages: imgs)
            circleMapImageRenderer = renderer
            return renderer
    }
return MKOverlayRenderer(overlay: overlay)
}

This draws image on my set coordinates perfectly! My Question is:

How can I use this technique or something similar to render overlays in WatchKit WKInterfaceMap. As of my research on SO threads, google search and Apple documentation In WKInterfaceMap we can add a limited annotations like pins or images on a specific location with centerOffSet. I have to add overlay on a region (say United states). Please let me know if this possible or not in Watch OS current environment.

Any idea or direction will be greatly appreciated.

0

There are 0 answers