code: function(e, opt) {
              var self = this;
  
              // set animDuration to default if not defined
              if (opt.animDuration === undefined) {
                  opt.animDuration = 0;
              }
  
              // set hiddenOpacity to default if not defined
              if (opt.hiddenOpacity === undefined) {
                  opt.hiddenOpacity = 0.3;
              }
  
              // handle area
              if (opt.ranges && opt.ranges.area) {
                  self.showElemByRange(opt.ranges.area, self.areas, opt.hiddenOpacity, opt.animDuration);
              }
  
              // handle plot
              if (opt.ranges && opt.ranges.plot) {
                  self.showElemByRange(opt.ranges.plot, self.plots, opt.hiddenOpacity, opt.animDuration);
              }
  
              // handle link
              if (opt.ranges && opt.ranges.link) {
                  self.showElemByRange(opt.ranges.link, self.links, opt.hiddenOpacity, opt.animDuration);
              }
  
              // Call user callback
              if (opt.afterShowRange) opt.afterShowRange();
          }
docs: /*
  Show some element in range defined by user
  Triggered by user $(".mapcontainer").trigger("showElementsInRange", [opt]);
  
  @param opt the options
  opt.hiddenOpacity opacity for hidden element (default = 0.3)
  opt.animDuration animation duration in ms (default = 0)
  opt.afterShowRange callback
  opt.ranges the range to show:
  Example:
  opt.ranges = {
  'plot' : {
  0 : {                        // valueIndex
  'min': 1000,
  'max': 1200
  },
  1 : {                        // valueIndex
  'min': 10,
  'max': 12
  }
  },
  'area' : {
  {'min': 10, 'max': 20}    // No valueIndex, only an object, use 0 as valueIndex (easy case)
  }
  }