How can I help you?
Annotations in Vue Maps component
6 Feb 202624 minutes to read
Annotations allow marking specific areas of interest on a map by adding custom content such as text, shapes, images, or HTML elements. Unlike markers and data labels, annotations provide flexibility to overlay any custom HTML content at precise locations. Multiple annotations can be added to the Maps component.
Adding an annotation
The content property of e-maps-annotation, accepts text content, the ID of an HTML element, or an HTML string to render custom content on the map.
<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 setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Annotations, AnnotationDirective as EMapsAnnotation, AnnotationsDirective as EMapsAnnotations,
LayerDirective as ELayer, LayersDirective as ELayers } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
const shapeData = world_map;
const zindex = 1;
const x1 = '0%';
const y1 = '50%';
const contentTemplate = function () {
return {
template: mapTemplate
}
};
provide('maps', [ Annotations ]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><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 { MapsComponent, Annotations, AnnotationDirective, AnnotationsDirective, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-maps-annotations":AnnotationsDirective,
"e-maps-annotation":AnnotationDirective,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
shapeData: world_map,
zindex:1,
x1:'0%',
y1:'50%',
contentTemplate: function () {
return {
template: mapTemplate
}
},
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Annotation customization
Changing the z-index
The zIndex property in the e-maps-annotationcontrols the stack order of annotation elements. A higher z-index value places the annotation above other Maps elements.
<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 setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Annotations, AnnotationsDirective as EMapsAnnotations, AnnotationDirective as EMapsAnnotation,
LayerDirective as ELayer, LayersDirective as ELayers
} from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
const shapeData = world_map;
const zindex = 1;
const x1 = '0%';
const y1 = '50%';
const contentTemplate = function () {
return {
template: mapTemplate
}
};
provide('maps', [ Annotations ]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><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 { MapsComponent, Annotations, AnnotationsDirective, AnnotationDirective, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-maps-annotations":AnnotationsDirective,
"e-maps-annotation":AnnotationDirective,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
shapeData: world_map,
zindex:1,
x1:'0%',
y1:'50%',
contentTemplate: function () {
return {
template: mapTemplate
}
},
}
},
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 setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Annotations, AnnotationsDirective as EMapsAnnotations, AnnotationDirective as EMapsAnnotation,
LayerDirective as ELayer, LayersDirective as ELayers
} from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
const shapeData = world_map;
const zindex = 1;
const x1 = '0%';
const y1 = '50%';
const contentTemplate = function () {
return {
template: mapTemplate
}
};
provide('maps', [ Annotations ]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><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 { MapsComponent, Annotations, AnnotationsDirective, AnnotationDirective, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-maps-annotations":AnnotationsDirective,
"e-maps-annotation":AnnotationDirective,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
},
data () {
return{
shapeData: world_map,
zindex:1,
x1:'20%',
y1:'50%',
contentTemplate: function () {
return {
template: mapTemplate
}
},
}
},
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 supported values are 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 setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Annotations, AnnotationDirective as EMapsAnnotation, AnnotationsDirective as EMapsAnnotations,
LayerDirective as ELayer, LayersDirective as ELayers
} from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
const shapeData = world_map;
const zindex = 1;
const x1 = '20%';
const y1 = '50%';
const contentTemplate = function () {
return {
template: mapTemplate
}
};
provide('maps', [ Annotations ]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><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 { MapsComponent, Annotations, AnnotationDirective, AnnotationsDirective, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-maps-annotations":AnnotationsDirective,
"e-maps-annotation":AnnotationDirective,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
},
data () {
return{
shapeData: world_map,
zindex:1,
x1:'20%',
y1:'50%',
contentTemplate: function () {
return {
template: mapTemplate
}
},
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Multiple annotation
Multiple annotations can be added to the Maps component by defining an array of annotation objects in the e-maps-annotation. Each annotation can be customized individually using 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 setup>
import { provide } from "vue";
import { MapsComponent as EjsMaps, Annotations, AnnotationDirective as EMapsAnnotation, AnnotationsDirective as EMapsAnnotations,
LayerDirective as ELayer, LayersDirective as ELayers
} from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
const mapTemplate1 = app.component('MapsComponent1', {
data: () => ({}),
template: '<div id="first"><h1>Multiple-annotation</h1></div>'
});
const shapeData = world_map;
const zindex = 1;
const x1 = '50%';
const y1 = '0%';
const zindex1 = 1;
const x2 = '20%';
const y2 = '50%';
const contentTemplate = function () {
return {
template: mapTemplate
}
};
const contentTemplate1 = function () {
return {
template: mapTemplate1
}
};
provide('maps', [ Annotations ]);
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style><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 { MapsComponent, Annotations, AnnotationDirective, AnnotationsDirective, LayerDirective, LayersDirective } from '@syncfusion/ej2-vue-maps';
import { world_map } from './world-map.js';
import { createApp } from 'vue';
const app = createApp({});
const mapTemplate = app.component('MapsComponent', {
data: () => ({}),
template: '<div id="first"><h1>Maps</h1></div>'
});
const mapTemplate1 = app.component('MapsComponent1', {
data: () => ({}),
template: '<div id="first"><h1>Multiple-annotation</h1></div>'
});
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-maps-annotations":AnnotationsDirective,
"e-maps-annotation":AnnotationDirective,
"e-layers":LayersDirective,
"e-layer":LayerDirective
},
data () {
return{
shapeData: world_map,
zindex:1,
x1:'50%',
y1:'0%',
zindex1:1,
x2: '20%',
y2: '50%',
contentTemplate: function () {
return {
template: mapTemplate
}
},
contentTemplate1: function () {
return {
template: mapTemplate1
}
}
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
</style>Creating custom annotation templates
Initialize the Maps component with annotation option, text content or ID of an HTML element or an HTML string can be specified to render a new element that needs to be displayed in the Maps by using the content property. To specify the content position with x and y properties as mentioned in the following example.
<template>
<div id="app">
<div class='wrapper'>
<ejs-maps :annotations='annotations'>
<e-layers>
<e-layer :shapeData='shapeData' :shapeSettings='shapeSettings' >
</e-layer>
</e-layers>
</ejs-maps>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<div id="compass-maps" style="display: none;">
<img src="https://ej2.syncfusion.com/vue/demos/src/maps/images/compass.svg" height="75px" width="75px">
</div>
</div>
</div>
</template>
<script>
import { MapsComponent, LayerDirective, LayersDirective, Annotations } from '@syncfusion/ej2-vue-maps';
import { africa } from './africa.js';
export default {
name: "App",
components: {
"ejs-maps":MapsComponent,
"e-layers":LayersDirective,
"e-layer":LayerDirective,
},
data () {
return {
shapeData: africa,
shapeSettings: {
fill: 'url(#grad1)'
},
annotations:[{
content:'#maps-annotation', // To insert the text content
x: '0%', y: '70%'
},
{
content: '#compass-maps', // To insert the image
x: '80%', y: '5%'
}]
}
},
provide: {
maps: [ Annotations ]
}
}
</script>
<style>
.wrapper {
max-width: 400px;
margin: 0 auto;
}
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
border-radius: 2px;
width: 300px;
box-shadow: 0px 2px 5px #666;
}
</style>