0

I'm a newbie and I am trying to make a simple map project. I want to zoom in and out with buttons on the map but it's not working. I already tried using MKMapView but I can't change MGLMapView to MKMapView.

I tried to set a mglMapCamera variable in MapView and use it in ContentView but it didn't work either.

Also in MapView on this line: mglMapView = mapView I'm getting this warning: Modifying state during view update, this will cause undefined behavior.

MapView

@State public var mglMapView = MGLMapView()
@State public var mglMapCamera = MGLMapCamera()
func makeUIView(context: Context) -> MGLMapView {
    // read the key from property list
    let mapTilerKey = getMapTilerkey()
    validateKey(mapTilerKey)
    
    // Build the style url
    let styleURL = URL(string: "https://api.maptiler.com/maps/streets/style.json?key=\(mapTilerKey)")
    
    // create the mapview
    let mapView = MGLMapView(frame: .zero, styleURL: styleURL)
    mglMapView = mapView
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    mapView.logoView.isHidden = true
    mapView.setCenter(
        CLLocationCoordinate2D(latitude: 47.127757, longitude: 8.579139),
        zoomLevel: 10,
        animated: true)
    mapView.layoutMargins = UIEdgeInsets(top: 20, left: 0, bottom: 20, right: 0)
    // use the coordinator only if you need
    // to respond to the map events
    mapView.delegate = context.coordinator
    
    return mapView
}
func updateUIView(_ uiView: MGLMapView, context: Context) {}

func makeCoordinator() -> MapView.Coordinator {
    Coordinator(self)
}

final class Coordinator: NSObject, MGLMapViewDelegate {
    var control: MapView
    
    init(_ control: MapView) {
        self.control = control
    }

    func mapViewDidFinishLoadingMap(_ mapView: MGLMapView) {
        
        
        // write your custom code which will be executed
        // after map has been loaded
    }
}

ContentView

var mapView = MapView()
@State var currentZoom:CGFloat = 10.0
func ZoominOutMap(level:CGFloat){
    let camera = MGLMapCamera(lookingAtCenter: CLLocationCoordinate2D(latitude: 47.127757, longitude: 8.579139), fromEyeCoordinate: self.mapView.mglMapView.camera.centerCoordinate, eyeAltitude: 10)
    self.mapView.mglMapView.setCamera(camera, animated: true)
}

Buttons in ContentView

VStack {
                Button("+") {
                    currentZoom = currentZoom + 1
                    self.ZoominOutMap(level: currentZoom)
                }
                .frame(width: 30, height: 30)
                .foregroundColor(Color.white)
                .background(Color.gray)
                                .clipShape(Circle())
                Button("-") {
                    currentZoom = currentZoom - 1
                    self.ZoominOutMap(level: currentZoom)
                }
                .frame(width: 30, height: 30)
                                .foregroundColor(Color.white)
                                .background(Color.gray)
                                .clipShape(Circle())
            }
Eda
  • 23
  • 5

1 Answers1

0

You can call a cameraUpdate for the same cameraPosition but zoom+=1 or -=1 to zoom in or out.

Then call animateCamera with that update and it should zoom in just fine.

Andres
  • 51
  • 7