javascriptjqueryhtmljvectormap

Trigger JVectorMap drill-down with link or button


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.


Solution

  • 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.