Search results

Annotation in React Maps component

15 Oct 2021 / 3 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 control.

Annotation

By using the content property of AnnotationsDirective, text content or id of an element or an HTML string can be specified to render a new HTML element in Maps.

Copied to clipboard
<script id='annotation' type="text/x-template">
   <div id='template'>
       <img src='src/maps/images/flight.png'>
   </div>
</script>
Copied to clipboard
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';


ReactDOM.render(
            <MapsComponent id="maps">
            <Inject services={[Annotations]}/>
                <AnnotationsDirective>
                    <AnnotationDirective content="#annotation" x="0%" y="50%"/>
                </AnnotationsDirective>
                <LayersDirective>
                    <LayerDirective shapeData={world_map}>
                    </LayerDirective>
                </LayersDirective>
            </MapsComponent>,
            document.getElementById("maps") as HTMLElement
);

Annotation customization

Changing the z-index

The stack order of an annotation element can be changed using the zIndex property in the AnnotationsDirective.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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';


ReactDOM.render(
            <MapsComponent id="maps">
            <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>,
            document.getElementById("maps") as HTMLElement
);
Copied to clipboard
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';
ReactDOM.render(<MapsComponent id="maps">
            <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>, document.getElementById("maps"));

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.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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';


ReactDOM.render(
            <MapsComponent id="maps">
            <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>,
            document.getElementById("maps") as HTMLElement
);
Copied to clipboard
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';
ReactDOM.render(<MapsComponent id="maps">
            <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>, document.getElementById("maps"));

Alignment of an annotation

Annotations can be aligned using the horizontalAlignment and verticalAlignment properties in the AnnotationsDirective. The possible values can be Center, Far, Near and None.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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';


ReactDOM.render(
            <MapsComponent id="maps">
            <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>,
            document.getElementById("maps") as HTMLElement
);
Copied to clipboard
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';
ReactDOM.render(<MapsComponent id="maps">
            <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>, document.getElementById("maps"));

Multiple Annotation

Multiple annotations can be added to the Maps by adding multiple AnnotationDirective in the AnnotationsDirective and customization for the annotations can be done with the AnnotationDirective.

Source
Preview
index.tsx
index.jsx
Copied to clipboard
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';


ReactDOM.render(
            <MapsComponent id="maps">
            <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>,
            document.getElementById("maps") as HTMLElement
);
Copied to clipboard
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';
ReactDOM.render(<MapsComponent id="maps">
            <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>, document.getElementById("maps"));