app/assets/javascripts/leaflet.layers.js

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