Methods in Vue Maps component

18 Nov 20187 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 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.vue

<template>
    <div id="app">
          <div class='wrapper'>
             <ejs-button id='button' isToggle="true" v-on:click='getMinMaxValues'> GetMinMaxLatitudeLongitude
             </ejs-button>
             <p id="coordinatesDisplay"></p>
            <ejs-maps id="maps" ref="maps" :zoomSettings='zoomSettings' :centerPosition='centerPosition'>
                <e-layers>
                    <e-layer :shapeData='shapeData'  :markerSettings='markerSettings'></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>

import { MapsComponent, Marker, Zoom, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { world_map } from './world-map.js';


export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
    return{
        shapeData: world_map,
        zoomSettings:{
           enable:true,
           zoomFactor:7
        },
        centerPosition: {
            latitude: 21.815447,
            longitude: 80.1932,
        },
        markerSettings: [
          {
               visible:true,
                height:25,
                width:25,
                shape:"Circle",
                animationDuration:1500,
                dataSource:[
                  {
                    latitude: 22.572646,
                    longitude: 88.363895,
                  },
                  {
                    latitude: 25.0700428,
                    longitude: 67.2847875,
                  }
                ]
          }
        ]
    }
},
provide: {
    maps: [Marker, Zoom]
},
methods: {
  formatKey: function(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';
    }
  },

  getMinMaxValues: function() {
    var mapBoundCoordinates;
    mapBoundCoordinates =  this.$refs.maps.ej2Instances.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 = this.formatKey(key);
          p.textContent = `${formattedKey}: ${mapBoundCoordinates[key]}`;
          displayDiv.appendChild(p);
        }
      }
    } else {
      displayDiv.textContent = 'No coordinates available';
    }
  }
}
}
</script>
<style>
  .wrapper {
    max-width: 450px;
    margin: 0 auto;
  }
</style>