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 button = $('<a>')
  11       .attr('class', 'control-button')
  12       .attr('href', '#')
  13       .attr('title', I18n.t('javascripts.map.layers.title'))
  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     $('<div>')
  22       .attr('class', 'sidebar_heading')
  23       .appendTo($ui)
  24       .append(
  25         $('<span>')
  26           .text(I18n.t('javascripts.close'))
  27           .attr('class', 'icon close')
  28           .bind('click', toggle))
  29       .append(
  30         $('<h4>')
  31           .text(I18n.t('javascripts.map.layers.header')));
  32
  33     var baseSection = $('<div>')
  34       .attr('class', 'section base-layers')
  35       .appendTo($ui);
  36
  37     list = $('<ul>')
  38       .appendTo(baseSection);
  39
  40     layers.forEach(function(layer) {
  41       var item = $('<li>')
  42         .appendTo(list);
  43
  44       if (map.hasLayer(layer)) {
  45         item.addClass('active');
  46       }
  47
  48       var div = $('<div>')
  49         .appendTo(item);
  50
  51       map.whenReady(function() {
  52         var miniMap = L.map(div[0], {attributionControl: false, zoomControl: false})
  53           .addLayer(new layer.constructor());
  54
  55         miniMap.dragging.disable();
  56         miniMap.touchZoom.disable();
  57         miniMap.doubleClickZoom.disable();
  58         miniMap.scrollWheelZoom.disable();
  59
  60         $ui
  61           .on('show', shown)
  62           .on('hide', hide);
  63
  64         function shown() {
  65           miniMap.invalidateSize();
  66           setView({animate: false});
  67           map.on('moveend', moved);
  68         }
  69
  70         function hide() {
  71           map.off('moveend', moved);
  72         }
  73
  74         function moved() {
  75           setView();
  76         }
  77
  78         function setView(options) {
  79           miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0), options);
  80         }
  81       });
  82
  83       var label = $('<label>')
  84         .appendTo(item);
  85
  86       var input = $('<input>')
  87          .attr('type', 'radio')
  88          .prop('checked', map.hasLayer(layer))
  89          .appendTo(label);
  90
  91       label.append(layer.options.name);
  92
  93       item.on('click', function() {
  94         layers.forEach(function(other) {
  95           if (other === layer) {
  96             map.addLayer(other);
  97           } else {
  98             map.removeLayer(other);
  99           }
 100         });
 101         map.fire('baselayerchange', {layer: layer});
 102       });
 103
 104       map.on('layeradd layerremove', function() {
 105         item.toggleClass('active', map.hasLayer(layer));
 106         input.prop('checked', map.hasLayer(layer));
 107       });
 108     });
 109
 110     if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
 111       var overlaySection = $('<div>')
 112         .attr('class', 'section overlay-layers')
 113         .appendTo($ui);
 114
 115       $('<p>')
 116         .text(I18n.t('javascripts.map.layers.overlays'))
 117         .attr("class", "deemphasize")
 118         .appendTo(overlaySection);
 119
 120       var list = $('<ul>')
 121         .appendTo(overlaySection);
 122
 123       function addOverlay(layer, name, maxArea) {
 124         var refName = name.split(' ').join('_').toLowerCase();
 125         var item = $('<li>')
 126           .attr('class', refName)
 127           .tooltip({
 128             placement: 'top'
 129           })
 130           .appendTo(list);
 131
 132         var label = $('<label>')
 133           .appendTo(item);
 134
 135         var checked = map.hasLayer(layer);
 136
 137         var input = $('<input>')
 138           .attr('type', 'checkbox')
 139           .prop('checked', checked)
 140           .appendTo(label);
 141
 142         label.append(name);
 143
 144         input.on('change', function() {
 145           checked = input.is(':checked');
 146           if (checked) {
 147             map.addLayer(layer);
 148           } else {
 149             map.removeLayer(layer);
 150           }
 151           map.fire('overlaylayerchange', {layer: layer});
 152         });
 153
 154         map.on('layeradd layerremove', function() {
 155           input.prop('checked', map.hasLayer(layer));
 156         });
 157
 158         map.on('zoomend', function() {
 159           var disabled = map.getBounds().getSize() >= maxArea;
 160           $(input).prop('disabled', disabled);
 161
 162           if (disabled && $(input).is(':checked')) {
 163             $(input).prop('checked', false)
 164               .trigger('change');
 165             checked = true;
 166           } else if (!disabled && !$(input).is(':checked') && checked) {
 167             $(input).prop('checked', true)
 168               .trigger('change');
 169           }
 170
 171           layer.fire('statechange', {disabled: disabled, checked: checked});
 172
 173           $(item).attr('class', disabled ? 'disabled' : '');
 174           item.attr('data-original-title', disabled ?
 175             I18n.t('javascripts.site.' + refName + '_zoom_in_tooltip') : '');
 176         });
 177       }
 178
 179       addOverlay(map.noteLayer, I18n.t('javascripts.map.layers.notes'), OSM.MAX_NOTE_REQUEST_AREA);
 180       addOverlay(map.dataLayer, I18n.t('javascripts.map.layers.data'), OSM.MAX_REQUEST_AREA);
 181     }
 182
 183     options.sidebar.addPane($ui);
 184
 185     function toggle(e) {
 186       e.stopPropagation();
 187       e.preventDefault();
 188       options.sidebar.togglePane($ui, button);
 189       $('.leaflet-control .control-button').tooltip('hide');
 190     }
 191
 192     return $container[0];
 193   };
 194
 195   return control;
 196 };