var $ui = $('<div>')
.attr('class', 'layers-ui');
- $('<h2>')
- .text(I18n.t('javascripts.map.layers.header'))
- .appendTo($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);
+
+ function shown() {
+ miniMap.invalidateSize();
+ setView();
+ map.on('moveend', setView);
+ }
+
+ function hide() {
+ map.off('moveend', setView);
+ }
- div.data('map', miniMap);
+ function setView() {
+ miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0));
+ }
});
var label = $('<label>')
options.sidebar.addPane($ui);
- $ui
- .on('show', shown);
-
- function shown() {
- $ui.find('.base-layers .leaflet-container').each(function() {
- $(this).data('map').invalidateSize();
- });
- }
-
function toggle(e) {
e.stopPropagation();
e.preventDefault();