How to add custom zoom buttons to Angular Maps?

The zoom toolbar in Angular Maps allows you to zoom in and out of the map. Instead of the zooming toolbar, we can position custom buttons above the Maps to call the zooming functions. This section will explain you how to add two custom buttons above the Maps for calling zooming functions.

In the following example, we set the position CSS style of two buttons to “absolute” and adjusted the left and top CSS styles to place them above the Maps component, in the top-right corner (below the zoom toolbar). The zoomByPosition method of the Maps component is called on the button click event to zoom in and out of the Maps. We must provide the method with the values for the center position and zoom factor as parameters. You can apply media query CSS styles to make the button responsive across multiple devices and screen sizes.

The below code example demonstrates how to add custom zoom buttons to Angular Maps.

app.component.html

<div class="control-section">
  <div align="center">
    <div>
      <button id="buttonone" (click)="zoomin()">Zoom In</button>
      <button id="buttontwo" (click)="zoomout()">Zoom Out</button>
    </div>
    <ejs-maps
      id="container"
      #maps
      style="display:block;"
      [zoomSettings]="zoomSettings"
      [layers]="layers"
    >
    </ejs-maps>
  </div>
</div>
<style>

    #buttonone {
      position: absolute;
      top: 62px;
      left: 90%;
      z-index: 999;
    }

    #buttontwo {
      position: absolute;
      top: 62px;
      left: 94%;
      z-index: 999;
    }

  @media (max-width: 2000px) {
    #buttonone {
      position: absolute;
      top: 62px;
      left: 90%;
      z-index: 999;
    }

    #buttontwo {
      position: absolute;
      top: 62px;
      left: 94%;
      z-index: 999;
    }
  }

  @media (max-width: 1180px) {
    #buttonone {
      position: absolute;
      top: 62px;
      left: 82%;
      z-index: 999;
    }

    #buttontwo {
      position: absolute;
      top: 62px;
      left: 90%;
      z-index: 999;
    }
  }

  @media (max-width: 800px) {
    #buttonone {
      position: absolute;
      top: 62px;
      left: 68%;
      z-index: 999;
    }

    #buttontwo {
      position: absolute;
      top: 62px;
      left: 81%;
      z-index: 999;
    }
  }

  @media (min-width: 600px) and (max-width: 800px) {
    #buttonone {
      position: absolute;
      top: 62px;
      left: 72%;
      z-index: 999;
    }

    #buttontwo {
      position: absolute;
      top: 62px;
      left: 84%;
      z-index: 999;
    }
  }
</style>

app.component.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Zoom, Annotations, Maps } from '@syncfusion/ej2-angular-maps';
Maps.Inject(Zoom, Annotations);
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  @ViewChild('maps')
  public maps: Maps;

  public factor = 1;
  public initialcenterPosition = {
    latitude: 27.700001,
    longitude: 85.333336,
  };

  public zoomSettings: object = {
    enable: true,
    zoomFactor: 1,
    toolbarSettings: {
      orientation: 'Horizontal',
      verticalAlignment: 'Near',
      buttonSettings: {
        toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'],
      },
    },
  };

  public zoomin() {
    this.factor++;
    if (this.factor <= this.maps.zoomSettings.maxZoom) {
      this.maps.zoomByPosition(this.initialcenterPosition, this.factor);
    } else {
      this.factor = this.maps.zoomSettings.maxZoom;
    }
  }

  public zoomout() {
    this.factor--;
    if (this.factor >= this.maps.zoomSettings.minZoom) {
      this.maps.zoomByPosition(this.initialcenterPosition, this.factor);
    } else {
      this.factor = this.maps.zoomSettings.minZoom;
    }
  }

  public layers: object[] = [
    {
      urlTemplate: 'https://tile.openstreetmap.org/level/tileX/tileY.png',
    },
  ];

  constructor() {}
}

The following screenshots illustrate the output of the above code snippet.

Screenshot of the Maps’ initial rendering with custom buttons:

Screenshot after zooming the Maps using custom buttons:

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to add custom zoom buttons to Angular Maps component.

You can refer to our Angular Maps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Maps example to understand how to create and visualize the data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!