Markers in React Maps component
3 Apr 202424 minutes to read
This section shows how to add and customize the markers in the Maps component. The below video demonstrates the same.
Markers are notes that are used to leave a message on the Maps. It indicates or marks a specific location with desired symbols on the Maps. It can be enabled by setting the visible property of the markerSettings to true”.
Adding marker
To add the markers, the dataSource property of the markerSettings has a list of objects that contains the data for markers. Using this property, any number of markers can be added to the layers of the Maps. By default, it displays the markers based on the specified latitude and longitude in the given data source. Each data source object contains the following list of properties.
- latitude - The latitude point which determines the X location of the marker.
- longitude - The longitude point which determines the Y location of the marker.
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';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998 },
{ latitude: 59.88893689676585, longitude: -109.3359375 },
{ latitude: -6.64607562172573, longitude: -55.54687499999999 }
]}>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998 },
{ latitude: 59.88893689676585, longitude: -109.3359375 },
{ latitude: -6.64607562172573, longitude: -55.54687499999999 }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Adding marker template
The Marker can be added as a template in the Maps component. The template property of the markerSettings is used to set the HTML element or id of an element as a template.
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';
export function App() {
return(
<MapsComponent >
<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>
);
}
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, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<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>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customization
The following properties are available in markerSettings to customize the Markers of the Maps component.
-
border- To customize the color, width and opacity of the border for the markers in Maps. -
fill- To apply the color for markers in Maps. -
dashArray- To define the pattern of dashes and gaps that is applied to the outline of the markers in Maps. -
height- To customize the height of the markers in Maps. -
width- To customize the width of the markers in Maps. -
offset- To customize the position of the markers in Maps. -
opacity- To customize the transparency of the markers in Maps. -
animationDelay- To change the time delay in the transition for markers. -
animationDuration- To change the time duration of animation for 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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={1000}
animationDelay={100}
opacity={0.9}
shape="Balloon"
dashArray="1"
border={{
color: 'green',
width: 2
}}
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]}>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={1000}
animationDelay={100}
opacity={0.9}
shape="Balloon"
dashArray="1"
border={{
color: 'green',
width: 2
}}
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Marker shapes
The Maps component supports the following marker shapes. To set the shape of the marker, the shape property in markerSettings is used.
- Balloon
- Circle
- Cross
- Diamond
- Image
- Rectangle
- Start
- Triangle
- VerticalLine
- HorizontalLine
Rendering marker shape as image
To render a marker as an image in Maps, set the shape property of markerSettings as Image and specify the path of the image to imageUrl property. There is another way to render a marker as an image using the imageUrlValuePath property of the markerSettings. Bind the field name that contains the path of the image in the data source to the imageUrlValuePath property.
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';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
shape="Image"
imageUrl="https://ej2.syncfusion.com/react/demos/src/maps/images/ballon.png"
height={10}
width={10}
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]}>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
shape="Image"
imageUrl="https://ej2.syncfusion.com/react/demos/src/maps/images/ballon.png"
height={10}
width={10}
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Multiple marker groups
Multiple groups of markers can be added to the Maps by adding multiple MarkerDirective in the MarkersDirective and the customization for the markers can be done with the MarkerDirective.
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';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true} shape= "Diamond" height={15} fill="green" width={15}
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, name:'California'},
{ latitude: 40.7127, longitude: -74.0059, name:"New York" },
{ latitude: 42, longitude: -93, name:'Iowa' }
]}>
</MarkerDirective>
<MarkerDirective visible={true} height={10} width={10} fill="blue" shape= "Circle"
dataSource={[
{ latitude: 19.228825, longitude: 72.854118, name: "Mumbai"},
{ latitude: 28.610001, longitude: 77.230003, name: "Delhi"},
{ latitude: 13.067439, longitude: 80.237617, name: "Chennai"}
]}>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true} shape= "Diamond" height={15} fill="green" width={15}
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, name:'California'},
{ latitude: 40.7127, longitude: -74.0059, name:"New York" },
{ latitude: 42, longitude: -93, name:'Iowa' }
]}>
</MarkerDirective>
<MarkerDirective visible={true} height={10} width={10} fill="blue" shape= "Circle"
dataSource={[
{ latitude: 19.228825, longitude: 72.854118, name: "Mumbai"},
{ latitude: 28.610001, longitude: 77.230003, name: "Delhi"},
{ latitude: 13.067439, longitude: 80.237617, name: "Chennai"}
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customize marker shapes from data source
Bind different colors and shapes to the marker from data source
Using the shapeValuePath and colorValuePath properties, the color and shape of the marker can be applied from the given data source. Bind the data source to the dataSource property of the markerSettings and set the field names that contains the shape and color values in the data source to the shapeValuePath and colorValuePath properties.
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';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
shape= {'Circle'} shapeValuePath= {'shape'} colorValuePath= {'color'}
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe', color:'red', shape:'Triangle' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America',
color:'blue', shape:'Pentagon' },
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America',
color:'green', shape:'InvertedTriangle' }
]}
>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
shape= {'Circle'} shapeValuePath= {'shape'} colorValuePath= {'color'}
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe', color:'red', shape:'Triangle' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America',
color:'blue', shape:'Pentagon' },
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America',
color:'green', shape:'InvertedTriangle' }
]}
>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Setting value path from the data source
The latitude and longitude values are used to determine the location of each marker in the Maps. The latitudeValuePath and longitudeValuePath properties are used to specify the value path that presents in the data source of the marker. In the following example, the field name from the data source is set to the latitudeValuePath and longitudeValuePath properties.
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';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
latitudeValuePath = "latitude"
longitudeValuePath= "longitude"
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998 },
{ latitude: 59.88893689676585, longitude: -109.3359375},
{ latitude: -6.64607562172573, longitude: -55.54687499999999 }
]}>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
latitudeValuePath = "latitude"
longitudeValuePath= "longitude"
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998 },
{ latitude: 59.88893689676585, longitude: -109.3359375},
{ latitude: -6.64607562172573, longitude: -55.54687499999999 }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Repositioning the marker using drag and drop
The markers on the map can be dragged and dropped to change their position. To enable marker drag and drop, set the enableDrag property to true in the markerSettings property.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject, MarkersDirective, MarkerDirective, Marker } from '@syncfusion/ej2-react-maps';
export function App() {
return(<div><MapsComponent>
<Inject services={[MapsTooltip, Marker]} />
<LayersDirective>
<LayerDirective
shapeData={world_map}
shapeSettings={{
fill: '#C3E6ED',
}}
>
<MarkersDirective>
<MarkerDirective
enableDrag={true}
visible={true}
animationDuration={0}
dataSource={[
{
latitude: 49.95121990866204,
longitude: 18.468749999999998,
name: 'MarkerOne',
},
{
latitude: 59.88893689676585,
longitude: -109.3359375,
name: 'MarkerTwo',
},
{
latitude: -6.64607562172573,
longitude: -55.54687499999999,
name: 'MarkerThree',
},
{
latitude: 23.644385824912135,
longitude: 77.83189239539234,
name: 'MarkerFour',
},
{
latitude: 63.66569332894224,
longitude: 98.2225173953924,
name: 'MarkerFive',
},
]}
shape="Balloon"
width={20}
height={20}
border={{ width: 2, color: '#285255' }}
tooltipSettings={{
visible: true,
valuePath: 'name',
}}
></MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>);
}
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,
MapsTooltip,
Inject,
MarkersDirective,
MarkerDirective,
Marker,
} from '@syncfusion/ej2-react-maps';
export function App() {
return (
<div><MapsComponent>
<Inject services={[MapsTooltip, Marker]} />
<LayersDirective>
<LayerDirective
shapeData={world_map}
shapeSettings={{
fill: '#C3E6ED',
}}
>
<MarkersDirective>
<MarkerDirective
enableDrag={true}
visible={true}
animationDuration={0}
dataSource={[
{
latitude: 49.95121990866204,
longitude: 18.468749999999998,
name: 'MarkerOne',
},
{
latitude: 59.88893689676585,
longitude: -109.3359375,
name: 'MarkerTwo',
},
{
latitude: -6.64607562172573,
longitude: -55.54687499999999,
name: 'MarkerThree',
},
{
latitude: 23.644385824912135,
longitude: 77.83189239539234,
name: 'MarkerFour',
},
{
latitude: 63.66569332894224,
longitude: 98.2225173953924,
name: 'MarkerFive',
},
]}
shape="Balloon"
width={20}
height={20}
border={{ width: 2, color: '#285255' }}
tooltipSettings={{
visible: true,
valuePath: 'name',
}}
></MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);The data of the drag and dropped marker in the marker data source can be customized using the markerDragStart and markerDragEnd events. When you change the appropriate marker data, the tooltip and legend item text of that marker are automatically updated. The following properties are available in the event argument of the marker drag events.
| Argument Name | Description |
|---|---|
| dataIndex | It represents the index of the data of the dragged marker in the marker data source. |
| latitude | It represents the latitude coordinate point of the dragged marker. |
| longitude | It represents the longitude coordinate point for the dragged marker. |
| markerIndex | It represents the index of the marker setting. |
| layerIndex | It represents the index of the layer in which the marker belongs. |
| name | It represents the name of the event. |
| x | It represents the horizontal location of the mouse pointer on the map when the drag action is performed. |
| y | It represents the vertical location of the mouse pointer on the map when the drag action is performed. |
The following example shows how to use marker drag events to customize the data of the drag and dropped marker in the marker data source.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject, MarkersDirective, MarkerDirective, Marker, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
var mapInstance;
function onMarkerDragStart(args) {
// When the marker begins to move on the map, the event is triggered.
};
function onMarkerDragEnd(args) {
// When the marker on the map stops dragging, the event is triggered.
mapInstance.layers[args.layerIndex].markerSettings[args.markerIndex].dataSource[args.dataIndex].name = 'Dragged Marker ' + (args.dataIndex + 1);
mapInstance.refresh();
};
return(<div><MapsComponent ref={m => mapInstance = m} markerDragStart={onMarkerDragStart.bind(this)} markerDragEnd={onMarkerDragEnd.bind(this)} legendSettings={{
visible: true,
type: 'Markers',
shape: 'Circle',
shapeWidth: 10,
shapeHeight: 10,
fill: '#FF471A',
shapeBorder: { width: 2, color: '#285255' },
}}>
<Inject services={[MapsTooltip, Marker, Legend]} />
<LayersDirective>
<LayerDirective
shapeData={world_map}
shapeSettings={{
fill: '#C3E6ED',
}}
>
<MarkersDirective>
<MarkerDirective
enableDrag={true}
legendText="name"
visible={true}
animationDuration={0}
dataSource={[
{
latitude: 49.95121990866204,
longitude: 18.468749999999998,
name: 'MarkerOne',
},
{
latitude: 59.88893689676585,
longitude: -109.3359375,
name: 'MarkerTwo',
},
{
latitude: -6.64607562172573,
longitude: -55.54687499999999,
name: 'MarkerThree',
},
{
latitude: 23.644385824912135,
longitude: 77.83189239539234,
name: 'MarkerFour',
},
{
latitude: 63.66569332894224,
longitude: 98.2225173953924,
name: 'MarkerFive',
},
]}
shape="Balloon"
width={20}
height={20}
border={{ width: 2, color: '#285255' }}
tooltipSettings={{
visible: true,
valuePath: 'name',
}}
></MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>);
}
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,
MapsTooltip,
Inject,
Legend,
MarkersDirective,
MarkerDirective,
IMarkerDragEvents,
Marker
} from '@syncfusion/ej2-react-maps';
export function App() {
let mapInstance: MapsComponent;
function onMarkerDragStart(args: IMarkerDragEvents): void {
// When the marker begins to move on the map, the event is triggered.
}
function onMarkerDragEnd(args: IMarkerDragEvents) : void {
// When the marker on the map stops dragging, the event is triggered.
mapInstance.layers[args.layerIndex].markerSettings[
args.markerIndex
].dataSource[args.dataIndex].name =
'Dragged Marker ' + (args.dataIndex + 1);
mapInstance.refresh();
}
return (
<div><MapsComponent ref={m => mapInstance = m} markerDragStart={onMarkerDragStart.bind(this)} markerDragEnd={onMarkerDragEnd.bind(this)} legendSettings={{
visible: true,
type: 'Markers',
shape: 'Circle',
shapeWidth: 10,
shapeHeight: 10,
fill: '#FF471A',
shapeBorder: { width: 2, color: '#285255' },
}}>
<Inject services={[MapsTooltip, Marker, Legend]} />
<LayersDirective>
<LayerDirective
shapeData={world_map}
shapeSettings={{
fill: '#C3E6ED',
}}
>
<MarkersDirective>
<MarkerDirective
enableDrag={true}
legendText="name"
visible={true}
animationDuration={0}
dataSource={[
{
latitude: 49.95121990866204,
longitude: 18.468749999999998,
name: 'MarkerOne',
},
{
latitude: 59.88893689676585,
longitude: -109.3359375,
name: 'MarkerTwo',
},
{
latitude: -6.64607562172573,
longitude: -55.54687499999999,
name: 'MarkerThree',
},
{
latitude: 23.644385824912135,
longitude: 77.83189239539234,
name: 'MarkerFour',
},
{
latitude: 63.66569332894224,
longitude: 98.2225173953924,
name: 'MarkerFive',
},
]}
shape="Balloon"
width={20}
height={20}
border={{ width: 2, color: '#285255' }}
tooltipSettings={{
visible: true,
valuePath: 'name',
}}
></MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent></div>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Marker zooming
The Maps can be initially scaled to the center value based on the marker distance. This can be achieved by setting the shouldZoomInitially property in zoomSettings as true.
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, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{enable: true, toolbarSettings: { horizontalAlignment:'Near' }, shouldZoomInitially: true}}>
<Inject services={[Marker, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
shape= {'Circle'}
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America' },
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
]}
>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{enable: true, toolbarSettings: { horizontalAlignment:'Near' }, shouldZoomInitially: true}}>
<Inject services={[Marker, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
shape= {'Circle'}
dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America' },
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
]}
>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Marker clustering
Maps provide support to cluster the markers when they overlap each other. The number on a cluster indicates how many overlapped markers it contains. If zooming is performed on any of the cluster locations in Maps, the number on the cluster will decrease, and the individual markers will be seen on the map. When zooming out, the overlapping marker will increase. So that it can cluster again and increase the count over the cluster.
To enable clustering in markers, set the allowClustering property of markerClusterSettings as true and customization of clustering can be done with the markerClusterSettings.
import { world_map } from 'world-map.ts';
import { cluster } from 'marker-cluster.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject, MapsTooltip, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent useGroupingSeparator={true} format='n' zoomSettings={{ enable: true }} titleSettings={{ text: 'Top 13 largest cities in the World', textStyle: { size: '16px' } }}>
<Inject services={[Marker, MapsTooltip, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeSettings={{ fill: '#C1DFF5' }} markerClusterSettings={{ allowClustering: true, shape: 'Circle', height: 30, width: 30, labelStyle: { color: 'white' }, }}>
<MarkersDirective>
<MarkerDirective visible={true} dataSource={cluster} shape='Balloon' tooltipSettings={{ visible: true, valuePath: 'area', }} height={15} width={15} animationDuration={0}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { cluster } from 'marker-cluster.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Marker, Inject, MapsTooltip, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent useGroupingSeparator={true} format='n' zoomSettings={{ enable: true }} titleSettings={{ text: 'Top 13 largest cities in the World', textStyle: { size: '16px' } }}>
<Inject services={[Marker, MapsTooltip, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeSettings={{ fill: '#C1DFF5' }} markerClusterSettings={{ allowClustering: true, shape: 'Circle', height: 30, width: 30, labelStyle: { color: 'white' }, }}>
<MarkersDirective>
<MarkerDirective visible={true} dataSource={cluster} shape='Balloon' tooltipSettings={{ visible: true, valuePath: 'area', }} height={15} width={15} animationDuration={0}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customization of marker cluster
The following properties are available to customize the marker clustering in the Maps component.
-
border- To customize the color, width and opacity of the border of cluster in Maps. -
connectorLineSettings- To customize the connector line in cluster separating the markers. -
dashArray- To customize the dash array for the marker cluster in Maps. -
fill- Applies the color of the cluster in Maps. -
height- To customize the height of the marker cluster in Maps. -
imageUrl- To customize the URL path for the marker cluster when the cluster shape is set as image in Maps. -
labelStyle- To customize the text in marker cluster. -
offset- To customize the offset position for the marker cluster in Maps. -
opacity- To customize the opacity of the marker cluster. -
shape- To customize the shape for the cluster of markers. -
width- To customize the width of the marker cluster in Maps.
import { world_map } from 'world-map.ts';
import { cluster } from 'marker-cluster.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, Point, MarkerDirective, Marker, Inject, MapsTooltip, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent useGroupingSeparator={true} format='n' zoomSettings={{ enable: true }} titleSettings={{ text: 'Top 13 largest cities in the World', textStyle: { size: '16px' } }}>
<Inject services={[Marker, MapsTooltip, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeSettings={{ fill: '#C1DFF5' }} markerClusterSettings={{
allowClustering: true,
allowClusterExpand: true,
shape: 'Circle',
height: 40,
width: 40,
labelStyle : { color: 'white'},
offset: new Point(10, 20),
opacity: 0.9,
fill: 'green',
connectorLineSettings: {
color: 'orange',
opacity: 0.8,
width: 2
}
}}>
<MarkersDirective>
<MarkerDirective visible={true} dataSource={cluster} shape='Balloon' tooltipSettings={{ visible: true, valuePath: 'area', }} height={15} width={15} animationDuration={0}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { cluster } from 'marker-cluster.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, Point, MarkerDirective, Marker, Inject, MapsTooltip, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent useGroupingSeparator={true} format='n' zoomSettings={{ enable: true }} titleSettings={{ text: 'Top 13 largest cities in the World', textStyle: { size: '16px' } }}>
<Inject services={[Marker, MapsTooltip, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeSettings={{ fill: '#C1DFF5' }} markerClusterSettings={{
allowClustering: true,
allowClusterExpand: true,
shape: 'Circle',
height: 40,
width: 40,
labelStyle : { color: 'white'},
offset: new Point(10, 20),
opacity: 0.9,
fill: 'green',
connectorLineSettings: {
color: 'orange',
opacity: 0.8,
width: 2
}
}}>
<MarkersDirective>
<MarkerDirective visible={true} dataSource={cluster} shape='Balloon' tooltipSettings={{ visible: true, valuePath: 'area', }} height={15} width={15} animationDuration={0}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Expanding the marker cluster
The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting the allowClusterExpand property in markerClusterSettings as true to expand the identical markers. If zoom in any of the locations of the cluster, the number on the cluster will decrease and the overlapping marker will be split into an individual marker on the map. When performing zoom out, it will increase the marker count and then cluster it again.
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, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{enable: true, mouseWheelZoom : true }}>
<Inject services={[Marker, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map} markerClusterSettings={{ allowClustering: true, allowClusterExpand: true,shape: 'Circle', height: 40, width: 40, labelStyle: { color: 'white' }, }}>
<MarkersDirective>
<MarkerDirective visible={true} dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America' },
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
]} animationDuration={0}>
</MarkerDirective>
</MarkersDirective>
</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, MarkersDirective, MarkerDirective, Marker, Inject, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{enable: true, mouseWheelZoom : true }}>
<Inject services={[Marker, Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map} markerClusterSettings={{ allowClustering: true, allowClusterExpand: true,shape: 'Circle', height: 40, width: 40, labelStyle: { color: 'white' }, }}>
<MarkersDirective>
<MarkerDirective visible={true} dataSource={[
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 49.95121990866204, longitude: 18.468749999999998, name:'Europe' },
{ latitude: 59.88893689676585, longitude: -109.3359375, name:'North America' },
{ latitude: -6.64607562172573, longitude: -55.54687499999999, name:'South America'}
]} animationDuration={0}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Tooltip for marker
Tooltip is used to display more information about a marker on mouse over or touch end event. This can be enabled separately for marker by setting the visible property of tooltipSettings to true. The valuePath property in the tooltipSettings takes the field name that presents in dataSource and displays that value as tooltip text.
import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, MapsTooltip, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={usa_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
tooltipSettings={{
visible: true,
valuePath:'city'
}}
dataSource={[
{ latitude: 40.7424509, longitude: -74.0081468, city: 'New York' }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { usa_map } from 'usa.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, MapsTooltip, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={usa_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
tooltipSettings={{
visible: true,
valuePath:'city'
}}
dataSource={[
{ latitude: 40.7424509, longitude: -74.0081468, city: 'New York' }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);