.appendTo($container);
var $ui = $('<div>')
- .attr('class', 'layers-ui')
- .appendTo(options.uiPane);
-
- $('<h2>')
- .text(I18n.t('javascripts.map.layers.header'))
- .appendTo($ui);
+ .attr('class', 'layers-ui');
+
+ $('<section>')
+ .appendTo($ui)
+ .append(
+ $('<a>')
+ .html('»')
+ .attr('class', 'close-button')
+ .attr('href', '#')
+ .bind('click', toggle))
+ .append(
+ $('<h2>')
+ .text(I18n.t('javascripts.map.layers.header')));
if (OSM.STATUS != 'api_offline' && OSM.STATUS != 'database_offline') {
var overlaySection = $('<section>')
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);
+ .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));
- });
+ $ui
+ .on('show', shown)
+ .on('hide', hide);
- div.data('map', miniMap);
+ function shown() {
+ miniMap.invalidateSize();
+ setView();
+ map.on('moveend', setView);
+ }
+
+ function hide() {
+ map.off('moveend', setView);
+ }
+
+ function setView() {
+ miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0));
+ }
});
var label = $('<label>')
});
});
+ options.sidebar.addPane($ui);
+
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();
- });
+ options.sidebar.togglePane($ui);
}
return $container[0];