Markers are notes used to leave some message on the maps. There are two ways to set marker for map.
Marker and marker template
Adding marker objects to map.
The markerSettings.dataSource property has a list of objects that contains the data for Annotation.
By default, it displays the bound data at the specified latitude and longitude. The markerSettings.template
property is used for customizing the template for markers.
Note: markerSettings is an Array property. So we need to use Directives.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
ReactDOM.render(
<MapsComponent id="maps">
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={30}
width={30}
template='<div id="marker1">Europe</div>'
dataSource={[{ latitude: 49.95121990866204, longitude: 18.468749999999998 }]}
>
</MarkerDirective>
<MarkerDirective visible={true}
height={30}
width={30}
template='<div id="marker2">North America</div>'
dataSource={[{ latitude: 59.88893689676585, longitude: -109.3359375 }]}
>
</MarkerDirective>
<MarkerDirective visible={true}
height={30}
width={30}
template='<div id="marker3">South America</div>'
dataSource={[{ latitude: -6.64607562172573, longitude: -55.54687499999999 }]}
>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>,
document.getElementById("maps") as HTMLElement
);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
<Inject services={[Marker]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true} height={30} width={30} template='<div id="marker1">Europe</div>' dataSource={[{ latitude: 49.95121990866204, longitude: 18.468749999999998 }]}>
</MarkerDirective>
<MarkerDirective visible={true} height={30} width={30} template='<div id="marker2">North America</div>' dataSource={[{ latitude: 59.88893689676585, longitude: -109.3359375 }]}>
</MarkerDirective>
<MarkerDirective visible={true} height={30} width={30} template='<div id="marker3">South America</div>' dataSource={[{ latitude: -6.64607562172573, longitude: -55.54687499999999 }]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>, document.getElementById("maps"));n number of markers can be added to shape layers with markerSettings.dataSource property. Each dataSource
object contains the following list of properties.
label - Text that displays some information about the annotation in text format. latitude - Latitude point determine the Y-axis position of annotation. longitude - Longitude point determine the X-axis position of annotation.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
ReactDOM.render(
<MapsComponent id="maps">
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
shape= {'Circle'}
dataSource={[{ latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' }]}
>
</MarkerDirective>
<MarkerDirective visible={true}
height={30}
width={30}
template='<div id="marker1">Europe</div>'
dataSource={[{ latitude: 49.95121990866204, longitude: 18.468749999999998 }]}
>
</MarkerDirective>
<MarkerDirective visible={true}
height={30}
width={30}
template='<div id="marker2">North America</div>'
dataSource={[{ latitude: 59.88893689676585, longitude: -109.3359375 }]}
>
</MarkerDirective>
<MarkerDirective visible={true}
height={30}
width={30}
template='<div id="marker3">South America</div>'
dataSource={[{ latitude: -6.64607562172573, longitude: -55.54687499999999 }]}
>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>,
document.getElementById("maps") as HTMLElement
);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps">
<Inject services={[Marker]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true} shape={'Circle'} dataSource={[{ latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' }]}>
</MarkerDirective>
<MarkerDirective visible={true} height={30} width={30} template='<div id="marker1">Europe</div>' dataSource={[{ latitude: 49.95121990866204, longitude: 18.468749999999998 }]}>
</MarkerDirective>
<MarkerDirective visible={true} height={30} width={30} template='<div id="marker2">North America</div>' dataSource={[{ latitude: 59.88893689676585, longitude: -109.3359375 }]}>
</MarkerDirective>
<MarkerDirective visible={true} height={30} width={30} template='<div id="marker3">South America</div>' dataSource={[{ latitude: -6.64607562172573, longitude: -55.54687499999999 }]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>, document.getElementById("maps"));Legend can be enabled for marker using legendSettings.type as Markers and legend visible as true, need
to inject Legend module to Maps using the Inject tag. Refer the code snippet to enable the legend for the markers.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject, Legend } from '@syncfusion/ej2-react-maps';
ReactDOM.render(
<MapsComponent id="maps" legendSettings={ { visible: true, type: 'Markers' } }>
<Inject services={[Marker, Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
legendText={ 'name'}
shape= {'Circle'}
dataSource={[{ latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },{ latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },{ latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }]}
>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>,
document.getElementById("maps") as HTMLElement
);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject, Legend } from '@syncfusion/ej2-react-maps';
ReactDOM.render(<MapsComponent id="maps" legendSettings={{ visible: true, type: 'Markers' }}>
<Inject services={[Marker, Legend]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true} legendText={'name'} shape={'Circle'} dataSource={[{ latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' }, { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' }, { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>, document.getElementById("maps"));Refer the API for Marker feature.