How can I draw two MKPolygons on MapView without having them connect?

Question

For some reason, when I try to draw two MKPolygons on a mapView (MKMapView) I end up with the two polygons connected. Drawing each polygon individually works fine. And I've verified that each of the polygons don't contain any of the coordinates to form the connection between the two. I've attached an image with the two polygons connected

For reference, here's where I call to add the polygons.

func addPeakTimePolygon(from coordinatesArray: [CLLocationCoordinate2D], title: Int){
            let polygon = MKPolygon(coordinates: coordinatesArray, count: coordinatesArray.count)
            polygon.title = String(title)
            //Should refactor to use .contains(where:
            var shouldAdd = true
            for polygon in self.currentPolygons{
                if polygon.title == String(title){
                    shouldAdd = false
                }
            }
            if shouldAdd{
                self.currentPolygons.append(polygon)
                self.mapView.add(polygon)
            }
    } 

And here's my rendererFor code:

 func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
        if overlay is MKPolyline {
            let renderer = MKPolylineRenderer(overlay: overlay)
            renderer.strokeColor = #colorLiteral(red: 0, green: 0.6862745098, blue: 0.7607843137, alpha: 1)
            renderer.lineWidth = 5.0
            return renderer
        }
        else if overlay is MKPolygon {
            let renderer = MKPolygonRenderer(overlay: overlay)
            renderer.fillColor = UIColor.red.withAlphaComponent(0.5)
            renderer.strokeColor = UIColor.red
            renderer.lineWidth = 2
            return renderer
        }
        return MKOverlayRenderer()
    }

Answer 1

I forgot to check / post the code that was calling addPeakTimePolygon. Here is the problematic code below:

var locationList: [CLLocationCoordinate2D] = []
        var title = 0
        if let peakTimeCampaignList = data["PeakTimeRewardCampaignList"] as? [[AnyHashable:Any]]{
            for campaign in peakTimeCampaignList{
                if let polygonPoints = campaign["CampaignPolygon"] as? [[AnyHashable:Any]]{
                    for polygonPoint in polygonPoints{
                        let polygonPoint = CLLocationCoordinate2D(latitude: polygonPoint["Latitude"] as! CLLocationDegrees, longitude: polygonPoint["Longitude"] as! CLLocationDegrees)
                        locationList.append(polygonPoint)
                    }
                }
                if let id = campaign["Id"] as? Int{
                    title = id
                }
                mapBundle.addPeakTimePolygon(from: locationList, title: title)
            }
        }

As you can see locationList wasn't being cleared out within the loop, causing whatever we sent over to addPeakTimePolygon to have coordinates from two polygons and MapKit was trying it's best to form a polygon between them.

This was a dumb mistake, but hoping someone else sees this with the same problem!

Answer 2

It seems like you're making one overlay consisting of two polygons. You can't do that with an MKPolygonRenderer; you will get one polygon, as you are observing.

You will need separate overlays, one for each polygon. Unless you are using iOS 13! In that case, you are in luck: New in iOS 13, multiple polygons or polylines can be combined into an MKMultiPolygon or MKMultiPolyline and drawn by an MKMultiPolygonRenderer or MKMultiPolylineRenderer.