Search results

Markers

Markers are notes used to leave some message on the map. There are two ways to set marker for map.

  • Marker and marker template

  • Adding marker objects to map.

Marker and marker template

The markerSettings.dataSource property has a list of objects that contains the data for Annotation. By default, it displays the bound data at the specified latitude and longitude. The markerSettings.template property is used for customizing the template for markers.

Note: markerSettings is an Array property.

Source
Preview
app.vue
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' >
                    <e-markerSettings>
                    <e-markerSetting visible= true :template='template1' :dataSource ="dataSource1" animationDuration = 0 ></e-markerSetting>
                     <e-markerSetting visible= true :template='template2' :dataSource ="dataSource2" animationDuration = 0 ></e-markerSetting>
                     <e-markerSetting visible= true :template='template3' :dataSource ="dataSource3" animationDuration = 0 ></e-markerSetting>
                    </e-markerSettings>
                    </e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { MapsPlugin, Marker } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
    return{
        shapeData: world_map,
                        template1: '<div id="marker4" class="markerTemplate">Europe</div>',
                        dataSource1: [
                            { latitude: 49.95121990866204, longitude: 18.468749999999998 }
                        ],
                        template2: '<div id="marker5" class="markerTemplate" style="width:50px">NorthAmerica</div>',
                        dataSource2: [
                            { latitude: 59.88893689676585, longitude: -109.3359375 }
                        ],
                        template3: '<div id="marker6" class="markerTemplate" style="width:50px">South America </div>',
                        dataSource3: [
                            { latitude: -6.64607562172573, longitude: -55.54687499999999 }
                        ]
    }
},
provide: {
    maps: [ Marker]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Adding marker objects to map

n number of markers can be added to shape layers with markerSettings.dataSource property. Each dataSource object contains the following list of properties.

label - Text that displays some information about the annotation in text format. latitude - Latitude point determine the Y-axis position of annotation. longitude - Longitude point determine the X-axis position of annotation.

Source
Preview
app.vue
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps >
                <e-layers>
                    <e-layer :shapeData='shapeData' :markerSettings='markerSettings' ></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { MapsPlugin, Marker } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
    return{
      shapeData: world_map,
        markerSettings: [
                    {
                        visible: true,
                        dataSource: [
                            { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },
                            { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },
                            { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }
                        ],
                        shape: 'Circle'
                    },
                      {
                        visible: true,
                        template: '<div id="marker4" class="markerTemplate">Europe' +
                            '</div>',
                        dataSource: [
                            { latitude: 49.95121990866204, longitude: 18.468749999999998 }
                        ],
                        animationDuration: 0,
                    },
                    {
                        visible: true,
                        template: '<div id="marker5" class="markerTemplate" style="width:50px">North America' +
                            '</div>',
                        dataSource: [
                            { latitude: 59.88893689676585, longitude: -109.3359375 }
                        ],
                        animationDuration: 0
                    },
                    {
                        visible: true,
                        template: '<div id="marker6" class="markerTemplate" style="width:50px">South America' +
                            '</div>',
                        dataSource: [
                            { latitude: -6.64607562172573, longitude: -55.54687499999999 }
                        ],
                        animationDuration: 0
                    },
                    ]
    }
},
provide: {
    maps: [ Marker]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>

Enable the Legend for map markers

Legend can be enabled for marker using legendSettings.type as Markers and legend visible as true, need to inject Legend module to Maps using the provide option. Refer the code snippet to enable the legend for the markers.

Source
Preview
app.vue
<template>
    <div id="app">
          <div class='wrapper'>
            <ejs-maps :legendSettings='legendSettings' >
                <e-layers>
                    <e-layer :shapeData='shapeData' :markerSettings='markerSettings' ></e-layer>
                </e-layers>
            </ejs-maps>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { MapsPlugin, Marker, Legend } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
    return{
        legendSettings: {
            visible: true,
            type: 'Markers'
        },
        shapeData: world_map,
          markerSettings: [
                    {
                        visible: true,
                        legendText: 'name',
                        dataSource: [
                            { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },
                            { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },
                            { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }
                        ],
                        shape: 'Circle'
                    },
        ]
    }
},
provide: {
    maps: [Legend, Marker]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-maps/styles/material.css";
  .wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
</style>