Search results

Annotations

Annotations are used to mark a specific area of interest in the map area with texts, shapes, or images. You can add any number of annotations to the maps.

Annotation

By using the content property of annotation object, you can either specify the ID of an element or specify the code to create a new element that needs to be displayed in the gauge area.

<script id='annotation' type="text/x-template">
    <div id='template'>
        <img src='src/maps/images/flight.png'>
    </div>
</script>
import { Maps, Annotations } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Annotations);

let maps: Maps = new Maps({
        annotations: [
            {
                content: '#annotation',
                x: '0%', y: '50%'
            }
        ],
        layers: [
            {
                shapeData: world_map,
            }
        ]
    });
    maps.appendTo('#element');

Annotation customization

Changing the z-order

You can change the z-order of an annotation element using the zIndex property.

{% tab template= “maps/default-map”,sourceFiles=“index.ts,index.html,index.css” , isDefaultActive=true , es5Template = “annotationZOrder” %}

import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
   annotations: [
            {
                content: '<div id="first"><h1>Maps</h1></div>',
                x: '0%', y: '50%',
                zIndex: '-1'
            }
   ],
   layers: [
        {
             shapeData: world_map
        }
    ]
}, '#element');

{% endtab %}

Positioning of annotation

You can place an annotation anywhere in gauge area by specifying pixel values to the x and y properties.

{% tab template= “maps/default-map”,sourceFiles=“index.ts,index.html,index.css” , isDefaultActive=true , es5Template = “annotationPosition” %}

import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
   annotations: [
            {
                content: '<div id="first"><h1>Maps</h1></div>',
                x: '20%', y: '50%',
                zIndex: '-1'
            }
   ],
   layers: [
        {
             shapeData: world_map
        }
    ]
}, '#element');

{% endtab %}

Alignment of annotation

You can align annotations using the horizontalAlignment and verticalAlignment properties.

{% tab template= “maps/default-map”,sourceFiles=“index.ts,index.html,index.css” , isDefaultActive=true , es5Template = “annotationAlignment” %}

import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
   annotations: [
            {
                content: '<div id="first"><h1>Maps</h1></div>',
                verticalAlignment: 'Center',
                horizontalAlignment: 'Center',
                x: '20%', y: '50%',
                zIndex: '-1'
            }
   ],
   layers: [
        {
             shapeData: world_map
        }
    ]
}, '#element');

{% endtab %}