0

I am trying to change the zoom level after clicking on a marker. I've tried to redefine the zoom inside the onMarkerEvent() :

onMarkerEvent(args) {

    if (args.eventName === 'markerInfoWindowTapped') {
        this.routerExtenstions.navigate([`../item/${args.marker.userData.id}`], { relativeTo: this.activatedRoute });

    } else if (args.eventName === 'markerSelect') {
        this.zoom = 17;
        this.mapView.zoom = this.zoom;
    }

}

However, the zoom is not changing.

On map.component.tns.html I have:

   <MapView #mapView [latitude]="latitude" [longitude]="longitude"
            [zoom]="zoom" [minZoom]="minZoom" [maxZoom]="maxZoom" [bearing]="bearing"
            [tilt]="tilt" i-padding="50,50,50,50" [padding]="padding" (mapReady)="onMapReady($event)"
            (markerSelect)="onMarkerEvent($event)" (markerInfoWindowTapped)="onMarkerEvent($event)" 
            (coordinateTapped)="onCoordinateTapped($event)"
            (cameraChanged)="onCameraChanged($event)" (mapAnimationsEnabled)="true"
            (cameraMove)="onCameraMove($event)">
    </MapView>  

Any ideas on how to fix this? I feel that maybe be something basic I am forgetting.

Thanks!

1 Answers1

0

To adjust the zoom you might have better luck by changing the mapView properties directly, you can do so by accessing the MapView through the args inside of the onMarkerEvent function.

Doing args.object.zoom = 17; should do the trick.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Tyler Blake
  • 136
  • 4