Methods in Angular Maps component

18 Nov 20188 minutes to read

The Maps component provides several public methods that enable programmatic control and interaction with map component. These methods allow developers to perform operations such as retrieving geographic coordinates, manipulating layers, refreshing content, and exporting map visualizations. This section documents the available methods and their usage.

getMinMaxLatitudeLongitude

The getMinMaxLatitudeLongitude method retrieves the geographic boundary coordinates of the currently visible map area. This method returns an IMinMaxLatitudeLongitude object containing the minimum and maximum latitude and longitude values that define the map’s visible bounds.

Use cases:

This method is particularly useful when there is a need to:

• Determine which geographic area is currently displayed to users
• Implement custom zoom or pan controls with boundary validation
• Synchronize multiple map instances to show the same geographic region
• Calculate distances or perform spatial queries within the visible area
• Log or save the current map view state for later restoration

Return value:

The method returns an object with the following structure:

• minLatitude - The minimum latitude value of the visible area
• maxLatitude - The maximum latitude value of the visible area
• minLongitude - The minimum longitude value of the visible area
• maxLongitude - The maximum longitude value of the visible area

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, ZoomService } from '@syncfusion/ej2-angular-maps'

import {
    Component,
    ViewEncapsulation,
    ViewChild,
    ElementRef,
} from '@angular/core';
import { world_map } from './world-map';
import { MapsComponent } from '@syncfusion/ej2-angular-maps';

@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, ZoomService],
standalone: true,
    selector: 'app-container',
    template: ` <div class="control-section">
        <button id="button" (click)="getMinMaxValues()">GetMinMaxLatitudeLongitude</button>
    <p id="coordinatesDisplay" #coordinatesDisplay></p>
      <div align='center'>
      <ejs-maps id='container' #maps style="display:block;" [zoomSettings]="zoom" [centerPosition]="centerPosition">
      <e-layers>
      <e-layer [shapeData]='worldMap' [markerSettings]='markerSettings'></e-layer>
      </e-layers>
      </ejs-maps>
      </div>
      </div>`,
    encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
    @ViewChild('maps')
    public mapObj?: MapsComponent;
    @ViewChild('coordinatesDisplay') coordinatesDisplay!: ElementRef;
    public worldMap = world_map;

    public formatKey(key: string): string {
        if (key === 'minLatitude') {
            return 'Minimum Latitude';
        } else if (key === 'maxLatitude') {
            return 'Maximum Latitude';
        } else if (key === 'minLongitude') {
            return 'Minimum Longitude';
        } else if (key === 'maxLongitude') {
            return 'Maximum Longitude';
        }
        return key;
    }

    public getMinMaxValues() {
        let mapBoundCoordinates: any;
        mapBoundCoordinates = this.mapObj?.getMinMaxLatitudeLongitude();
        if (this.coordinatesDisplay && this.coordinatesDisplay.nativeElement) {
            const displayDiv = this.coordinatesDisplay.nativeElement;
            if (mapBoundCoordinates) {
                displayDiv.innerHTML = '';
                for (const key in mapBoundCoordinates) {
                    if (Object.hasOwnProperty.call(mapBoundCoordinates, key)) {
                        const p = document.createElement('p');
                        const formattedKey = this.formatKey(key);
                        p.textContent = `${formattedKey}: ${mapBoundCoordinates[key]}`;
                        displayDiv.appendChild(p);
                    }
                }
            } else {
                displayDiv.textContent = 'No coordinates available';
            }
        }
    }

    public zoom: Object = {
        enable: true,
        zoomFactor: 7,
    };
    public centerPosition: Object = {
        latitude: 21.815447,
        longitude: 80.1932,
    };
    public markerSettings: Object = [
        {
            visible: true,
            height: 25,
            width: 25,
            shape: 'Circle',
            animationDuration: 1500,
            dataSource: [
                {
                    latitude: 22.572646,
                    longitude: 88.363895,
                },
                {
                    latitude: 25.0700428,
                    longitude: 67.2847875,
                },
            ],
        },
    ];
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));