Methods in EJ2 TypeScript Maps control

26 Dec 20237 minutes to read

Methods

This section explains the methods used in the Maps control.

getMinMaxLatitudeLongitude

The getMinMaxLatitudeLongitude method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a IMinMaxLatitudeLongitude object that contains the Maps minimum and maximum latitude and longitude coordinates.

import { Maps, Zoom, Marker, IMinMaxLatitudeLongitude } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Zoom, Marker);
let maps: Maps = new Maps({
    zoomSettings: {
        enable: true,
        zoomFactor: 7
    },
    centerPosition: {
        latitude: 21.815447,
        longitude: 80.1932
    },
    layers: [
        {
            shapeData: world_map,
            markerSettings: [
                {
                    visible: true,
                    height: 25,
                    width: 25,
                    shape: 'Circle',
                    animationDuration: 1500,
                    dataSource: [
                        {
                            latitude: 22.572646,
                            longitude: 88.363895
                        },
                        {
                            latitude: 25.0700428,
                            longitude: 67.2847875
                        }
                    ]
                }
            ]
        }
    ]
});
maps.appendTo('#element');

function 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';
    }
}

if (document.getElementById('button') != null) {
    document.getElementById('button').onclick = () => {
        let mapBoundCoordinates: IMinMaxLatitudeLongitude;
        mapBoundCoordinates = maps.getMinMaxLatitudeLongitude();
        const displayDiv = document.getElementById('coordinatesDisplay');
        displayDiv.innerHTML = '';
        if (mapBoundCoordinates) {
            for (const key in mapBoundCoordinates) {
                if (Object.hasOwnProperty.call(mapBoundCoordinates, key)) {
                    const p = document.createElement('p');
                    const formattedKey = formatKey(key);
                    p.textContent = `${formattedKey}: ${mapBoundCoordinates[key]}`;
                    displayDiv.appendChild(p);
                }
            }
        } else {
            displayDiv.textContent = 'No coordinates available';
        }
    };
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script src="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="margin-top: 125px">
        <button id="button" width="15%">GetMinMaxLatitudeLongitude</button>
        <p id="coordinatesDisplay"></p>
        <div id='element'></div>
    </div>

</body>

</html>