Swift MKMapView Polygon Overlay glitching

Question

In rare occasions, the overlay on my map (small blue dot) gets a weird glare (big blue area on right) (as seen in picture). Sometimes zooming in or out will fix it, but not always. Can't find anything on why this would happen. Is it something to do with how it is rendered?

func drawLocations(_ loc: CLLocation)
    {
        let center = CLLocationCoordinate2D(latitude: loc.coordinate.latitude, longitude: loc.coordinate.longitude)
        let lat: CLLocationDegrees = center.latitude
        let long: CLLocationDegrees = center.longitude
        var points = [CLLocationCoordinate2DMake(lat,long),CLLocationCoordinate2DMake(lat,long),CLLocationCoordinate2DMake(lat,long),CLLocationCoordinate2DMake(lat,long)]
        let polygon = MKPolygon(coordinates: &points, count: points.count)
        DispatchQueue.main.async(execute: {
            self.mapView.add(polygon)
        })
    }
func mapView(_ mapView: MKMapView!, rendererFor overlay: MKOverlay!) -> MKOverlayRenderer!
    {
        if overlay is MKPolygon
        {
            let polygonView = MKPolygonRenderer(overlay: overlay)
            polygonView.lineWidth = 4
            polygonView.strokeColor = UIColor(red: 30/255.0, green: 12/255.0, blue: 242/255.0, alpha: 0.4)
            return polygonView
        }
        return nil
    }

In my case I am getting nice circle. Are you sure that no drawing code executed in between? — Ramis, Dec 16 '16 at 08:45
That is the only method where I have drawing code. It seems to be random. Most of the time it's fine but happens more open when I put more dots on the screen @ramis — Steve, Dec 16 '16 at 08:47
As we can see, the problem is the blue dot being enlarged from where it is, and suddenly cut off. It is not a new drawing being drawn, just having the circle being not scaled to zooming. — Will Boland, Jan 16 '17 at 05:05
I'm not sure if this is how maps work, but it seems that the MKPolygonRenderer generates map tiles and adds that to the map rather than drawing the path straight onto it. In my app, the blurred area is a tile from a different zoom level that hasn't been removed or replaced due to the polygon stroke no longer spanning into that tile. It has only been doing this for me since Swift 3 and iOS 10. It doesn't do this on my iOS 9 devices. So it must just be a bug within the new operating system. — Tristan Beaton, Mar 03 '17 at 07:58
You should report this issue on apple developer bug reporting https://developer.apple.com/bug-reporting/ — Dhruv Narayan Singh, Oct 13 '17 at 11:58
I was having the same problem. However I was drawing a route with color indication of acceleration or breaking. To do this I created subclass of `MKOverlayPathRenderer`. The problem occurred in the same way as you did describe it. I was able to resolve this issue by adding rect intersects checking with mapRect on which I was about to draw. The issue was introduce by multiple callback on different zoom level to `draw` methods. — Shial, Jan 11 '18 at 01:19
Pieces of map ora loaded in tiles, thus sometimes some tiles can render before after... are you sure that is not the case? — Andrea, Jan 20 '18 at 11:05
Are you reproducing on the last version of iOS? And another assumption: I'm not sure about this line: DispatchQueue.main.async(execute: { self.mapView.add(polygon) }) Of course, I don't know the place where you use drawLocations(), but looks like overlay rendering doesn't have the correct lifecycle moment — MoRRt, Oct 31 '20 at 22:11

Pranav Kasetti · Answer 1 · 2021-01-07T04:38:23.460

It looks like you're using an MKPolygon even though you're only drawing a single point, with the same latitude and longitude. I think it would be better to use an MKCircle for a single point.

func drawLocation(_ loc: CLLocation)
    {
        let center = CLLocationCoordinate2D(latitude: loc.coordinate.latitude, longitude: loc.coordinate.longitude)
        let circle = MKCircle(center: center, radius: 4)
        DispatchQueue.main.async(execute: {
            self.mapView.add(circle)
        })
    }
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer
    {
        if overlay is MKCircle
        {
            let circleView = MKCircleRenderer(circle: overlay)
            circleView.lineWidth = 4
            circleView.strokeColor = UIColor(red: 30/255.0, green: 12/255.0, blue: 242/255.0, alpha: 0.4)
            return circleView
        }
        return nil
    }

As you say, the zooming feature in and out is what could cause this glitch because the points when you zoom in may look more like a polygon, and when you zoom out the renderer still has polygon artefacts but is now rendering only a single coordinate.

Usually it's better to use a polygon to render points which are spaced further apart, this helps the renderer since the map renders on a tile-by-tile basis which makes it easy to distinguish points in the polygon. For multiple points which are very close together then we can consider grouping them to use a larger radius MKCircle. You can also consider setting isZoomEnabled to false for the MKMapView and setting a fixed MKCoordinateRegion at the desired zoom level to avoid these rendering artefacts.

score -8 · Answer 2 · answered Feb 12 '18 at 10:34

-8

To remove this bug, only solution is switch to Google Maps because that bug is linked with iOS 10+. You can report this bug to Apple Bug Reporting: https://developer.apple.com/bug-reporting/

answered Feb 12 '18 at 10:34

Dhruv Narayan Singh

647
9
21

Swift MKMapView Polygon Overlay glitching

2 Answers2