Customization in React Maps component
18 Jan 202324 minutes to read
Setting the size for Maps
The width and height of the Maps can be set using the width and height properties in the Maps component. Percentage or pixel values can be used for the height and width values.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent height="200px" width="500px">
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent height="200px" width="500px">
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Maps title
The title for the Maps can be set using the titleSettings. It can be customized using the following properties.
-
alignment- To customize the alignment for the text in the title for the Maps. The possible values are Center, Near and Far. -
description- To set the description of the title in Maps. -
text- To set the text for the title in Maps. -
textStyle- To customize the text of the title in Maps. -
subtitleSettings- To customize the subtitle for the Maps.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent titleSettings={{
text: 'Maps Component',
textStyle: {
color: 'red',
fontStyle: 'italic',
fontWeight: 'regular',
fontFamily: 'arial',
size: '14px'
},
alignment: 'Center'
}}>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent titleSettings={{
text: 'Maps Component',
textStyle: {
color: 'red',
fontStyle: 'italic',
fontWeight: 'regular',
fontFamily: 'arial',
size: '14px'
},
alignment: 'Center'
}}>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Setting theme
The Maps component supports following themes.
- Material
- Fabric
- Bootstrap
- Highcontrast
- MaterialDark
- FabricDark
- BootstrapDark
- Bootstrap4
- HighContrastLight
- Tailwind
By default, the Maps are rendered by the Material theme. The theme of the Maps component is changed using the theme property.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent theme="FabricDark">
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent theme="FabricDark">
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customizing Maps container
The following properties are available to customize the container in the Maps.
-
background- To apply the background color to the container in the Maps. -
border- To customize the color, width and opacity of the border of the Maps. -
margin- To customize the margins of the Maps.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent
background="#CCD1D1"
border={{ color: 'green', width: 2}}
margin={{
bottom: 10,
left: 20,
right: 20,
top: 10
}}>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent
background="#CCD1D1"
border={{ color: 'green', width: 2}}
margin={{
bottom: 10,
left: 20,
right: 20,
top: 10
}}>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customizing Maps area
By default, the background color of the shape maps is set as white. To modify the background color of the Maps area, the background property in the mapsArea is used. The border of the Maps area can be customized using the border property in the mapsArea.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent mapsArea={{
background: '#CCD1D1',
border: {
width: 2,
color: 'green'
} }}>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent mapsArea={{
background: '#CCD1D1',
border: {
width: 2,
color: 'green'
} }}>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Customizing the shapes
The following properties are available in shapeSettings to customize the shapes of the Maps.
-
fill- To apply the fill color to the all the shapes. -
autofill- To apply the palette colors to the shapes if it is set as true. -
palette- To set the custom palette for the shapes. -
border- To customize the color, width and opacity of the border of the shapes. -
dashArray- To define the pattern of dashes and gaps that is applied to the outline of the shapes. -
opacity- To customize the transparency for the shapes.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true,
palette: ['#C7DE6C', '#59A076', '#88D0BC', '#FEA78C', '#FFC557'],
border: { color: '#FEE1DD', width: 3},
dashArray: '1',
opacity: 0.9
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true,
palette: ['#C7DE6C', '#59A076', '#88D0BC', '#FEA78C', '#FFC557'],
border: { color: '#FEE1DD', width: 3},
dashArray: '1',
opacity: 0.9
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Setting color to the shapes from the data source
The color for each shape in the Maps can be set using the colorValuePath property of shapeSettings. The value for the colorValuePath property is the field name from the data source of the shapeSettings which contains the color values.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapePropertyPath="continent" shapeDataPath="continent"
dataSource={[
{ continent: "North America", color: '#71B081' },
{ continent: "South America", color: '#5A9A77' },
{ continent: "Africa", color: '#498770' },
{ continent: "Europe", color: '#39776C' },
{ continent: "Asia", color: '#266665' },
{ continent: "Oceania", color: '#124F5E' }]}
shapeSettings={ {
colorValuePath: 'color'
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapePropertyPath="continent" shapeDataPath="continent"
dataSource={[
{ continent: "North America", color: '#71B081' },
{ continent: "South America", color: '#5A9A77' },
{ continent: "Africa", color: '#498770' },
{ continent: "Europe", color: '#39776C' },
{ continent: "Asia", color: '#266665' },
{ continent: "Oceania", color: '#124F5E' }]}
shapeSettings={ {
colorValuePath: 'color'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Applying border to individual shapes
The border of each shape in the Maps can be customized using the borderColorValuePath and borderWidthValuePath properties to modify the color and the width of the border respectively. The field name in the data source of the layer which contains the color and the width values must be set in the borderColorValuePath and borderWidthValuePath properties respectively. If the values of borderWidthValuePath and borderColorValuePath do not match with the field name from the data source, then the color and width of the border will be applied to the shapes using the border property in the shapeSettings.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapePropertyPath="continent" shapeDataPath="continent"
dataSource={[
{ continent: "North America", color: '#71B081', borderColor: '#CCFFE5', width: 2 },
{ continent: "South America", color: '#5A9A77', borderColor: 'red', width: 2 },
{ continent: "Africa", color: '#498770', borderColor: '#FFCC99', width: 2 },
{ continent: "Europe", color: '#39776C', borderColor: '#66B2FF', width: 2 },
{ continent: "Asia", color: '#266665', borderColor: '#999900', width: 2 },
{ continent: "Oceania", color: '#124F5E', borderColor: 'blue', width: 2 }
]}
shapeSettings={ {
borderColorValuePath: 'borderColor',
borderWidthValuePath: 'width',
colorValuePath: 'color'
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapePropertyPath="continent" shapeDataPath="continent"
dataSource={[
{ continent: "North America", color: '#71B081', borderColor: '#CCFFE5', width: 2 },
{ continent: "South America", color: '#5A9A77', borderColor: 'red', width: 2 },
{ continent: "Africa", color: '#498770', borderColor: '#FFCC99', width: 2 },
{ continent: "Europe", color: '#39776C', borderColor: '#66B2FF', width: 2 },
{ continent: "Asia", color: '#266665', borderColor: '#999900', width: 2 },
{ continent: "Oceania", color: '#124F5E', borderColor: 'blue', width: 2 }
]}
shapeSettings={ {
borderColorValuePath: 'borderColor',
borderWidthValuePath: 'width',
colorValuePath: 'color'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Projection type
The Maps component supports the following projection types:
- Mercator
- Equirectangular
- Miller
- Eckert3
- Eckert5
- Eckert6
- Winkel3
- AitOff
By default, the Maps are rendered by the Mercator projection type in which the Maps are rendered based on the coordinates. So, the Maps is not stretched. To change the type of projection in the Maps, the projectionType property is used.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent id="element" projectionType='Miller'>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true,
palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000']
} }>
</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 } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent id="element" projectionType='Miller'>
<LayersDirective>
<LayerDirective shapeData={world_map}
shapeSettings={ {
autofill: true,
palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000']
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);