X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/33aa0a6e454fb2d43b8ccc07395abf0864d47b66..1df32b88e886994cc992da5fb0e37867cbd80283:/app/assets/javascripts/leaflet.layers.js?ds=sidebyside diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index 6c83f0c2f..ba1461b20 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -1,47 +1,166 @@ -//= require templates/map/layers - -L.OSM.Layers = L.Control.extend({ - onAdd: function (map) { - this._initLayout(map); - return this._container; - }, - - _initLayout: function (map) { - var className = 'leaflet-control-map-ui', - container = this._container = L.DomUtil.create('div', className); - - var link = this._layersLink = L.DomUtil.create('a', 'leaflet-map-ui-layers', container); - link.href = '#'; - link.title = 'Layers'; - - this._uiPane = L.DomUtil.create('div', 'leaflet-map-ui', map._container); - - L.DomEvent - .on(this._uiPane, 'click', L.DomEvent.stopPropagation) - .on(this._uiPane, 'click', L.DomEvent.preventDefault) - .on(this._uiPane, 'dblclick', L.DomEvent.preventDefault); - - $(link).on('click', $.proxy(this.toggleLayers, this)); - }, - - toggleLayers: function (e) { - e.stopPropagation(); - e.preventDefault(); - - var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); - - if ($(this._uiPane).is(':visible')) { - $(this._uiPane).hide(); - controlContainer.css({paddingRight: '0'}); - } else { - $(this._uiPane) - .show() - .html(JST["templates/map/layers"]({layers: this.options.layers})); - controlContainer.css({paddingRight: '200px'}); +L.OSM.layers = function(options) { + var control = L.control(options); + + control.onAdd = function (map) { + var layers = options.layers; + + var $container = $('
') + .attr('class', 'control-layers'); + + var button = $('') + .attr('class', 'control-button mobile-hide') + .attr('href', '#') + .attr('title', I18n.t('javascripts.map.layers.title')) + .html('') + .on('click', toggle) + .appendTo($container); + + var $ui = $('
') + .attr('class', 'layers-ui'); + + $('
') + .attr('class', 'sidebar_heading') + .appendTo($ui) + .append( + $('') + .text(I18n.t('javascripts.close')) + .attr('class', 'icon close') + .bind('click', toggle)) + .append( + $('

') + .text(I18n.t('javascripts.map.layers.header'))); + + var baseSection = $('
') + .attr('class', 'section base-layers') + .appendTo($ui); + + list = $('
    ') + .appendTo(baseSection); + + layers.forEach(function(layer) { + var item = $('
  • ') + .appendTo(list); + + if (map.hasLayer(layer)) { + item.addClass('active'); + } + + var div = $('
    ') + .appendTo(item); + + map.whenReady(function() { + var miniMap = L.map(div[0], {attributionControl: false, zoomControl: false}) + .addLayer(new layer.constructor()); + + miniMap.dragging.disable(); + miniMap.touchZoom.disable(); + miniMap.doubleClickZoom.disable(); + miniMap.scrollWheelZoom.disable(); + + $ui + .on('show', shown) + .on('hide', hide); + + function shown() { + miniMap.invalidateSize(); + setView({animate: false}); + map.on('moveend', moved); + } + + function hide() { + map.off('moveend', moved); + } + + function moved() { + setView(); + } + + function setView(options) { + miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0), options); + } + }); + + var label = $('