Search code examples
javascriptjvectormap

JVectorMap: drill-down for custom regions


Is there a way to make combined map which could use "drill-down" behaviour for some areas and "select" behaviour for other ones areas?


Solution

  • I believe that what you are asking can be achieved also with some of the standard functionalities provided by jVectorMap. In my example below, all US regions other than Texas can be selected, whereby the normal multimap drill-down is performed just only for US-TX.

    $(document).ready(function () {
      new jvm.MultiMap({
        container: $('#map'),
        maxLevel: 1,
        main: {
          map: 'us_lcc',
          regionsSelectable: true,
          regionStyle: {
            selected: {
                fill: 'green'
              }
            },
            onRegionClick: function(event, code) {
              if(code == "US-TX") {
                return false;
              } else {
                event.stopImmediatePropagation();
              }
            }
          }
      });
    });
    

    Explanation:

    As the documentation says here, the main Map of the MultiMap object can be configured the same way as the "normal" Map.

    Inside the multi-map onRegionClick handler, the region selection can be avoided by returning false, and the drilldown can be stopped by invoking stopImmediatePropagation(). I tested this snippet with jVectorMap version 2.0.2 but it should work also with the latest versions.

    BTW, thanks to bjornd for the great jVectorMap.