1

I am trying to build a custom MKOverlayRenderer subclass which will display an image and text presented on top of some type of subview based on this answer. At my current stage of implementing this I have gotten the image to appear on the map but now I am trying to add text over the image.

The text is appearing upside down and flipped on top of the image. The image appears to be oriented correctly using the same rectangle and same context. What am I doing wrong how do I go about implementing this?

enter image description here

This is the code pertaining to drawing the text:

       UIGraphicsPushContext(context);

        // ...
        UIGraphicsPushContext(context);
        UIColor.black.setStroke()
        context.setLineWidth(1)
        context.stroke(rect.insetBy(dx: 0.5, dy: 0.5))

        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .center

        let attributes = [NSAttributedString.Key.paragraphStyle  : paragraphStyle,
                          NSAttributedString.Key.font            : UIFont.systemFont(ofSize: 100.0),
                          NSAttributedString.Key.foregroundColor : UIColor.black]
        "\(rect.size)".draw(in: rect, withAttributes: attributes)
        UIGraphicsPopContext();

Class in its Entirety

class CustomOverlayView:MKOverlayRenderer{

    var overlayImage:UIImage

    init(overlay:MKOverlay,image:UIImage){
        self.overlayImage = #imageLiteral(resourceName: "DSC00042")
        super.init(overlay: overlay)
    }

    override func draw(_ mapRect: MKMapRect, zoomScale: MKZoomScale, in context: CGContext) {
        super.draw(mapRect, zoomScale: zoomScale, in: context)

        guard let imageReference = overlayImage.cgImage else { return }

        var rect = self.rect(for: overlay.boundingMapRect)
        context.scaleBy(x: 1.0, y: -1.0)
        context.translateBy(x: 0.0, y: -rect.size.height)
        context.draw(imageReference, in: rect)


        UIGraphicsPushContext(context);

        // ...
        UIGraphicsPushContext(context);
        UIColor.black.setStroke()
        context.setLineWidth(1)
        context.stroke(rect.insetBy(dx: 0.5, dy: 0.5))

        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.alignment = .center

        let attributes = [NSAttributedString.Key.paragraphStyle  : paragraphStyle,
                          NSAttributedString.Key.font            : UIFont.systemFont(ofSize: 100.0),
                          NSAttributedString.Key.foregroundColor : UIColor.black]
        "\(rect.size)".draw(in: rect, withAttributes: attributes)
        UIGraphicsPopContext();
    }
}
  • What I do is to have two objects: an overlay and an annotation that renders text as an image. This is because I want to have the text always the same size and not scaling and not rotating. So the overlay rotates and the corresponding text does not. – Gerd Castan Sep 08 '19 at 13:07
  • @GerdCastan That is a very clever solution it draws on the strength of both the annotation and the MKOverlayrenderer thank you – TheRedCamaro3.0 3.0 Sep 09 '19 at 15:51

0 Answers0