bjornd/jvectormap — pull request #256 by rardoz (2014-04-24 15:04:41+00:00)
Title: Create complete-world-map.js

Regions have 5 (i.e. TR.CK ) character codes, and territories have 2 digit codes(i.e. US ). You can use jQuery to turn off the regions at a certain zoom point. Or show only those in the Territory. Below is an example.

maps = $("#worldmap").vectorMap({
map: 'world_mill_en',
backgroundColor: "none",
hoverOpacity: 1.0,
hoverColor: false,
zoomMax: 22,
regionStyle: {
initial: {
"fill-opacity": 1,
"fill": "#0f5391"
},
hover: {
"stroke-opacity": 1.0,
"fill-opacity": 0.8
}
},
onRegionLabelShow: function (e, el, code) {
var clickcount = (!gdpData[code]) ? 0 : gdpData[code];
var compString = jvm.WorldMap.maps.world_mill_en.paths["" + code].name;

if (code.length < 3) {
el.html(el.html() + ' (Clicks - ' + clickcount + ')');
} else {
var territoryName = code.substr(0, 2);
el.html(el.html() + ', ' + territoryName + ' (Clicks - ' + clickcount + ')');
}
},
series: {
regions: [{
values: gdpData,
min: 0,
normalizeFunction: 'linear',
scale: ["#1763d4", "#54cdff"]
}]
},
focusOn: {
x: 0.2,
y: 0.275,
scale: 2.80
}
});

jvm.$.showRegion = function () {

var worldMap = $("#worldmap").vectorMap('get', 'mapObject');
var dataArr = worldMap.series.regions[0].values;

$('path.jvectormap-region.jvectormap-element').each(function () {
var regionCode = $(this).attr('data-code');
if (regionCode.length > 2 && dataArr[regionCode.substr(0, 2)]) {
$(this).removeAttr('style');
var fill = $(this).attr('fill');
$(this).attr('stroke-width', '0.5');
$(this).attr('stroke', fill);
$(this).attr('stroke-miterlimit', '1');
$(this).attr('stroke-linecap', 'round');
$(this).attr('mem', 'okay');
$(this).attr('stroke-linejoin', 'round');

if (!$("path[data-code='" + regionCode.substr(0, 2) + "']").attr('style')) {
$("path[data-code='" + regionCode.substr(0, 2) + "']").attr('style', 'fill: #EEEEEE !important;');
}

$(this).attr('style', 'stroke:' + fill + '; stroke-width: 0.5px; stroke-linecap:round; stroke-miterlimit: 1;stroke-linejoin: round;');
}
});
};

jvm.$.hideRegion = function () {
$pathNode = $('path.jvectormap-region.jvectormap-element');

$($pathNode).each(function () {
var regionCode = $(this).attr('data-code');
if (regionCode.length > 3) {
$(this).attr('style', 'display:none');

if ($("path[data-code='" + regionCode.substr(0, 2) + "']").attr('style')) {
$("path[data-code='" + regionCode.substr(0, 2) + "']").removeAttr('style');
}
}
});
};

jvm.$.getScale = function () {
var worldMap = $("#worldmap").vectorMap('get', 'mapObject');
return worldMap.scale;
};

jvm.$.addOrRemoveRegions = function () {
var scale = jvm.$.getScale();
if (scale > 1.2) {
jvm.$.showRegions();
}

if (scale < 1.2) {
jvm.$.hideRegions();
}
};

$('#worldmapWrapper').bind('mousewheel', function (event, delta, nbr) {
clearTimeout($.data(this, 'timer'));
$.data(this, 'timer', setTimeout(function () {
jvm.$.addOrRemoveRegions();
}, 200));
});