X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/10c9ca81c788c5aa3cd7a66d9cdbaedc14def1bc..10999cfc5e6f64f1b6d81ddb4a2f751c694bcbc5:/app/assets/javascripts/leaflet.layers.js diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index ce0fcd9f3..f375dc08f 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -1,68 +1,195 @@ -//= require templates/map/layers - -L.OSM.Layers = L.Control.extend({ - onAdd: function (map) { - this._map = 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 = this.options.uiPane; - - $(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"]()); - - var list = $(this._uiPane).find('.base-layers ul'); - - var layers = this.options.layers; - for (var i = 0; i < layers.length; i++) { - var item = $('
  • ') - .appendTo(list); - - var div = $('
    ') - .appendTo(item); +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") + .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); + + var baseLayers = $("
      ") + .appendTo(baseSection); + + layers.forEach(function (layer) { + var item = $("
    • ") + .appendTo(baseLayers); + + if (map.hasLayer(layer)) { + item.addClass("active"); + } - var map = L.map(div[0], {attributionControl: false, zoomControl: false}) - .setView(this._map.getCenter(), Math.max(this._map.getZoom() - 2, 0)) - .addLayer(new layers[i].layer.constructor); + var div = $("
      ") + .appendTo(item); + + 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(); + 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 = $("