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