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