X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ad10390663f5c27d4ac9eea1ff35a5a6e2ae4622..03f266fa4836c81a94e12a3462917f638902aa6a:/app/assets/javascripts/leaflet.layers.js?ds=inline diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index 8653a0921..2633d1037 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -1,60 +1,30 @@ -L.OSM.layers = function(options) { - var control = L.control(options); +L.OSM.layers = function (options) { + var control = L.OSM.sidebarPane(options, "layers", "javascripts.map.layers.title", "javascripts.map.layers.header"); - control.onAdd = function (map) { + control.onAddPane = function (map, button, $ui, toggle) { var layers = options.layers; - var $container = $('
') - .attr('class', 'control-layers'); - - var link = $('') - .attr('class', 'control-button') - .attr('href', '#') - .attr('title', 'Layers') - .html('') - .on('click', toggle) - .appendTo($container); - - var $ui = $('
') - .attr('class', 'layers-ui'); - - $('
') - .appendTo($ui) - .append( - $('') - .html('»') - .attr('class', 'close-button') - .attr('href', '#') - .bind('click', toggle)) - .append( - $('

') - .text(I18n.t('javascripts.map.layers.header'))); - - var baseSection = $('
') - .addClass('base-layers') + var baseSection = $("
") + .attr("class", "section base-layers") .appendTo($ui); - $('

') - .text(I18n.t('javascripts.map.layers.base')) + var baseLayers = $("

    ") .appendTo(baseSection); - list = $('
      ') - .appendTo(baseSection); - - layers.forEach(function(layer) { - var item = $('
    • ') - .appendTo(list); + layers.forEach(function (layer) { + var item = $("
    • ") + .appendTo(baseLayers); if (map.hasLayer(layer)) { - item.addClass('active'); + item.addClass("active"); } - var div = $('
      ') + var div = $("
      ") .appendTo(item); - map.whenReady(function() { - var miniMap = L.map(div[0], {attributionControl: false, zoomControl: false}) - .addLayer(new layer.constructor()); + map.whenReady(function () { + var miniMap = L.map(div[0], { attributionControl: false, zoomControl: false, keyboard: false }) + .addLayer(new layer.constructor({ apikey: layer.options.apikey })); miniMap.dragging.disable(); miniMap.touchZoom.disable(); @@ -62,96 +32,128 @@ L.OSM.layers = function(options) { miniMap.scrollWheelZoom.disable(); $ui - .on('show', shown) - .on('hide', hide); + .on("show", shown) + .on("hide", hide); function shown() { miniMap.invalidateSize(); - setView(); - map.on('moveend', setView); + setView({ animate: false }); + map.on("moveend", moved); } function hide() { - map.off('moveend', setView); + map.off("moveend", moved); + } + + function moved() { + setView(); } - function setView() { - miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0)); + function setView(options) { + miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0), options); } }); - var label = $('