Learn Courses My Dashboard

Map Image Overlay

Hi,

I’m trying to use an image as an overlay using MapKit, but I’m pretty new to using MapKit and I’m struggling to find anything helpful on the internet, as most of what’s out there relates to UIKit, which I’ve never used and a lot of the terms are unfamiliar to me. I’ve worked out how to draw a rectangle around the area where I’d like the image to be (code for this is below), but I can’t work out how to add an image instead of a polygon. Any help would be much appreciated!

import MapKit

struct MapPractice4: UIViewRepresentable {
    
    func makeUIView(context: Context) -> MKMapView {
        
        // Corner coordinates
        let lat1 = 64.667394
        let lat2 = 64.672321
        let long1 = -1.681905
        let long2 = -1.669555

        
        let rectangleCoordinates = [CLLocationCoordinate2D(latitude: lat1, longitude: long1),CLLocationCoordinate2D(latitude: lat1, longitude: long2), CLLocationCoordinate2D(latitude: lat2, longitude: long2), CLLocationCoordinate2D(latitude: lat2, longitude: long1), CLLocationCoordinate2D(latitude: lat1, longitude: long1)]
        
        let rectanglePolygon = MKPolygon(coordinates: rectangleCoordinates, count: rectangleCoordinates.count)
        
        // Create map with overlay
        let map = MKMapView()
        map.delegate = context.coordinator
        map.addOverlay(rectanglePolygon)
        
        // Set visible region
        map.setVisibleMapRect(rectanglePolygon.boundingMapRect, animated: true)
        
        return map
        
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        
    }
    
    static func dismantleUIView(_ uiView: MKMapView, coordinator: ()) {

    }
    
    // MARK: Coordinator
    
    func makeCoordinator() ->Coordinator {
        return Coordinator()
    }
    
    class Coordinator: NSObject, MKMapViewDelegate {
        
        func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
            
            let renderer = MKPolygonRenderer(polygon: overlay as! MKPolygon)
            renderer.lineWidth = 5
            renderer.strokeColor = .blue
            return renderer
                
        }
        
    }
    
}

Do I understand you correctly in that you want to use a map as an overlay image?
Does the map overlay need to be opaque or just occupy part of the screen?

Is this example of a map overlay something that you are trying to achieve?

This is the ContentView code:

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("joshuatree")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea()
            VStack {
                Spacer()
                MapView()
                    .opacity(0.8)
                    .frame(maxWidth: .infinity, maxHeight: 400)
            }
        }
    }
}

and this is the MapView code:

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        
        MKMapView()
    }
    
    func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) {
        
        let coordinate = CLLocationCoordinate2D(latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2, longitudeDelta: 2)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        uiView.setRegion(region, animated: true)
    }
}

Hi. Thank you for the reply. This isn’t quite the effect I’m going for. I would like an opaque image which occupies a set location on the map and scrolls in and out with it (as the polygon does in the code above). So really I just want to replace that polygon rectangle with an opaque image. I’m hoping that if I did that then any annotations which I add to the map would be visible above the overlay, so the annotations would then appear to point to the picture.