CODEWITHSUNDEEP
angularangular-componentsangular-google-mapsopenlayers-5angular-library
Funn_Bobby
Funn_Bobby

Reputation: 715

AGM angular Google Maps Set Zoom programmatically

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.

Upvotes: 7

Views: 8189

Answers (3)

Igor Amidzic
Igor Amidzic

Reputation: 41

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;

Upvotes: 4

Raji Rasheed
Raji Rasheed

Reputation: 56

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>

Upvotes: 3

jahller
jahller

Reputation: 2963

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

Upvotes: 4

Related Questions