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)
}
}