title: How to set image overlay in WKInterfaceMap over a MapRect
body: <p>I m trying to add image overlay on a specific area (say United states) in <code>WKInterfaceMap</code> object of <code>Watchkit</code>. In iOS using MKMapView I can add image overlay as: </p>
  
  <p>I have two custom class <code>ImageOverlay</code> &amp; <code>ImageOverlayRenderer</code></p>
  
  <pre><code>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() -&gt; 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
  }
  
  }
  </code></pre>
  
  <p>ImageOverlayRenderer</p>
  
  <pre><code>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);
  
  }
  
  }
  </code></pre>
  
  <p>This is how I use these classes to render overlays:</p>
  
  <pre><code>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)
      }
  </code></pre>
  
  <p>MKMapView delegate draw this as:</p>
  
  <pre><code>func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -&gt; MKOverlayRenderer {
      if overlay is ImageOverlay
      {
          let renderer = ImageOverlayRenderer(overlay: imageOverlay, overlayImages: imgs)
              circleMapImageRenderer = renderer
              return renderer
      }
  return MKOverlayRenderer(overlay: overlay)
  }
  </code></pre>
  
  <p>This draws image on my set coordinates perfectly! 
  My Question is: </p>
  
  <p>How can I use this technique or something similar to render overlays in <code>WatchKit WKInterfaceMap</code>. As of my research on SO threads, google search and Apple documentation In <code>WKInterfaceMap</code> we can add a limited annotations like pins or images on a specific <code>location</code> with <code>centerOffSet</code>. I have to add overlay on a region (say United states). Please let me know if this possible or not in <code>Watch OS</code> current environment. </p>
  
  <p>Any idea or direction will be greatly appreciated. </p>