Annotations in Vue Maps component
16 Mar 202316 minutes to read
Annotations are used to mark the specific area of interest in the Maps with texts, shapes, or images. Any number of annotations can be added to the Maps component.
Annotation
By using the content property of e-maps-annotation, text content or id of an element or an HTML string can be specified to render a new HTML element in Maps.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-maps-annotations>
<e-maps-annotation :content='contentTemplate' :x='x1' :y='y1' :zIndex='zindex'>
</e-maps-annotation>
</e-maps-annotations>
<e-layers>
<e-layer :shapeData='shapeData' >
</e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, MapsComponent, Annotations } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
zindex:1,
x1:'0%',
y1:'50%',
contentTemplate: function () {
return {
template: Vue.component('MapsComponent', {
template: '<div id="first"><h1>Maps</h1></div>',
data() { return { }; }
})
}
},
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Annotation customization
Changing the z-index
The stack order of an annotation element can be changed using the zIndex property in the e-maps-annotation.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-maps-annotations>
<e-maps-annotation :content='contentTemplate' :x='x1' :y='y1' :zIndex='zindex'>
</e-maps-annotation>
</e-maps-annotations>
<e-layers>
<e-layer :shapeData='shapeData' >
</e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, MapsComponent, Annotations } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
zindex:1,
x1:'0%',
y1:'50%',
contentTemplate: function () {
return {
template: Vue.component('MapsComponent', {
template: '<div id="first"><h1>Maps</h1></div>',
data() { return { }; }
})
}
},
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Positioning an annotation
Annotations can be placed anywhere in the Maps by specifying pixel or percentage values to the x and y properties in the e-maps-annotation.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-maps-annotations>
<e-maps-annotation :content='contentTemplate' :x='x1' :y='y1' :zIndex='zindex'>
</e-maps-annotation>
</e-maps-annotations>
<e-layers>
<e-layer :shapeData='shapeData' >
</e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, MapsComponent, Annotations } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
zindex:1,
x1:'20%',
y1:'50%',
contentTemplate: function () {
return {
template: Vue.component('MapsComponent', {
template: '<div id="first"><h1>Maps</h1></div>',
data() { return { }; }
})
}
},
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Alignment of an annotation
Annotations can be aligned using the horizontalAlignment and verticalAlignment properties in the e-maps-annotation. The possible values can be Center, Far, Near and None.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-maps-annotations>
<e-maps-annotation :content='contentTemplate' :x='x1' :y='y1' :zIndex='zindex'
horizontalAlignment='Center' verticalAlignment='Center'>
</e-maps-annotation>
</e-maps-annotations>
<e-layers>
<e-layer :shapeData='shapeData' >
</e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, MapsComponent, Annotations } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
zindex:1,
x1:'20%',
y1:'50%',
contentTemplate: function () {
return {
template: Vue.component('MapsComponent', {
template: '<div id="first"><h1>Maps</h1></div>',
data() { return { }; }
})
}
},
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Multiple Annotation
Multiple annotations can be added to the Maps by adding multiple e-maps-annotation in the e-maps-annotation and customization for the annotations can be done with the e-maps-annotation.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps >
<e-maps-annotations>
<e-maps-annotation :content='contentTemplate' :x='x1' :y='y1' :zIndex='zindex'>
</e-maps-annotation>
<e-maps-annotation :content='contentTemplate1' :x='x2' :y='y2' :zIndex='zindex1'>
</e-maps-annotation>
</e-maps-annotations>
<e-layers>
<e-layer :shapeData='shapeData' >
</e-layer>
</e-layers>
</ejs-maps>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MapsPlugin, MapsComponent, Annotations } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
Vue.use(MapsPlugin);
export default {
data () {
return{
shapeData: world_map,
zindex:1,
x1:'50%',
y1:'0%',
zindex1:1,
x2: '20%',
y2: '50%',
contentTemplate: function () {
return {
template: Vue.component('MapsComponent', {
template: '<div id="first"><h1>Maps</h1></div>',
data() { return { }; }
})
}
},
contentTemplate1: function () {
return {
template: Vue.component('MapsComponent', {
template: '<div id="first"><h1>Multiple-annotation</h1></div>',
data() { return { }; }
})
}
}
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>