Skip to content

Instantly share code, notes, and snippets.

@andresr-dev
Created April 27, 2022 21:24
Show Gist options
  • Select an option

  • Save andresr-dev/90584b1fc510444cdd61b995cbd76d38 to your computer and use it in GitHub Desktop.

Select an option

Save andresr-dev/90584b1fc510444cdd61b995cbd76d38 to your computer and use it in GitHub Desktop.
This is an example of how you can use Map in SwiftUI
import MapKit
import SwiftUI
struct Location: Identifiable {
let id: UUID
var name: String
let latitude: Double
let longitude: Double
var coordinate: CLLocationCoordinate2D {
CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
}
}
struct MapExample: View {
@State private var mapRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 50, longitude: 0), span: MKCoordinateSpan(latitudeDelta: 25, longitudeDelta: 25))
@State private var locations = [Location]()
var body: some View {
ZStack {
Map(coordinateRegion: $mapRegion, annotationItems: locations) { location in
MapAnnotation(coordinate: location.coordinate) {
VStack {
Image(systemName: "star.circle")
.resizable()
.foregroundColor(.red)
// 44 by 44 is the minimum size recommended by apple.
.frame(width: 44, height: 44)
.background(.white)
.clipShape(Circle())
Text(location.name)
// This avoids any possible clipped to the text
.fixedSize()
}
}
// This is the map marker that apple gives us by default
//MapMarker(coordinate: CLLocationCoordinate2D(latitude: location.latitude, longitude: location.longitude), tint: .red)
}
.ignoresSafeArea()
Circle()
.fill(.blue.opacity(0.5))
.frame(width: 32, height: 32)
}
.overlay(alignment: .bottomTrailing) {
Button {
let newLocation = Location(id: UUID(), name: "New location", latitude: mapRegion.center.latitude, longitude: mapRegion.center.longitude)
locations.append(newLocation)
} label: {
Image(systemName: "plus")
.padding()
.background(.black.opacity(0.7))
.foregroundColor(.white)
.font(.title)
.clipShape(Circle())
}
.padding(.trailing)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment