Annotation in EJ2 JavaScript Maps control

27 Apr 202310 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.

Initialize the Maps control 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.

var map = new ej.maps.Maps({
    annotations:[
        {
            content:'#maps-annotation', // To insert the text content
            x: '0%', y: '70%'
        },
        {
            content: '#compass-maps',  // To insert the image
            x: '80%', y: '5%'
        }
    ],
   layers: [
        {
            shapeData: africa_continent,
            shapeSettings: {
                fill: 'url(#grad1)'
            }
        }
    ],
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">


    <script src="africa_continent.js"></script>

    <script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <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>
    <!-- annotation content -->
    <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/javascript/demos/src/maps/images/compass.svg" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }

        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>

    <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="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #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>