I am using the JVectorMap plugin and have successfully created a drill-down map.
My question is, is it possible to trigger the drill-down function externally outside the map elsewhere on the page i.e. on click of a link or button.
Let say you have correctly initialized a jVectorMap drill-down map:
var drillDownUSMap;
$(document).ready(function () {
drillDownUSMap= new jvm.MultiMap({
container: $('#map'),
maxLevel: 1,
main: {
map: 'us_lcc',
regionsSelectable: true,
regionStyle: {
selected: {
fill: 'green'
}
},
},
mapUrlByCode: function(code, multiMap){
var path = 'maps/us-counties/',
county = code.toLowerCase(),
proj = multiMap.defaultProjection,
mapData = 'jquery-jvectormap-data-' + county + '-' + proj + '-en.js';
return path + mapData;
}
});
});
(IMHO I would store the reference to the returned map object) then, use it like as follows:
function drillDownUSMapTo(code) {
var mapData = drillDownUSMap.params.mapNameByCode(code, drillDownUSMap);
drillDownUSMap.drillDown(mapData, code);
}
... whereby You should already have some buttons to click, as You said in Your question:
onclick="drillDownUSMapTo('US-TX');"
BTW, thanks to bjornd for the great jVectorMap.