+ var baseSection = $('<section>')
+ .addClass('base-layers')
+ .appendTo($ui);
+
+ $('<p>')
+ .text(I18n.t('javascripts.map.layers.base'))
+ .appendTo(baseSection);
+
+ list = $('<ul>')
+ .appendTo(baseSection);
+
+ layers.forEach(function(layer) {
+ var item = $('<li>')
+ .appendTo(list);
+
+ if (map.hasLayer(layer)) {
+ item.addClass('active');
+ }
+
+ var div = $('<div>')
+ .appendTo(item);
+
+ map.whenReady(function() {
+ var miniMap = L.map(div[0], {attributionControl: false, zoomControl: false})
+ .setView(map.getCenter(), Math.max(map.getZoom() - 2, 0))
+ .addLayer(new layer.constructor);
+
+ miniMap.dragging.disable();
+ miniMap.touchZoom.disable();
+ miniMap.doubleClickZoom.disable();
+ miniMap.scrollWheelZoom.disable();
+
+ map.on('moveend', function() {
+ miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0));
+ });
+
+ div.data('map', miniMap);
+ });
+
+ var label = $('<label>')
+ .text(layer.options.name)
+ .appendTo(item);
+
+ item.on('click', function() {
+ layers.forEach(function(other) {
+ if (other === layer) {
+ map.addLayer(other);
+ } else {
+ map.removeLayer(other);
+ }
+ });
+ });
+
+ map.on('layeradd layerremove', function() {
+ item.toggleClass('active', map.hasLayer(layer));
+ });
+ });
+
+ function toggle(e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right');
+
+ if ($ui.is(':visible')) {
+ $(control.options.uiPane).hide();
+ controlContainer.css({paddingRight: '0'});
+ } else {
+ $(control.options.uiPane).show();
+ controlContainer.css({paddingRight: '230px'});
+ }
+
+ $ui.find('.base-layers .leaflet-container').each(function() {
+ $(this).data('map').invalidateSize();
+ });
+ }
+
+ return $container[0];
+ };
+
+ return control;