app/assets/javascripts/leaflet.key.js

   1 L.OSM.key = function (options) {
   2   var control = L.control(options);
   3
   4   control.onAdd = function (map) {
   5     var $container = $('<div>')
   6       .attr('class', 'control-key');
   7
   8     $('<a>')
   9       .attr('class', 'control-button')
  10       .attr('href', '#')
  11       .attr('title', I18n.t('javascripts.key.tooltip'))
  12       .html('<span class="icon key"></span>')
  13       .on('click', toggle)
  14       .appendTo($container);
  15
  16     var $ui = $('<div>')
  17       .attr('class', 'layers-ui');
  18
  19     $('<section>')
  20       .appendTo($ui)
  21       .append(
  22       $('<h2>')
  23         .text(I18n.t('javascripts.key.title')));
  24
  25     var $section = $('<section>')
  26       .appendTo($ui);
  27
  28     options.sidebar.addPane($ui);
  29
  30     $ui
  31       .on('show', shown)
  32       .on('hide', hidden);
  33
  34     function shown() {
  35       map.on('zoomend baselayerchange', update);
  36       $section.load('/key', update);
  37     }
  38
  39     function hidden() {
  40       map.off('zoomend baselayerchange', update);
  41     }
  42
  43     function toggle(e) {
  44       e.stopPropagation();
  45       e.preventDefault();
  46       options.sidebar.togglePane($ui);
  47     }
  48
  49     function update() {
  50       var layer = getMapBaseLayerId(map),
  51         zoom = map.getZoom();
  52
  53       $('.mapkey-table-entry').each(function () {
  54         var data = $(this).data();
  55         if (layer == data.layer && zoom >= data.zoomMin && zoom <= data.zoomMax) {
  56           $(this).show();
  57         } else {
  58           $(this).hide();
  59         }
  60       });
  61     }
  62
  63     return $container[0];
  64   };
  65
  66   return control;
  67 };