I'm trying to show labels for the only region I highlight on the map.
Here is the code:
var map = $('#map').vectorMap({
regionsSelectable: true,
regionsSelectableOne: true,
series: {
regions: [{
scale: ['#cccccc', '#0A6EB4'],
values: data
}]
},
regionStyle: {
initial: {
fill: '#ffffff',
"fill-opacity": 1,
stroke: '#cccccc',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 1,
cursor: 'pointer'
},
selected: {
fill: '#0A6EB4'
},
selectedHover: {
fill: '#1E4669'
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
},
labels: {
regions: {
render: function (code) {
if (activeCountries.hasOwnProperty(code)) {
var regions = $("#map").vectorMap("get", "mapObject").regions;
console.log(code, regions[code]); //<< ERROR!
}
}
}
}
});
In the labels.regions.render function I'm able to get the code of the country, I'm able to verify that is a country present in the array activeCountries, but then when I try to retrieve the country name (regions[code].config.name) the regions[code] is undefined, the specific code is missing!
So I can show the labels on the regions that are present in the activeCountries array?
That is what I'm trying to achieve:
The above image is done using Highmaps.
UPDATE Thanks to deblocker that has found the solution.
Now I need only to find a way to add a white shadow to the region text to make it better visible also on dark highlighted regions.
So, I believe You are using a world map, is that correct?
Some countries are really too small to draw a SVG path in a meaningful way on a world map.
You can either:
Add markers to easily locate that small countries:
{
"BH": {"latLng": [26.066700, 50.557700], "name": "Bahrain"},
"GI": {"latLng": [36.140751, -5.353585], "name": "Gibraltar"},
"HK": {"latLng": [22.284681,114.158177], "name": "Hong Kong"},
"MQ": {"latLng": [14.641528,-61.024174], "name": "Martinique"},
"MT": {"latLng": [35.937496, 14.375416], "name": "Malta"},
"MU": {"latLng": [-20.183590,57.941208], "name": "Mauritius"},
"SG": {"latLng": [1.352083, 103.819836], "name": "Singapore"},
"GP": {"latLng": [16.265000,-61.551000], "name": "Guadeloupe"}
}
Here is the DEMO:
$(document).ready(function () {
var map = "world_mill_en",
regions = {"MN": "#fad"};
$("#map").vectorMap({
map: map,
series: {
regions: [{
values: regions,
attribute: "fill"
}]
},
labels: {
regions: {
render: function(code){
return regions[code] && jvm.Map.maps[map].paths[code].name;
}
}
}
});
});
<html>
<head>
<title>jVectorMap Labels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/jquery-jvectormap.min.css" type="text/css">
<style>
.jvectormap-region.jvectormap-element {
text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>
BTW, thanks to bjornd for the great jVectorMap.