ios – Show a polyline made of Track-Coordinates by Pressing a Button in Map View | SwiftUI


I want to show different tracks by pressing different buttons. I started off with trying to show the polyline for the first track by pressing a button.
If I put the “construction” of the polyline in the makeUIView function of my UI Wrapper, I can see it in the map.

However I only want to show it after pressing a button. So I put the polyline-related code in the updateUIView-function and designed the button with the help of an Observable Object class. Unfortunately it doesn’t work.

Here’s what I got so far (The lat1 and long1 Array are in the code, but I excluded them here, as they are very long and not really part of the problem):

import SwiftUI
import MapKit
import CoreLocation

//    MARK: ObservableObject
class MapViewModel: ObservableObject {
    @Published var didPressTrack01 = false

struct MapView: UIViewRepresentable {
    //    MARK: UIViewRepresentable
    @ObservedObject var viewModel: MapViewModel  
    @Binding var region: MKCoordinateRegion

    var trackCoordinates1 : [CLLocationCoordinate2D] {
    var LocationsArray = [CLLocationCoordinate2D]()
    for i in 0..<lat1.count {
        LocationsArray.append(CLLocationCoordinate2D(latitude: lat1[i], longitude: lon1[i]))
    return LocationsArray

    let map = MKMapView()
    ///Creating map view at startup
    func makeUIView(context: Context) -> MKMapView {
        let map = context.coordinator.mapView
        map.setRegion(region, animated: false)
        map.showsUserLocation = true
        map.delegate = context.coordinator
        return map
    func updateUIView(_ view: MKMapView, context: Context) {
        if viewModel.didPressTrack01 == true {

            let polyline = MKPolyline(coordinates: trackCoordinates1, count: trackCoordinates1.count)
    ///Use class Coordinator method
    func makeCoordinator() -> Coordinator {
        return Coordinator(self)

//MARK: - Core Location manager delegate
class Coordinator: NSObject, MKMapViewDelegate, CLLocationManagerDelegate {
    var parent: MapView
    init(_  parent: MapView) {
        self.parent = parent

    var mapView = MKMapView()

    func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {
        if let routePolyline = overlay as? MKPolyline {
            let renderer = MKPolylineRenderer(polyline: routePolyline)
            renderer.strokeColor = UIColor.systemRed
            renderer.lineWidth = 2
            return renderer
        return MKOverlayRenderer()

// MARK: View that shows map to users
struct Tap_Map_View: View {

@State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude:20.02281, longitude: 8.43188), latitudinalMeters: 180, longitudinalMeters: 180)
@StateObject var viewModel = MapViewModel()

var body: some View {

    ZStack(alignment: .bottom){
        MapView(viewModel: viewModel, region: $region)
            Button {
            } label: {
                Label("", systemImage: "point.topleft.down.curvedto.point.bottomright.up")



Source link

Leave a Reply

Your email address will not be published.