How to use MKMapKit to generate polyline for Continental United States Boundary? - mkmapview

Question

Note: If this question requires more information, please add a comment.
Details:
I would like to generate a boundary line around the continental United States on an MKMapView. The idea is to begin drawing overlays on the area outside of the country outline (I need to de-emphasize external areas and just have the US be the primary focal point; I am considering a blur effect but would be open to suggestions on implementation or other methods to achieve the objective).
Background:
I need to blur out (or de-emphasize) the other countries that appear in the default MKMapView other than the Continental US.
My Initial Approach:
Identify the contiguous country boundary box using polylines
(similar to how a bus route is represented on the map; I note there
seems to be some default line ~ any method to access those
coordinates?)
Identify a method to mask the map using a UIVisualEffectView with
blur (or any other possibility to dim that portion of the map not
inside the boundary)
I don't necessarily need a code solution (though if posted, I'll try it). I am wondering if someone experienced in this area could provide pseudo code or just some pointers as to the best approach to take on this process.
Other Research:
I have reviewed other sources, including the MapKit documentation and this overlay tutorial.

Answer 1

You would need to draw a polygon around all your MKMapView with an inner polygon that would be the area you don't want to blur out.
Here is my solution:
First you need the coordinates to cover every bit of the map:
struct WorldCoordinates {
static let values = [
CLLocationCoordinate2D(latitude: 90, longitude: 0),
CLLocationCoordinate2D(latitude: 90, longitude: 180),
CLLocationCoordinate2D(latitude: -90, longitude: 180),
CLLocationCoordinate2D(latitude: -90, longitude: 0),
CLLocationCoordinate2D(latitude: -90, longitude: -180),
CLLocationCoordinate2D(latitude: 90, longitude: -180)
]
}
Then use a method like this one to add your inner and outer polygons:
Please note that I use "City" as an example of a struct with boundigCoordinatesArray being an array of the bounding coordinates of the area you don't want to blur.
func addCityBoundingPolygon(in mapView: MKMapView, with city: City) {
// Declare your inner polygon
let innerPolygon = MKPolygon(coordinates: city.boundingCoordinatesArray, count: city.boundingCoordinatesArray.count)
innerPolygon.title = "\(city.id)"
// Declare your outer polygon with previously created inner polygon
let outerPolygon = MKPolygon(coordinates: WorldCoordinates.values, count: WorldCoordinates.values.count, interiorPolygons: [innerPolygon])
mapView.addOverlay(outerPolygon)
}
Finally add the color of your outer polygon on your MKMapViewDelegate like this:
func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
if let polygon = overlay as? MKPolygon {
let renderer = MKPolygonRenderer(polygon: polygon)
renderer.fillColor = UIColor.outOfCityBounds().withAlphaComponent(0.1)
renderer.strokeColor = UIColor.outOfCityBounds().withAlphaComponent(0.4)
renderer.lineWidth = 1
return renderer
}
return MKOverlayRenderer()
}
With this approach you will be able to recreate something like this: