app/assets/javascripts/leaflet.layers.js

   1 L.OSM.layers = function(options) {
   2   var control = L.control(options);
   3
   4   control.onAdd = function (map) {
   5     var layers = options.layers;
   6
   7     var $container = $('<div>')
   8       .attr('class', 'control-layers');
   9
  10     var link = $('<a>')
  11       .attr('class', 'control-button')
  12       .attr('href', '#')
  13       .attr('title', 'Layers')
  14       .html('<span class="icon layers"></span>')
  15       .on('click', toggle)
  16       .appendTo($container);
  17
  18     var $ui = $('<div>')
  19       .attr('class', 'layers-ui');
  20
  21     $('<section>')
  22        .appendTo($ui)
  23        .append(
  24           $('<a>')
  25             .html('&raquo;')
  26             .attr('class', 'close-button')
  27             .attr('href', '#')
  28             .bind('click', toggle))
  29        .append(
  30         $('<h2>')
  31           .text(I18n.t('javascripts.map.layers.header')));
  32
  33     var baseSection = $('<section>')
  34       .addClass('base-layers')
  35       .appendTo($ui);
  36
  37     $('<p>')
  38       .text(I18n.t('javascripts.map.layers.base'))
  39       .appendTo(baseSection);
  40
  41     list = $('<ul>')
  42       .appendTo(baseSection);
  43
  44     layers.forEach(function(layer) {
  45       var item = $('<li>')
  46         .appendTo(list);
  47
  48       if (map.hasLayer(layer)) {
  49         item.addClass('active');
  50       }
  51
  52       var div = $('<div>')
  53         .appendTo(item);
  54
  55       map.whenReady(function() {
  56         var miniMap = L.map(div[0], {attributionControl: false, zoomControl: false})
  57           .addLayer(new layer.constructor());
  58
  59         miniMap.dragging.disable();
  60         miniMap.touchZoom.disable();
  61         miniMap.doubleClickZoom.disable();
  62         miniMap.scrollWheelZoom.disable();
  63
  64         $ui
  65           .on('show', shown)
  66           .on('hide', hide);
  67
  68         function shown() {
  69           miniMap.invalidateSize();
  70           setView();
  71           map.on('moveend', setView);
  72         }
  73
  74         function hide() {
  75           map.off('moveend', setView);
  76         }
  77
  78         function setView() {
  79           miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0));
  80         }
  81       });
  82
  83       var label = $('<label>')
  84         .text(layer.options.name)
  85         .appendTo(item);
  86
  87       item.on('click', function() {
  88         layers.forEach(function(other) {
  89           if (other === layer) {
  90             map.addLayer(other);
  91           } else {
  92             map.removeLayer(other);
  93           }
  94         });
  95         map.fire('baselayerchange', {layer: layer});
  96       });
  97
  98       map.on('layeradd layerremove', function() {
  99         item.toggleClass('active', map.hasLayer(layer));
 100       });
 101     });
 102
 103     if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
 104       var overlaySection = $('<section>')
 105         .addClass('overlay-layers')
 106         .appendTo($ui);
 107
 108       $('<p>')
 109         .text(I18n.t('javascripts.map.layers.overlays'))
 110         .appendTo(overlaySection);
 111
 112       var list = $('<ul>')
 113         .appendTo(overlaySection);
 114
 115       function addOverlay(layer, name) {
 116         var item = $('<li>')
 117           .appendTo(list);
 118
 119         var label = $('<label>')
 120           .appendTo(item);
 121
 122         var input = $('<input>')
 123           .attr('type', 'checkbox')
 124           .prop('checked', map.hasLayer(layer))
 125           .appendTo(label);
 126
 127         label.append(name);
 128
 129         input.on('change', function() {
 130           if (input.is(':checked')) {
 131             map.addLayer(layer);
 132           } else {
 133             map.removeLayer(layer);
 134           }
 135         });
 136
 137         map.on('layeradd layerremove', function() {
 138           input.prop('checked', map.hasLayer(layer));
 139         });
 140       }
 141
 142       addOverlay(map.noteLayer, I18n.t('javascripts.map.layers.notes'));
 143       addOverlay(map.dataLayer, I18n.t('javascripts.map.layers.data'));
 144     }
 145
 146     options.sidebar.addPane($ui);
 147
 148     function toggle(e) {
 149       e.stopPropagation();
 150       e.preventDefault();
 151       options.sidebar.togglePane($ui);
 152     }
 153
 154     return $container[0];
 155   };
 156
 157   return control;
 158 };