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