User interactions in React Maps component
12 Jun 202424 minutes to read
Zooming
The zooming feature is used to zoom in and out of Maps to show in-depth information. It is controlled by the zoomFactor property of the zoomSettings of the Maps. The Map is zoomed in when the zoomFactor is increased. The zoomFactor is increased or decrease dynamically based on zoom in and out interaction.
Enable zooming
Zooming of Maps is enabled by setting the enable property of zoomSettings to true.
Enable panning
To enable the panning feature, set the enablePanning property of zoomSettings to true.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, enablePanning: true } }>
<Inject services={[Zoom]}/>
<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, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, enablePanning: true } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Various type of zooming
Zooming can be performed in following types:
Zooming toolbar
By default, the toolbar is rendered with zoom-in, zoom-out, and reset options when it is set to true in the enable property of zoomSettings.
The following options are available in toolbar.
- Zoom - Provides rectangular zoom support.
- ZoomIn - Zooms in the Maps.
- ZoomOut - Zooms out the Maps.
- Pan - Switches to panning if rectangular zoom is activated.
- Reset - Restores the Maps to the default view.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ {
enable: true,
toolbarSettings: {
horizontalAlignment: 'Center',
buttonSettings: {
color: 'green',
highlightColor: 'blue',
selectionColor: 'orange',
toolbarItems: [ 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}} }>
<Inject services={[Zoom]}/>
<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, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ {
enable: true,
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
} }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Pinch zooming
To enable or disable the pinch zooming, use the pinchZooming property in zoomSettings.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, pinchZooming: true } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Single-click zooming
To enable or disable the single-click zooming, use the zoomOnClick property in zoomSettings.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, zoomOnClick: true } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Double-click zooming
To enable or disable the double-click zooming, use the doubleClickZoom property in zoomSettings.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, doubleClickZoom: true } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Mouse wheel zooming
To enable or disable mouse wheel zooming, use the mouseWheelZoom property in zoomSettings.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, mouseWheelZoom: true } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Selection zooming
To enable or disable selection zooming, use the enableSelectionZooming property in zoomSettings. The enablePanning property must be set to false to enable the selection zooming in Maps.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, enableSelectionZooming: true,
enablePanning: false } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Setting minimum and maximum values for zoom factor
The zooming range can be adjusted using the minZoom and maxZoom properties in zoomSettings. The minZoom value is set to 1 by default, and the maxZoom value is set to 10.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true, minZoom: 2,
maxZoom: 12 } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Zooming with animation
To zoom in or zoom out the Maps with animation, use the animationDuration property in layers.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Zoom, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings={ { enable: true } }>
<Inject services={[Zoom]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} animationDuration={500}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customizing the zoom toolbar
The zoom toolbar can be customized by using the toolbarSettings option in the zoomSettings. The following properties can be used to customize the zoom toolbar.
- backgroundColor - It is used to customize the background color of the zoom toolbar.
- borderOpacity - It is used to customize the opacity of the border of the zoom toolbar.
- borderWidth - It is used to customize the thickness of the border of the zoom toolbar.
- borderColor - It is used to customize the color of the border of the zoom toolbar.
- horizontalAlignment - It is used to position the zoom toolbar in near, far, and center positions to customize its horizontal placement.
- verticalAlignment - It is used to position the zoom toolbar in near, far, and center positions to customize its vertical placement.
- orientation - It is used to change the orientation (horizontal/vertical) of the zoom toolbar.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{
enable: true,
toolbarSettings:{
orientation:'Vertical',
backgroundColor:'pink',
borderWidth:3,
borderColor:'green',
verticalAlignment:'Near',
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}
}}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings= {{
fill: '#C1DFF5'
}}>
</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, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{
enable: true,
toolbarSettings:{
orientation:'Vertical',
backgroundColor:'pink',
borderWidth:3,
borderColor:'green',
verticalAlignment:'Near',
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}
}}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings= {{
fill: '#C1DFF5'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customizing the buttons in the zoom toolbar
The appearance of the buttons in the zoom toolbar can be customized by using the buttonSettings option in the toolbarSettings of the zoomSettings property. The following properties can be used to customize the zoom toolbar buttons.
- fill - It is used to set the background color of the buttons.
- color - It is used to customize the color of the icons inside the button.
- borderOpacity - It is used to set the opacity of the border of the zoom toolbar buttons.
- borderWidth - It is used to set the thickness of the border of the zoom toolbar buttons.
- borderColor - It is used to set the color of the border of the zoom toolbar buttons.
- radius - It is used to set the size of the button.
- selectionColor - It is used to set the color of the icons inside the button when selection is performed.
- highlightColor - It is used to change the color of the button when the mouse is hovered over it.
- padding - It is used to change the padding space between each button.
- opacity - It is used to change the opacity of the button.
- toolbarItems - It is used to change the items that should be displayed in the zoom toolbar. By default, zoom-in, zoom-out, and reset buttons will be available. Other options include selection zoom and panning.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{
enable: true,
toolbarSettings:{
buttonSettings: {
fill:'pink',
padding: 10,
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'],
color: 'red',
borderColor:'green',
radius:35,
selectionColor:'#d55e5e',
hightlightColor:'#5ed59a',
opacity:0.6,
borderWidth: 2
}
}
}}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings= {{
fill: '#C1DFF5'
}}>
</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, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{
enable: true,
toolbarSettings:{
buttonSettings: {
fill:'pink',
padding: 10,
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'],
color: 'red',
borderColor:'green',
radius:35,
selectionColor:'#d55e5e',
hightlightColor:'#5ed59a',
opacity:0.6,
borderWidth: 2
}
}
}}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings= {{
fill: '#C1DFF5'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customizing the tooltip of the zoom toolbar
The appearance of the tooltip of the zoom toolbar can be customized by using the tooltipSettings option in the toolbarSettings of the zoomSettings property. The following properties are available to customize the zoom toolbar tooltip.
- visible - Enables or disables the tooltip of the zoom toolbar.
- fill - It is used to change the background color of the tooltip of the zoom toolbar.
- borderOpacity - It is used to change the opacity of the border of the zoom toolbar’s tooltip.
- borderWidth - It is used to change the thickness of the border of the zoom toolbar’s tooltip.
- borderColor - It is used to change the color of the border of the zoom toolbar’s tooltip.
- fontColor - It is used to change the color of the text in the tooltip of the zoom toolbar.
- fontFamily - It is used to change the font family of the text in the tooltip of the zoom toolbar.
- fontStyle - It is used to change the font style of the text in the tooltip of the zoom toolbar.
- fontWeight - It is used to change the font weight of the text in the tooltip of the zoom toolbar.
- fontSize - It is used to change the size of the text in the tooltip of the zoom toolbar.
- fontOpacity - It is used to change the opacity of the text in the tooltip of the zoom toolbar.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{
enable: true,
toolbarSettings:{
tooltipSettings:{
visible:true,
borderWidth:2,
borderColor:'green',
fontColor:'black',
fill:'violet',
fontFamily:'Times New Roman',
fontWeight:200,
fontSize:'22px',
fontOpacity:1
},
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}
}}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings= {{
fill: '#C1DFF5'
}}>
</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, Zoom } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent zoomSettings= {{
enable: true,
toolbarSettings:{
tooltipSettings:{
visible:true,
borderWidth:2,
borderColor:'green',
fontColor:'black',
fill:'violet',
fontFamily:'Times New Roman',
fontWeight:200,
fontSize:'22px',
fontOpacity:1
},
buttonSettings: {
toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
}
}
}}>
<Inject services={[Zoom]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings= {{
fill: '#C1DFF5'
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Selection
Each shape in the Maps can be selected and deselected during interaction with the shapes. Selection is enabled by setting the enable property of selectionSettings to true.
The following properties are available to customize the selection of Maps elements such as shapes, bubbles, markers and legends.
-
border- To customize the color, width and opacity of the border of which element is selected in Maps. -
fill- Applies the color for the element that is selected. -
opacity- To customize the transparency for the element that is selected. -
enableMultiSelect- To enable or disable the selection for multiple shapes or markers or bubbles in the Maps.
By tapping on the specific legend, the shapes which are bounded to the selected legend is also selected and vice versa.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Selection, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={{visible: true}}>
<Inject services={[Selection, Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} selectionSettings={ {
enable: true,
fill: 'blue',
border: { color: 'white', width: 2 }
} } dataSource={[
{"Country": "China", "Membership": "Permanent"},
{"Country": "France","Membership": "Permanent" },
{ "Country": "Russia","Membership": "Permanent"},
{"Country": "Kazakhstan","Membership": "Non-Permanent"},
{ "Country": "Poland","Membership": "Non-Permanent"},
{"Country": "Sweden","Membership": "Non-Permanent"}
]} shapePropertyPath="name" shapeDataPath="Country"
shapeSettings={{
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}]
}}>
</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, Selection, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={{visible: true}}>
<Inject services={[Selection, Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} selectionSettings={ {
enable: true,
fill: 'blue',
border: { color: 'white', width: 2 }
} } dataSource={[
{"Country": "China", "Membership": "Permanent"},
{"Country": "France","Membership": "Permanent" },
{ "Country": "Russia","Membership": "Permanent"},
{"Country": "Kazakhstan","Membership": "Non-Permanent"},
{ "Country": "Poland","Membership": "Non-Permanent"},
{"Country": "Sweden","Membership": "Non-Permanent"}
]} shapePropertyPath="name" shapeDataPath="Country"
shapeSettings={{
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}]
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable selection for bubbles
To enable the selection for bubbles in Maps, set the selectionSettings in bubbleSettings and set the enable property of selectionSettings as true.
To use the bubble feature, the Bubble module must be injected.
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 { BubblesDirective, BubbleDirective, Bubble, Selection } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Bubble, Selection]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true} valuePath="population"
dataSource={[
{ name: 'India', population: '38332521' },
{ name: 'Pakistan', population: '3090416' },
{ name: 'New Zealand', population: '19651127' }
]}
selectionSettings={{
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
}} />
</BubblesDirective>
</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 { BubblesDirective, BubbleDirective, Bubble, Selection } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Bubble, Selection]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true} valuePath="population"
dataSource={[
{ name: 'India', population: '38332521' },
{ name: 'Pakistan', population: '3090416' },
{ name: 'New Zealand', population: '19651127' }
]}
selectionSettings={{
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
}} />
</BubblesDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable selection for markers
To enable the selection for markers in Maps, set the selectionSettings in the markerSettings and set the enable property of the selectionSettings as true.
To use the marker feature, the Marker module must be injected.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Selection, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
fill="green"
shape="Balloon"
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'}
]}
selectionSettings={{
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
}}>
</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, Selection, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
fill="green"
shape="Balloon"
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'}
]}
selectionSettings={{
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
}}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable selection for polygons
When the enable property of selectionSettings is set to true, the polygon shapes can be selected via user interaction. The following properties are available in selectionSettings to customize the polygon shape when it is selected.
- enableMultiSelect - It is used to enable multiple selection of polygon shapes.
- fill - It is used to change the color of the selected polygon shape.
- opacity - It is used to change the opacity of the selected polygon shape.
- border - This property is used to change the color, width, and opacity of the border of the selected polygon shape.
To use the polygon feature, the Polygon module must be injected, as described in this link.
The following example shows how to select the polygon shape in the geometry map.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Polygon, Highlight, Selection } from '@syncfusion/ej2-react-maps';
export function App() {
var polygonSettings = {
polygons: [
{
points: [
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 },
{ longitude: -1.6479633699113947, latitude: 33.58989612266137 },
{ longitude: -1.4201220366858252, latitude: 32.819439646045254 },
{ longitude: -1.197974596225663, latitude: 32.26940895444655 },
{ longitude: -2.891112397949655, latitude: 32.10303058820031 },
{ longitude: -3.8246984550501963, latitude: 31.34551662687602 },
{ longitude: -3.720166273688733, latitude: 30.758086682848685 },
{ longitude: -5.6571886081189575, latitude: 29.613582597203006 },
{ longitude: -7.423353242214745, latitude: 29.44328441403087 },
{ longitude: -8.6048931685323, latitude: 28.761444633616776 },
{ longitude: -8.695726975465703, latitude: 27.353491085576195 },
{ longitude: 3.837867279970908, latitude: 19.15916564839422 },
{ longitude: 6.0705408799045415, latitude: 19.48749097192868 },
{ longitude: 12.055736352807713, latitude: 23.694596786078293 },
{ longitude: 11.272522332402986, latitude: 24.289329186946034 },
{ longitude: 10.30872578261932, latitude: 24.65419958524693 },
{ longitude: 9.910236690050027, latitude: 25.48943950947175 },
{ longitude: 9.432639882414293, latitude: 26.398372489836902 },
{ longitude: 9.898266456582292, latitude: 26.73489453809293 },
{ longitude: 9.560243026853641, latitude: 30.31040379467153 },
{ longitude: 8.943853847283322, latitude: 32.350324876652195 },
{ longitude: 7.57004059025715, latitude: 33.75071049019398 },
{ longitude: 8.0906322609153, latitude: 34.69043151009983 },
{ longitude: 8.363285449347273, latitude: 35.38654406371319 },
{ longitude: 8.26139549449448, latitude: 36.44751078733985 },
{ longitude: 8.61100824823302, latitude: 36.881913362940196 },
{ longitude: 7.4216488925819135, latitude: 37.021408008916254 },
{ longitude: 6.461182254165351, latitude: 36.99092409199429 },
{ longitude: 5.297178918070159, latitude: 36.69985479014656 },
{ longitude: 3.6718056161224695, latitude: 36.86470546831693 },
{ longitude: 1.2050052555659931, latitude: 36.57658056301722 },
{ longitude: -0.26968570003779746, latitude: 35.806903541813625 },
{ longitude: -0.995191786435754, latitude: 35.58466127904214 },
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 }
],
fill: 'blue',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
],
highlightSettings: {
enable: true,
fill: 'blue',
opacity: 0.7,
border: {
color: 'green',
width: 2,
opacity: 0.7
}
},
selectionSettings: {
enable: true,
fill: 'violet',
enableMultiSelect: false,
opacity: 0.8,
border: {
color: 'cyan',
opacity: 1,
width: 7
}
}
};
return (
<MapsComponent >
<Inject services={[Polygon, Highlight, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map} polygonSettings={polygonSettings}
>
</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, Polygon, Highlight, Selection } from '@syncfusion/ej2-react-maps';
export function App() {
let polygonSettings : object = {
polygons: [
{
points: [
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 },
{ longitude: -1.6479633699113947, latitude: 33.58989612266137 },
{ longitude: -1.4201220366858252, latitude: 32.819439646045254 },
{ longitude: -1.197974596225663, latitude: 32.26940895444655 },
{ longitude: -2.891112397949655, latitude: 32.10303058820031 },
{ longitude: -3.8246984550501963, latitude: 31.34551662687602 },
{ longitude: -3.720166273688733, latitude: 30.758086682848685 },
{ longitude: -5.6571886081189575, latitude: 29.613582597203006 },
{ longitude: -7.423353242214745, latitude: 29.44328441403087 },
{ longitude: -8.6048931685323, latitude: 28.761444633616776 },
{ longitude: -8.695726975465703, latitude: 27.353491085576195 },
{ longitude: 3.837867279970908, latitude: 19.15916564839422 },
{ longitude: 6.0705408799045415, latitude: 19.48749097192868 },
{ longitude: 12.055736352807713, latitude: 23.694596786078293 },
{ longitude: 11.272522332402986, latitude: 24.289329186946034 },
{ longitude: 10.30872578261932, latitude: 24.65419958524693 },
{ longitude: 9.910236690050027, latitude: 25.48943950947175 },
{ longitude: 9.432639882414293, latitude: 26.398372489836902 },
{ longitude: 9.898266456582292, latitude: 26.73489453809293 },
{ longitude: 9.560243026853641, latitude: 30.31040379467153 },
{ longitude: 8.943853847283322, latitude: 32.350324876652195 },
{ longitude: 7.57004059025715, latitude: 33.75071049019398 },
{ longitude: 8.0906322609153, latitude: 34.69043151009983 },
{ longitude: 8.363285449347273, latitude: 35.38654406371319 },
{ longitude: 8.26139549449448, latitude: 36.44751078733985 },
{ longitude: 8.61100824823302, latitude: 36.881913362940196 },
{ longitude: 7.4216488925819135, latitude: 37.021408008916254 },
{ longitude: 6.461182254165351, latitude: 36.99092409199429 },
{ longitude: 5.297178918070159, latitude: 36.69985479014656 },
{ longitude: 3.6718056161224695, latitude: 36.86470546831693 },
{ longitude: 1.2050052555659931, latitude: 36.57658056301722 },
{ longitude: -0.26968570003779746, latitude: 35.806903541813625 },
{ longitude: -0.995191786435754, latitude: 35.58466127904214 },
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 }
],
fill: 'blue',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
],
highlightSettings: {
enable: true,
fill: 'blue',
opacity: 0.7,
border: {
color: 'green',
width: 2,
opacity: 0.7
}
},
selectionSettings: {
enable: true,
fill: 'violet',
enableMultiSelect: false,
opacity: 0.8,
border: {
color: 'cyan',
opacity: 1,
width: 7
}
}
};
return (
<MapsComponent >
<Inject services={[Polygon, Highlight, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
polygonSettings={polygonSettings}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Public method for the shape selection
The shapeSelection method can be used to select each shape in the Maps.
LayerIndex, propertyName, country name, and selected value as a boolean state(true / false) are the input parameters for this method.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Selection, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
var mapsInstance;
function selectclickHandler() {
mapsInstance.shapeSelection(0, "continent", "Asia", true);
}
function unselectclickHandler() {
mapsInstance.shapeSelection(0, "continent", "Asia", false);
}
return (<div>
<MapsComponent ref={maps => mapsInstance = maps}>
<Inject services={[Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map} selectionSettings={ {
enable: true,
fill: 'green',
border: { color: 'white', width: 2 }
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
<button value='select' onClick={selectclickHandler}>select</button>
<button value='unselect' onClick={unselectclickHandler}>unselect</button></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, Selection, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
let mapsInstance: MapsComponent;
function selectclickHandler() {
mapsInstance.shapeSelection(0, "continent", "Asia", true);
}
function unselectclickHandler() {
mapsInstance.shapeSelection(0, "continent", "Asia", false);
}
return (<div>
<MapsComponent ref={maps => mapsInstance = maps}>
<Inject services={[Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map} selectionSettings={ {
enable: true,
fill: 'green',
border: { color: 'white', width: 2 }
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
<button value='select' onClick={selectclickHandler}>select</button>
<button value='unselect' onClick={unselectclickHandler}>unselect</button></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Initial shape selection
The shape is initially selected using the initialShapeSelection, and the values are mapped to the shapePath and shapeValue.
initialShapeSelection is an Array property.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, InitialShapeSelectionsDirective, InitialShapeSelectionDirective, LayerDirective, Selection, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map} selectionSettings={{
enable: true,
fill: 'green',
border: { color: 'white', width: 2 }
}}>
<InitialShapeSelectionsDirective>
<InitialShapeSelectionDirective shapePath={'continent'} shapeValue={'Africa'}>
</InitialShapeSelectionDirective>
<InitialShapeSelectionDirective shapePath={'name'} shapeValue={'India'}>
</InitialShapeSelectionDirective>
</InitialShapeSelectionsDirective>
</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, InitialShapeSelectionsDirective, InitialShapeSelectionDirective, LayerDirective, Selection, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map} selectionSettings={{
enable: true,
fill: 'green',
border: { color: 'white', width: 2 }
}}>
<InitialShapeSelectionsDirective>
<InitialShapeSelectionDirective shapePath={'continent'} shapeValue={'Africa'}>
</InitialShapeSelectionDirective>
<InitialShapeSelectionDirective shapePath={'name'} shapeValue={'India'}>
</InitialShapeSelectionDirective>
</InitialShapeSelectionsDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Initial marker selection
Using the initialMarkerSelection, the marker shape can be selected initially. Markers render based on the latitude and longitude values.
initialMarkerSelection is an Array 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, Selection, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
fill="green"
shape="Balloon"
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'}
]}
initialMarkerSelection={{
latitude: -6.64607562172573, longitude: -55.54687499999999
}}
selectionSettings={{
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
}}>
</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, Selection, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
fill="green"
shape="Balloon"
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'}
]}
initialMarkerSelection={{
latitude: -6.64607562172573, longitude: -55.54687499999999
}}
selectionSettings={{
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
}}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Highlight
Each shape in the Maps can be highlighted during mouse hover on the Maps elements such as shapes, bubbles, markers and legends. Highlight is enabled by setting the enable property of highlightSettings to true.
The following properties are available to customize the highlight of Maps elements such as shapes, bubbles, markers and legends.
-
border- To customize the color, width and opacity of the border of which element is highlighted in Maps. -
fill- Applies the color for the element that is highlighted. -
opacity- To customize the transparency for the element that is highlighted.
Hovering on the specific legend, the shapes which are bounded to the selected legend is also highlighted and vice versa.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Highlight, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={{visible: true}}>
<Inject services={[Highlight, Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} highlightSettings={ {
enable: true,
fill: 'green',
border: { color: 'white', width: 2 }
} }
dataSource={[
{ "Country": "China", "Membership": "Permanent"},
{ "Country": "France", "Membership": "Permanent" },
{ "Country": "Russia", "Membership": "Permanent"},
{ "Country": "Kazakhstan", "Membership": "Non-Permanent"},
{ "Country": "Poland", "Membership": "Non-Permanent"},
{ "Country": "Sweden", "Membership": "Non-Permanent"}
]} shapePropertyPath="name" shapeDataPath="Country"
shapeSettings={{
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}]
}}>
</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, Highlight, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={{visible: true}}>
<Inject services={[Highlight, Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} highlightSettings={ {
enable: true,
fill: 'green',
border: { color: 'white', width: 2 }
} }
dataSource={[
{ "Country": "China", "Membership": "Permanent"},
{ "Country": "France", "Membership": "Permanent" },
{ "Country": "Russia", "Membership": "Permanent"},
{ "Country": "Kazakhstan", "Membership": "Non-Permanent"},
{ "Country": "Poland", "Membership": "Non-Permanent"},
{ "Country": "Sweden", "Membership": "Non-Permanent"}
]} shapePropertyPath="name" shapeDataPath="Country"
shapeSettings={{
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}]
}}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable highlight for bubbles
To enable the highlight for bubbles in Maps, set the highlightSettings in bubbleSettings and set the enable property of highlightSettings as true.
To use the bubble feature, the Bubble module must be injected.
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 { BubblesDirective, BubbleDirective, Bubble, Highlight } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Bubble, Highlight]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true} valuePath="population"
dataSource={[
{ name: 'India', population: '38332521' },
{ name: 'Pakistan', population: '3090416' },
{ name: 'New Zealand', population: '19651127' }
]}
highlightSettings={{
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
}} />
</BubblesDirective>
</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 { BubblesDirective, BubbleDirective, Bubble, Highlight } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Bubble, Highlight]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true} valuePath="population"
dataSource={[
{ name: 'India', population: '38332521' },
{ name: 'Pakistan', population: '3090416' },
{ name: 'New Zealand', population: '19651127' }
]}
highlightSettings={{
enable: true,
fill: 'green',
border: { color: 'white', width: 2}
}} />
</BubblesDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable highlight for markers
To enable the highlight for markers in Maps, set the highlightSettings in markerSettings and set the enable property of highlightSettings as true.
To use the marker feature, the Marker module must be injected.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, MarkerDirective, Highlight , Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, Highlight]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
fill="green"
shape="Balloon"
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'}
]}
highlightSettings={{
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
}}>
</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, Highlight , Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Marker, Highlight]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective visible={true}
height={20}
width={20}
animationDuration={0}
fill="green"
shape="Balloon"
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'}
]}
highlightSettings={{
enable: true,
fill: 'blue',
border: { color: 'white', width: 2}
}}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable highlight for polygons
The polygon shapes can be highlighted via user interaction if the enable property of highlightSettings is set to true. The following properties are available in highlightSettings to customize the polygon shape when it is highlighted.
- fill - It is used to change the color of the highlighted polygon shape.
- opacity - It is used to change the opacity of the highlighted polygon shape.
- border - This property is used to change the color, width, and opacity of the border of the highlighted polygon shape.
To use the polygon feature, the Polygon module must be injected, as described in this link.
The following example shows how to highlight a polygon shape on a geometry map.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Polygon, Highlight, Selection } from '@syncfusion/ej2-react-maps';
export function App() {
var polygonSettings = {
polygons: [
{
points: [
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 },
{ longitude: -1.6479633699113947, latitude: 33.58989612266137 },
{ longitude: -1.4201220366858252, latitude: 32.819439646045254 },
{ longitude: -1.197974596225663, latitude: 32.26940895444655 },
{ longitude: -2.891112397949655, latitude: 32.10303058820031 },
{ longitude: -3.8246984550501963, latitude: 31.34551662687602 },
{ longitude: -3.720166273688733, latitude: 30.758086682848685 },
{ longitude: -5.6571886081189575, latitude: 29.613582597203006 },
{ longitude: -7.423353242214745, latitude: 29.44328441403087 },
{ longitude: -8.6048931685323, latitude: 28.761444633616776 },
{ longitude: -8.695726975465703, latitude: 27.353491085576195 },
{ longitude: 3.837867279970908, latitude: 19.15916564839422 },
{ longitude: 6.0705408799045415, latitude: 19.48749097192868 },
{ longitude: 12.055736352807713, latitude: 23.694596786078293 },
{ longitude: 11.272522332402986, latitude: 24.289329186946034 },
{ longitude: 10.30872578261932, latitude: 24.65419958524693 },
{ longitude: 9.910236690050027, latitude: 25.48943950947175 },
{ longitude: 9.432639882414293, latitude: 26.398372489836902 },
{ longitude: 9.898266456582292, latitude: 26.73489453809293 },
{ longitude: 9.560243026853641, latitude: 30.31040379467153 },
{ longitude: 8.943853847283322, latitude: 32.350324876652195 },
{ longitude: 7.57004059025715, latitude: 33.75071049019398 },
{ longitude: 8.0906322609153, latitude: 34.69043151009983 },
{ longitude: 8.363285449347273, latitude: 35.38654406371319 },
{ longitude: 8.26139549449448, latitude: 36.44751078733985 },
{ longitude: 8.61100824823302, latitude: 36.881913362940196 },
{ longitude: 7.4216488925819135, latitude: 37.021408008916254 },
{ longitude: 6.461182254165351, latitude: 36.99092409199429 },
{ longitude: 5.297178918070159, latitude: 36.69985479014656 },
{ longitude: 3.6718056161224695, latitude: 36.86470546831693 },
{ longitude: 1.2050052555659931, latitude: 36.57658056301722 },
{ longitude: -0.26968570003779746, latitude: 35.806903541813625 },
{ longitude: -0.995191786435754, latitude: 35.58466127904214 },
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 }
],
fill: 'red',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
],
highlightSettings: {
enable: true,
fill: 'yellow',
opacity: 0.4,
border: {
color: 'blue',
opacity: 0.6,
width: 4
}
},
selectionSettings: {
enable: true,
fill: 'red',
opacity: 0.7,
border: {
color: 'green',
width: 2,
opacity: 0.7
}
}
};
return (
<MapsComponent >
<Inject services={[Polygon, Highlight, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map} polygonSettings={polygonSettings}
>
</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, Polygon, Highlight, Selection } from '@syncfusion/ej2-react-maps';
export function App() {
let polygonSettings: object = {
polygons: [
{
points: [
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 },
{ longitude: -1.6479633699113947, latitude: 33.58989612266137 },
{ longitude: -1.4201220366858252, latitude: 32.819439646045254 },
{ longitude: -1.197974596225663, latitude: 32.26940895444655 },
{ longitude: -2.891112397949655, latitude: 32.10303058820031 },
{ longitude: -3.8246984550501963, latitude: 31.34551662687602 },
{ longitude: -3.720166273688733, latitude: 30.758086682848685 },
{ longitude: -5.6571886081189575, latitude: 29.613582597203006 },
{ longitude: -7.423353242214745, latitude: 29.44328441403087 },
{ longitude: -8.6048931685323, latitude: 28.761444633616776 },
{ longitude: -8.695726975465703, latitude: 27.353491085576195 },
{ longitude: 3.837867279970908, latitude: 19.15916564839422 },
{ longitude: 6.0705408799045415, latitude: 19.48749097192868 },
{ longitude: 12.055736352807713, latitude: 23.694596786078293 },
{ longitude: 11.272522332402986, latitude: 24.289329186946034 },
{ longitude: 10.30872578261932, latitude: 24.65419958524693 },
{ longitude: 9.910236690050027, latitude: 25.48943950947175 },
{ longitude: 9.432639882414293, latitude: 26.398372489836902 },
{ longitude: 9.898266456582292, latitude: 26.73489453809293 },
{ longitude: 9.560243026853641, latitude: 30.31040379467153 },
{ longitude: 8.943853847283322, latitude: 32.350324876652195 },
{ longitude: 7.57004059025715, latitude: 33.75071049019398 },
{ longitude: 8.0906322609153, latitude: 34.69043151009983 },
{ longitude: 8.363285449347273, latitude: 35.38654406371319 },
{ longitude: 8.26139549449448, latitude: 36.44751078733985 },
{ longitude: 8.61100824823302, latitude: 36.881913362940196 },
{ longitude: 7.4216488925819135, latitude: 37.021408008916254 },
{ longitude: 6.461182254165351, latitude: 36.99092409199429 },
{ longitude: 5.297178918070159, latitude: 36.69985479014656 },
{ longitude: 3.6718056161224695, latitude: 36.86470546831693 },
{ longitude: 1.2050052555659931, latitude: 36.57658056301722 },
{ longitude: -0.26968570003779746, latitude: 35.806903541813625 },
{ longitude: -0.995191786435754, latitude: 35.58466127904214 },
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 }
],
fill: 'red',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
],
highlightSettings: {
enable: true,
fill: 'yellow',
opacity: 0.4,
border: {
color: 'blue',
opacity: 0.6,
width: 4
}
},
selectionSettings: {
enable: true,
fill: 'red',
opacity: 0.7,
border: {
color: 'green',
width: 2,
opacity: 0.7
}
}
};
return (
<MapsComponent >
<Inject services={[Polygon, Highlight, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map}
polygonSettings={polygonSettings}>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Tooltip
On mouse over or touch end event, the tooltip is used to get more information about the layer, bubble, or marker. To enable tooltip in Maps, the Tooltip module must be injected into Maps using Inject services={[Tooltip]} tag. It can be enabled separately for layer or bubble or marker by using the visible property of tooltipSettings as true. The valuePath property in the tooltip takes the field name that presents in data source and displays that value as tooltip text. The tooltipDisplayMode property is used to change the display mode of the tooltip in Maps. Following display modes of tooltip are available in the Maps component. By default, tooltipDisplayMode is set to MouseMove.
- MouseMove
- Click
- DoubleClick
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={world_map} tooltipSettings={ {
visible: true,
valuePath: 'name'
} }>
</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, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={world_map} tooltipSettings={ {
visible: true,
valuePath: 'name'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customization
The following properties are available in the tooltipSettings to customize the tooltip of the Maps component.
-
border- To customize the color, width and opacity of the border of the tooltip in layers, markers, and bubbles of Maps. -
fill- Applies the color of the tooltip in layers, markers, and bubbles of Maps. -
format- To customize the format of the tooltip in layers, markers, and bubbles of Maps -
textStyle- To customize the style of the text in the tooltip for layers, markers, and bubbles of Maps.
import { world_map } from 'world-map.ts';
import { default_data } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(<div><MapsComponent >
<Inject services={[MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} dataSource={default_data} shapeDataPath='continent'
shapePropertyPath='continent'
tooltipSettings={{
visible: true,
valuePath: 'continent',
format: '${continent}',
fill: '#D0D0D0',
textStyle: {
color: 'green',
fontFamily: 'Times New Roman',
fontStyle: 'Sans-serif'
}
}}/>
</LayersDirective>
</MapsComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { default_data } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(<div><MapsComponent >
<Inject services={[MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} dataSource={default_data} shapeDataPath='continent'
shapePropertyPath='continent'
tooltipSettings={{
visible: true,
valuePath: 'continent',
format: '${continent}',
fill: '#D0D0D0',
textStyle: {
color: 'green',
fontFamily: 'Times New Roman',
fontStyle: 'Sans-serif'
}
}}/>
</LayersDirective>
</MapsComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Tooltip template
The HTML element can be rendered in the tooltip of the Maps using the template property of the tooltipSettings.
import { world_map } from 'world-map.ts';
import { default_data } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(<div><MapsComponent >
<Inject services={[MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} dataSource={default_data} shapeDataPath='continent'
shapePropertyPath='continent'
tooltipSettings={{
visible: true,
valuePath: 'continent',
template: '<div style="width:60px; text-align:center; background-color: white; border: 2px solid black; padding-bottom: 10px;padding-top: 10px;padding-left: 10px;padding-right: 10px;"><span>${continent}</span></div>',
textStyle: {
color: 'black'
}
}}/>
</LayersDirective>
</MapsComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { default_data } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(<div><MapsComponent >
<Inject services={[MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} dataSource={default_data} shapeDataPath='continent'
shapePropertyPath='continent'
tooltipSettings={{
visible: true,
valuePath: 'continent',
template: '<div style="width:60px; text-align:center; background-color: white; border: 2px solid black; padding-bottom: 10px;padding-top: 10px;padding-left: 10px;padding-right: 10px;"><span>${continent}</span></div>',
textStyle: {
color: 'black'
}
}}/>
</LayersDirective>
</MapsComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Changing duration in mobile devices
To change the duration of the tooltips and tooltip templates in mobile devices, you can use the duration property in tooltipSettings. By default, this property is set to 2000 milliseconds. Setting the value to 0 will keep the tooltip visible indefinitely. If it is greater than 0, the tooltip will be removed after the specified time.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MapsTooltip, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(<div><MapsComponent >
<Inject services={[MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}
tooltipSettings={{
visible: true,
valuePath: 'name',
fill: '#D0D0D0',
textStyle: {
color: 'green',
fontFamily: 'Times New Roman',
fontStyle: 'Sans-serif'
},
duration: 3000
}}/>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(<div><MapsComponent >
<Inject services={[MapsTooltip]}/>
<LayersDirective>
<LayerDirective shapeData={world_map}
tooltipSettings={{
visible: true,
valuePath: 'name',
fill: '#D0D0D0',
textStyle: {
color: 'green',
fontFamily: 'Times New Roman',
fontStyle: 'Sans-serif'
},
duration: 3000
}}/>
</LayersDirective>
</MapsComponent></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);