Annotations in Vue Maps component

11 Jun 202424 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.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 stack order of an annotation element can be changed using the zIndex property in the e-maps-annotation.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 possible values can be Center, Far, Near and None.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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 by adding multiple e-maps-annotation in the e-maps-annotation and customization for the annotations can be done with the e-maps-annotation.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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>