Abdellah Ichiba
Abdellah Ichiba

Reputation: 1

MKAnnoation View issue in OSX MapKit

can you please help me understand the issue with AnnotationView in MapKit, As shown in the picture, I wan to set up a custom annotation with left and right calloutView, one in white color and the other one in pink.

But I have a little space in gray between them, can't remove it, and can't change its color. I did try to force the color of the whole frame to white or clear and did the same for the details callout view but with no result.

issue with AnnotationView in MapKit OSX


import Foundation
import MapKit


open class EtaAnnotation: NSObject, MKAnnotation {
    
    public var title: String?
    public var subtitle: String?
    public let coordinate: CLLocationCoordinate2D
    
    public init(title: String?, subtitle: String?, coordinate: CLLocationCoordinate2D) {
        
        self.coordinate = coordinate
        self.title = title
        self.subtitle = subtitle
    }

}

open class EtaAnnotationView: MKAnnotationView {
    
    open var pinColor = NSColor(red:0.825482 , green: 0.39804, blue: 0.000743955, alpha:  1.0)
    open var pinSecondaryColor = NSColor.white
    open var rightButton: NSSegmentedControl?

    
    open override var annotation: MKAnnotation? {
        didSet {

        }
    }
    
    
    public override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
        super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
        
        self.annotation = annotation
    }
    
    open override var leftCalloutAccessoryView: NSView? {
        didSet {
            leftCalloutAccessoryView!.wantsLayer = true
            leftCalloutAccessoryView!.layer?.backgroundColor = NSColor.systemPink.cgColor
            
        }
    }
    
    open override var detailCalloutAccessoryView: NSView? {
        didSet {
            detailCalloutAccessoryView!.wantsLayer = true
            detailCalloutAccessoryView!.layer?.backgroundColor = NSColor.blue.cgColor
            
        }
    }
  
    open override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        
        // Clear the background
        NSColor.clear.setFill()
        dirtyRect.fill()
        
        
        
//        // Draw the circle (base of the pin)
        let circlePath = NSBezierPath(ovalIn: NSRect(x: bounds.midX - 7.5, y: bounds.midY - 9 - 15, width: 15, height: 15))
        pinColor.setFill()
        circlePath.fill()
        
        // Draw the triangle (pin's tail)
        let trianglePath = NSBezierPath()
        trianglePath.move(to: NSPoint(x: bounds.midX, y: bounds.midY))
        trianglePath.line(to: NSPoint(x: bounds.midX - 7.5, y: bounds.midY - 15))
        
        trianglePath.line(to: NSPoint(x: bounds.midX + 7.5, y: bounds.midY - 15))
        trianglePath.close()
        pinColor.setFill()
        trianglePath.fill()
        
        let smallCircleDiameter = 10.0
        let smallCircleRect = CGRect(
            x: bounds.midX - 5,
            y: bounds.midY - 5 - 16.5,
            width: smallCircleDiameter,
            height: smallCircleDiameter
        )
        let smallCirclePath = NSBezierPath(ovalIn: smallCircleRect)
        pinSecondaryColor.setFill()
        smallCirclePath.fill()
//        
    }
    
    // Configure for annotations
    open override func prepareForDisplay() {
        super.prepareForDisplay()
        frame = NSRect(x: 0, y: 0, width: 12, height: 12) // Adjust size as needed
        canShowCallout = true
    }

    
    public func setDetailShowButton() {
        // Bouton d'informations détaillées
        
        //Detailed toilet info button
        let butonviewwidth = 120
        let butonviewheight = 50
                        
        let butonview = NSView(frame: CGRect(x: 0, y: 0, width: butonviewwidth, height: butonviewheight))
        butonview.wantsLayer = true
        butonview.layer?.backgroundColor = NSColor.white.cgColor
        
        
        let line = NSView(frame: CGRect(x: 0, y: Int(Double(butonviewheight) * 0.5), width: butonviewwidth, height: 1))
        line.wantsLayer = true
        line.layer?.backgroundColor = NSColor.lightGray.cgColor
        
        //butonview.addSubview(line)
        
        let segmentedControl = CustomSegmentedControl(frame: CGRect(x: Int(Double(butonviewwidth) * 0.5) - 40 , y: 6, width: 70, height: 12))
        segmentedControl.wantsLayer = true
        segmentedControl.layer?.cornerRadius = 5
        segmentedControl.layer?.borderColor = NSColor.lightGray.cgColor
        segmentedControl.layer?.borderWidth = 0.3
        segmentedControl.setTarget(self, action: #selector(segmentChanged(_:)))
        
        
        let titleLabel = NSTextField(frame: CGRect(x: Int(segmentedControl.frame.minX) - 10, y: Int(segmentedControl.frame.minY) + 7, width: 100, height: 15))
        titleLabel.isEditable = false
        titleLabel.isBordered = false
        titleLabel.backgroundColor = NSColor.clear
        titleLabel.alignment = .center
        titleLabel.font = NSFont.systemFont(ofSize: 6, weight: .medium)
        titleLabel.textColor = NSColor.lightGray  //NSColor.labelColor
        titleLabel.stringValue = "Vous validez cette adresse ?"
        butonview.addSubview(titleLabel)
        
        butonview.addSubview(segmentedControl)
        
        rightCalloutAccessoryView = butonview
        rightCalloutAccessoryView!.wantsLayer = true

        if detailCalloutAccessoryView != nil{
            detailCalloutAccessoryView!.wantsLayer = true
            detailCalloutAccessoryView!.layer?.backgroundColor = NSColor.white.cgColor
        }
    }
    
    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    @objc func segmentChanged(_ sender: CustomSegmentedControl) {
        let selectedIndex = sender.getSelectedIndex()
        print("Option sélectionnée : \(selectedIndex == 0 ? "OUI" : "NON")")
    }
    
}

Upvotes: 0

Views: 21

Answers (0)

Related Questions