Configuration
Regions
As mentioned earlier in the markers section, controlling the region styles follows the same approach:
simply add any valid path property to the initial
, hover
, selected
, and selectedHover
states.
Usage
To set the initial style for regions, you can configure the regionStyle
property. Here’s an example:
const map = new jsVectorMap({
regionStyle: {
initial: {
fill: '#ff5566',
stroke: '#676767',
strokeWidth: 2.5,
},
},
})
Options
Customize the appearance and behavior of regions using the available configuration options.
Region state customization
You can customize the region style for when a region is selected, as well as when it is hovered over while selected, here’s an example:
const map = new jsVectorMap({
regionStyle: {
selected: { fill: 'red' },
selectedHover: { fill: 'purple' },
},
})
Selected Regions
You may want to pre-select certain regions with custom styles to make them stand out, similar to what we did with markers.
Note: Region selection is done using the region code.
const map = new jsVectorMap({
selectedRegions: ['EG', 'US'],
})
Selectable
You can control whether regions are selectable, by default, this is set to false.
const map = new jsVectorMap({
regionsSelectable: true,
})
Selectable One
To allow only one region to be selected at a time, enable this property, by default, it is set to false.
const map = new jsVectorMap({
regionsSelectableOne: true,
})
Labels
You may want to add labels to specific regions. This can be done using the labels property.
const map = new jsVectorMap({
labels: {
regions: {
render(code) {
// Custom label logic based on region code
return ['EG', 'CN'].indexOf(code) > -1 ? 'Hello ' + code : null
}
}
}
})
Designing Labels
To customize the appearance of region labels, add the regionLabelStyle property to the map configuration.
const map = new jsVectorMap({
regionLabelStyle: {
initial: {
fill: '#35373e',
fontFamily: 'Poppins',
fontWeight: 500,
fontSize: 13,
},
// Same properties in initial object can be overwritten in hover and selected states.
hover: {},
selected: {},
selectedHover: {}
},
})
Methods
getSelectedRegions()
If you need to retrieve the currently selected regions, such as for sending data to a server, you can use the getSelectedRegions()
method:
const map = new jsVectorMap({ })
// returns an array of selected region codes, e.g. ['EG', 'US']
console.log(map.getSelectedRegions())
clearSelectedRegions()
You can clear all selected regions using the following method:
map.clearSelectedRegions()