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