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