Trigger JVectorMap drill-down with link or button

Question

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.

Answer 1

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.