AGM angular Google Maps Set Zoom programmatically

Question

I am working with AGM (Angular Google Maps) and OpenLayers.

I need to set the zoom of my AGM programmaticly but haven't been able to figure out how it works.

HTML Maps...

<div id="mapWrap" class="mapWrap" style="padding: 0px; width: 100%; height: 
100%; text-align: left">

  <agm-map  
    [latitude]="lat" 
    [longitude]="lng"
    [zoom]="currZoom" 
    [mapTypeId]="mapType" 
    [mapTypeControl]="mapControls" 
    [zoomControl]="mapControls" 
    [streetViewControl]="mapControls" 
  ></agm-map>

  <div id="map" class="map" style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: absolute; opacity: 0.5"></div>
</div>

Component Code

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap } from '@agm/core';
import { GoogleMap } from '@agm/core/services/google-maps-types';

import olMap from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import OSM from 'ol/source/OSM.js';
import XYZ from 'ol/source/XYZ';
import {transform} from 'ol/proj';
import {msFormValues} from './../values/ms-form-values';

@Component({
  selector: 'ms-map',
  templateUrl: './ms-map.component.html',
  styleUrls: ['./ms-map.component.scss']
})
export class MsMapComponent implements OnInit {

// testCoord = 
transform([msFormValues.googleLng,msFormValues.googleLat],'EPSG:3857', 
'EPSG:4326');

lat: number = msFormValues.googleLat;
lng: number = msFormValues.googleLng;
currZoom: number = msFormValues.googleZoom;
mapType = 'satellite' ;
mapControls = false;

constructor() {}

ngOnInit() {
  const osmLayer = new TileLayer({
    source: new OSM()
  });

  const xyzLayer = new TileLayer({
    source: new XYZ({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    })
  });
  msFormValues.view = new View({
    center: [0,0],
    zoom: 0,
    projection: 'EPSG:3857',
    maxZoom: 20,
    minZoom: 5
  });

  msFormValues.googleZoom = msFormValues.view.getZoom();
  msFormValues.map = new olMap({
    target: 'map',
    layers: [
      osmLayer,
      // xyzLayer
    ],
    view: msFormValues.view
  }); 

  msFormValues.view.on('change:center',function() {
    var mapCenter = transform(msFormValues.view.getCenter(),'EPSG:3857', 'EPSG:4326');
    msFormValues.googleLat = mapCenter[1];
    msFormValues.googleLng = mapCenter[0];
  });
  msFormValues.view.on('change:resolution',function() {
    msFormValues.googleZoom = msFormValues.view.getZoom();   
  });

  }
  setMapType(mapTypeId: string) {}
}

I'm actually porting this from AngularJS where I had all this working with the raw JS for google however in Angular 6 is seems just pulling the google librarys to a component library wasn't very straightforward and didn't work once you tried to install your component into another application.

Smug

what exactly is the problem? you seem to initialise the google maps view with a zoom of 0? can't you just change it to what you desire? or are you asking how to write a function that changes the zoom? – Stetson

Sorry, so in the Component code where I ".on('change:resolution'" I change the zoom there but nothing happens...I know I used to be able to call "setZoom" but I'm not sure how to do that with AGM – Smug

Answer 1

so according to the @agm/core documentation there is a zoom @input https://angular-maps.com/api-docs/agm-core/components/agmmap#zoom

changing the value of this input affects the zoom of the map

add a function like this to your component

public setZoom(): void {
  this.zoom = 10;
}

and then bind the function on a button

<button (click)="setZoom()">Set Zoom</button>

adjust it to your needs

Stetson

Yes this works...I adjusted my testing to just include the AGM map and it is working, I will be posting additional problems I am having. Thanks – Smug

@Stetson It doesn't work when we have marker cluster.Even after setting zoom level .it remains zoomed in.because marker cluster zooms the map when we click cluster.Is there any solution to this – Gurgle

Answer 2

The reason why the zoom change detection is not being triggered is because your currZoom variable is never changed. I solved this problem by keeping the currZoom variable in sync with the map. When the user changes the zoom, it will update your variable. Then when you want to change the zoom programmatically, there will be a difference to detect.

<agm-map  
       [zoom]="currZoom"
       (zoomChange)="onZoomChange($event)" <---------- Add this
></agm-map>

currZoom: number = 4       // <---- Example 4 for initial value

onZoomChange(newZoomValue) {
    this.currZoom = newZoomValue;
}

Now you can update the currZoom variable and the agm-map element will detect the change.

this.currZoom = 5;

Patrickpatrilateral

Answer 3

Just to add to the answer, you can also animate the zoom using interval

zoomIn(){
   const interValZoom = setInterval(() => {
    this.zoom = this.zoom + 1 ;
        if (this.zoom > 15) {
            clearInterval(interValZoom); 
             // stop the zoom at your desired number
            }
    }, 100);
}

then on your button

<button (click)="zoomIn()"> Animate Zoom</button>

Unaccompanied