Methods in JavaScript Maps component

18 Nov 20188 minutes to read

The Maps component provides several public methods that enable programmatic control and interaction with map controls. 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 thre 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
var maps = new ej.maps.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) {
    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';
    }
}

document.getElementById('button').onclick = () => {
    var mapBoundCoordinates;
    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="world-map.js"></script>
    <script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>

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

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>