Custom Map annotations

Hello everyone, how can I change the standard pin icon to another? And how is it possible when I tap on the pin that an additional popup view opens in which the name of the city is at the top and that the associated image from the PhotoView is displayed? How could I best implement this?

Thanks in advance

MapView

import MapKit
import SwiftUI

struct City: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D

}

struct MapView: View {

    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 46.62407, longitude: 8.03434), span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))
    

    let annotations = [

        City(name: "Alte Strasse(Zuhause)", coordinate: CLLocationCoordinate2D(latitude: 46.63649, longitude: 7.97512)),

        City(name: "Stalden1", coordinate: CLLocationCoordinate2D(latitude: 46.63937, longitude: 7.97216)),

        City(name: "Stalden2", coordinate: CLLocationCoordinate2D(latitude: 46.63873, longitude: 7.96684)),

        City(name: "Scheideggstrasse(Wetterhorn)1", coordinate: CLLocationCoordinate2D(latitude: 46.63353, longitude: 8.07356)),

        City(name: "Scheideggstrasse(Wetterhorn)2", coordinate: CLLocationCoordinate2D(latitude: 46.63293, longitude: 8.07380)),

        City(name: "Scheideggstrasse(Wetterhorn)3", coordinate: CLLocationCoordinate2D(latitude: 46.63313, longitude: 8.07329)),

        City(name: "Scheideggstrasse(Wetterhorn)4", coordinate: CLLocationCoordinate2D(latitude: 46.63456, longitude: 8.07337)),

        City(name: "Obere Gletscherstrasse(Wetterhorn)", coordinate: CLLocationCoordinate2D(latitude: 46.63205, longitude: 8.07022)),

        City(name: "Obere Gletscherstrasse(Hotel Blümlisalp)", coordinate: CLLocationCoordinate2D(latitude: 46.63173, longitude: 8.06699)),

        City(name: "Itramenstrasse", coordinate: CLLocationCoordinate2D(latitude: 46.62060, longitude: 7.99514))

    ]

    var body: some View {

        Map(coordinateRegion: $region, annotationItems: annotations) {
            MapMarker(coordinate: $0.coordinate)
   

        }
        .onAppear {
            MKMapView.appearance().mapType = .satellite

        }        

    }

    struct MapView_Previews: PreviewProvider {
        static var previews: some View {
            MapView()

        }
    }

}

PhotoView


struct ContentView: View {

    var images: [String] = ["noaa1", "noaa2", "noaa3", "noaa4", "noaa5", "noaa6", "noaa7", "noaa8", "noaa9", "noaa10", "noaa11", "noaa12", "noaa13", "noaa14", "noaa15", "noaa16", "noaa17", "noaa18"]

    
    var columnGrid: [GridItem] = [GridItem(.fixed(180), spacing: 16), GridItem(.fixed(180), spacing: 16)]

        

    var body: some View {
        NavigationView {
            ScrollView {
                LazyVGrid(columns: columnGrid, alignment: .center, spacing: 16) {

                    ForEach(images, id: \.self) { image in

                        NavigationLink (destination: ImageDetail(imageName: image)) {

                            Image(image)
                                .resizable()
                                .scaledToFit()
                                .cornerRadius(10)

                        }

                    }

                }

            }.navigationBarTitle(Text("Test"), displayMode: .inline)

        }.navigationViewStyle(.stack)
    }

}
Custom Map annotations
 
 
Q