How can I help you?
Annotations in React 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 AnnotationsDirective, accepts text content, the ID of an HTML element, or an HTML string to render custom content on the Maps.
<script id='annotation' type="text/x-template">
<div id='template'>
<img style="width:50px;height:50px" src='https://ej2.syncfusion.com/react/demos/src/maps/images/weather-clear.png'>
</div>
</script>
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content="#annotation" x="0%" y="50%"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Annotation customization
Changing the z-index
The zIndex property in the AnnotationsDirective controls the stack order of annotation elements. A higher z-index value places the annotation above other Maps elements.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="0%" y="50%" zIndex="-1"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="0%" y="50%" zIndex="-1"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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 AnnotationsDirective.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="20%" y="50%" zIndex="-1"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="20%" y="50%" zIndex="-1"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Alignment of an annotation
Annotations can be aligned using the horizontalAlignment and verticalAlignment properties in the AnnotationsDirective. The supported values are Center, Far, Near, and None.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="20%" y="50%" zIndex="-1"
verticalAlignment="Center" horizontalAlignment="Center"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="20%" y="50%" zIndex="-1"
verticalAlignment="Center" horizontalAlignment="Center"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Multiple annotations
Multiple annotations can be added to the Maps component by defining an array of annotation objects in the AnnotationDirective property. Each annotation can be customized individually using the AnnotationsDirective settings.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps-Annotation</h1></div>' x="50%" y="0%" zIndex="-1"/>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="20%" y="50%" zIndex="-1"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { AnnotationsDirective, AnnotationDirective, Annotations} from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Annotations]}/>
<AnnotationsDirective>
<AnnotationDirective content='<div id="first"><h1>Maps-Annotation</h1></div>' x="50%" y="0%" zIndex="-1"/>
<AnnotationDirective content='<div id="first"><h1>Maps</h1></div>' x="20%" y="50%" zIndex="-1"/>
</AnnotationsDirective>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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.
const logo = require('./compass.png');
<img src={logo} height="75px" width="75px"/>
[app.tsx]
import { africa_continent } from 'africa-continent.ts';
import * as React from 'react';
import { MapsComponent, LayersDirective, LayerDirective, Inject, Annotations } from '@syncfusion/ej2-react-maps';
import * as ReactDOM from 'react-dom';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#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;
}`;
export function App() {
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section row">
<MapsComponent
annotations={[
{
content: '#maps-annotation',
x: '0%',
y: '70%'
}
]}
>
<Inject services={[Annotations]} />
<LayersDirective>
<LayerDirective shapeData={africa_continent} />
</LayersDirective>
</MapsComponent>
</div>
<div id="maps-annotation" style=>
<div id="annotation">
<div
style=
>
<h5 style=>Facts about Africa</h5>
</div>
<hr />
<div>
<ul style=>
<li>
Africa is the second largest and second most populated
continent in the world.
</li>
<li style=>
Africa has 54 sovereign states and 10 non-sovereign
territories.
</li>
<li style=>
Algeria is the largest country in Africa, where as Mayotte is
the smallest.
</li>
</ul>
</div>
</div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { africa_continent } from 'africa-continent.ts';
import * as React from 'react';
import { MapsComponent, LayersDirective, LayerDirective, Inject, Annotations } from '@syncfusion/ej2-react-maps';
import * as ReactDOM from 'react-dom';
const SAMPLE_CSS = `
.control-fluid {
padding: 0px !important;
}
#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;
}`;
export function App() {
return (
<div className="control-pane">
<style>{SAMPLE_CSS}</style>
<div className="control-section row">
<MapsComponent
annotations={[
{
content: '#maps-annotation',
x: '0%',
y: '70%'
}
]}
>
<Inject services={[Annotations]} />
<LayersDirective>
<LayerDirective shapeData={africa_continent} />
</LayersDirective>
</MapsComponent>
</div>
<div id="maps-annotation" style=>
<div id="annotation">
<div
style=
>
<h5 style=>Facts about Africa</h5>
</div>
<hr />
<div>
<ul style=>
<li>
Africa is the second largest and second most populated
continent in the world.
</li>
<li style=>
Africa has 54 sovereign states and 10 non-sovereign
territories.
</li>
<li style=>
Algeria is the largest country in Africa, where as Mayotte is
the smallest.
</li>
</ul>
</div>
</div>
</div>
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);