MKPolyline loses border when zooming

I added multiple MKPolyline to a MKMapView. It looks fine on the beginning, but when I start zooming, the border of the MKPolyline gets lost on some poly lines.

zoomed out:

zoomed in:

here is the code I used:

import MapKit
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var mapView: MKMapView!

    override func viewDidLoad() {
        super.viewDidLoad()

        mapView.delegate = self
        mapView.mapType = .mutedStandard
        mapView.pointOfInterestFilter = .excludingAll

        let tiles = [
            MapTile(x: 8586, y: 5514),
            MapTile(x: 8587, y: 5514),
            MapTile(x: 8588, y: 5514),
            MapTile(x: 8587, y: 5515),
        ]

        let polygons = tiles.map { tile in
            MKPolygon(coordinates: tile.locations, count: tile.locations.count)
        }

        mapView.addOverlays(polygons, level: .aboveLabels)
    }
}


extension ViewController: MKMapViewDelegate {
    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
        if let mapTile = overlay as? MKPolygon {
            let renderer = MKPolygonRenderer(polygon: mapTile)
            renderer.fillColor = .systemBlue.withAlphaComponent(0.15)
            renderer.strokeColor = .systemBlue
            renderer.lineWidth = 0.7

            return renderer
        }

        return MKOverlayRenderer(overlay: overlay)
    }
}

struct MapTile: Identifiable, Hashable {
    let x: Int
    let y: Int

    var id: String { "\(x)-\(y)" }

    static let zoomFactor = Double(1 << 14)

    static func locationOrigin(tileX: Int, tileY: Int) -> CLLocationCoordinate2D {
        let lon = (Double(tileX) / MapTile.zoomFactor) * 360.0 - 180.0
        let lat = atan( sinh (.pi - (Double(tileY) / MapTile.zoomFactor) * 2 * Double.pi)) * (180.0 / .pi)

        return CLLocationCoordinate2D(latitude: lat, longitude: lon)
    }

    var locationOrigin: CLLocationCoordinate2D {
        MapTile.locationOrigin(tileX: x, tileY: y)
    }

    var locations: [CLLocationCoordinate2D] {
        let topLeft = locationOrigin
        let topRight = MapTile.locationOrigin(tileX: x + 1, tileY: y)
        let bottomRight = MapTile.locationOrigin(tileX: x + 1, tileY: y + 1)
        let bottomLeft = MapTile.locationOrigin(tileX: x, tileY: y + 1)

        return [
            topLeft,
            topRight,
            bottomRight,
            bottomLeft
        ]
    }
}

any ideas why this happens?

Replies

It is most likely caused by:

renderer.lineWidth = 0.7

Try...

renderer.lineWidth = 1

...and see if that fixes it.

  • I tried renderer.lineWidth = 1 and also renderer.lineWidth = 2. Same wrong behaviour.

Add a Comment