From: John Firebaugh Date: Tue, 11 Jun 2013 20:48:12 +0000 (-0700) Subject: Layers work X-Git-Tag: live~4968^2~38 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/ef73cc1f574124b10cda75188aa542d9f4d802bb?hp=d0ed118ee24401a7e6117efa74522e67a9babba6 Layers work --- diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 753cf4740..184b57419 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -9,38 +9,6 @@ //= require index/key //= require index/notes -function allLayers() { - return [{ - layer: new L.OSM.Mapnik({ - attribution: '', - code: "M" - }), - keyid: "mapnik", - name: I18n.t("javascripts.map.base.standard") - }, { - layer: new L.OSM.CycleMap({ - attribution: "Tiles courtesy of Andy Allan", - code: "C" - }), - keyid: "cyclemap", - name: I18n.t("javascripts.map.base.cycle_map") - }, { - layer: new L.OSM.TransportMap({ - attribution: "Tiles courtesy of Andy Allan", - code: "T" - }), - keyid: "transportmap", - name: I18n.t("javascripts.map.base.transport_map") - }, { - layer: new L.OSM.MapQuestOpen({ - attribution: "Tiles courtesy of MapQuest ", - code: "Q" - }), - keyid: "mapquest", - name: I18n.t("javascripts.map.base.mapquest") - }]; -} - $(document).ready(function () { var params = OSM.mapParams(); @@ -51,9 +19,34 @@ $(document).ready(function () { map.attributionControl.setPrefix(''); - var layers = allLayers(); + var layers = [ + new L.OSM.Mapnik({ + attribution: '', + code: "M", + keyid: "mapnik", + name: I18n.t("javascripts.map.base.standard") + }), + new L.OSM.CycleMap({ + attribution: "Tiles courtesy of Andy Allan", + code: "C", + keyid: "cyclemap", + name: I18n.t("javascripts.map.base.cycle_map") + }), + new L.OSM.TransportMap({ + attribution: "Tiles courtesy of Andy Allan", + code: "T", + keyid: "transportmap", + name: I18n.t("javascripts.map.base.transport_map") + }), + new L.OSM.MapQuestOpen({ + attribution: "Tiles courtesy of MapQuest ", + code: "Q", + keyid: "mapquest", + name: I18n.t("javascripts.map.base.mapquest") + }) + ]; - layers[0].layer.addTo(map); + layers[0].addTo(map); $("#map").on("resized", function () { map.invalidateSize(); @@ -105,15 +98,15 @@ $(document).ready(function () { if (params.layers) { var foundLayer = false; for (var i = 0; i < layers.length; i++) { - if (params.layers.indexOf(layers[i].layer.options.code) >= 0) { - map.addLayer(layers[i].layer); + if (params.layers.indexOf(layers[i].options.code) >= 0) { + map.addLayer(layers[i]); foundLayer = true; } else { - map.removeLayer(layers[i].layer); + map.removeLayer(layers[i]); } } if (!foundLayer) { - map.addLayer(layers[0].layer); + map.addLayer(layers[0]); } } @@ -154,11 +147,11 @@ $(document).ready(function () { } }); -// non-scoped utilities -function getMapBaseLayer() { - for (var i = 0; i < layers.length; i++) { - if (map.hasLayer(layers[i].layer)) { - return layers[i]; +function getMapBaseLayerId(map) { + for (var i in map._layers) { // TODO: map.eachLayer + var layer = map._layers[i]; + if (layer.options && layer.options.keyid) { + return layer.options.keyid; } } } diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index 52af96ebb..3715cbf99 100644 --- a/app/assets/javascripts/index/export.js +++ b/app/assets/javascripts/index/export.js @@ -38,7 +38,7 @@ $(document).ready(function () { openSidebar(); - if (getMapBaseLayer().keyid == "mapnik") { + if (getMapBaseLayerId() == "mapnik") { $("#format_mapnik").prop("checked", true); } @@ -186,7 +186,7 @@ $(document).ready(function () { function htmlUrlChanged() { var bounds = getBounds(); - var layerName = getMapBaseLayer().keyid; + var layerName = getMapBaseLayerId(); var url = "http://" + OSM.SERVER_URL + "/export/embed.html?bbox=" + bounds.toBBoxString() + "&layer=" + layerName; var markerUrl = ""; diff --git a/app/assets/javascripts/index/key.js b/app/assets/javascripts/index/key.js index 9722cf4cf..5592a2960 100644 --- a/app/assets/javascripts/index/key.js +++ b/app/assets/javascripts/index/key.js @@ -6,7 +6,7 @@ $(document).ready(function () { title = $(this).text(); function updateMapKey() { - var mapLayer = getMapBaseLayer().keyid, + var mapLayer = getMapBaseLayerId(), mapZoom = map.getZoom(); $(".mapkey-table-entry").each(function () { diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js index ce0fcd9f3..15f114a5c 100644 --- a/app/assets/javascripts/leaflet.layers.js +++ b/app/assets/javascripts/leaflet.layers.js @@ -7,58 +7,82 @@ L.OSM.Layers = L.Control.extend({ return this._container; }, - _initLayout: function (map) { + _initLayout: function () { 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); + var link = L.DomUtil.create('a', 'control-button', container); + link.innerHTML = ""; link.href = '#'; link.title = 'Layers'; - this._uiPane = this.options.uiPane; + this._ui = $(L.DomUtil.create('div', 'layers-ui', this.options.uiPane)) + .html(JST["templates/map/layers"]()); - $(link).on('click', $.proxy(this.toggleLayers, this)); - }, - - toggleLayers: function (e) { - e.stopPropagation(); - e.preventDefault(); + var list = this._ui.find('.base-layers ul'); - 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'); + this.options.layers.forEach(function(layer) { + var item = $('
  • ') + .appendTo(list); - var layers = this.options.layers; - for (var i = 0; i < layers.length; i++) { - var item = $('
  • ') - .appendTo(list); + if (this._map.hasLayer(layer)) { + item.addClass('active'); + } - var div = $('
    ') - .appendTo(item); + var div = $('
    ') + .appendTo(item); + this._map.whenReady(function() { 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); + .addLayer(new layer.constructor); map.dragging.disable(); map.touchZoom.disable(); map.doubleClickZoom.disable(); map.scrollWheelZoom.disable(); + }, this); + + var label = $('') + .text(layer.options.name) + .appendTo(item); + + item.on('click', function() { + this.options.layers.forEach(function(other) { + if (other === layer) { + this._map.addLayer(other); + } else { + this._map.removeLayer(other); + } + }, this); + }.bind(this)); + + this._map.on('layeradd', function(e) { + if (e.layer === layer) { + item.addClass('active'); + } + }).on('layerremove', function(e) { + if (e.layer === layer) { + item.removeClass('active'); + } + }); + }, this); - var label = $('') - .text(layers[i].name) - .appendTo(item); - } + $(link).on('click', $.proxy(this.toggleLayers, this)); + }, - controlContainer.css({paddingRight: '200px'}); + toggleLayers: function (e) { + e.stopPropagation(); + e.preventDefault(); + + var controlContainer = $('.leaflet-control-container .leaflet-top.leaflet-right'); + + if ($(this._ui).is(':visible')) { + $(this.options.uiPane).hide(); + controlContainer.css({paddingRight: '0'}); + } else { + $(this.options.uiPane).show(); + controlContainer.css({paddingRight: '230px'}); } } }); diff --git a/app/assets/javascripts/templates/map/layers.jst.ejs b/app/assets/javascripts/templates/map/layers.jst.ejs index cbda1d696..76835c15c 100644 --- a/app/assets/javascripts/templates/map/layers.jst.ejs +++ b/app/assets/javascripts/templates/map/layers.jst.ejs @@ -1,11 +1,13 @@

    <%= I18n.t('javascripts.map.layers.header') %>

    -
    +

    <%= I18n.t('javascripts.map.layers.overlays') %>

    - - -
    -
    + + +

    <%= I18n.t('javascripts.map.layers.base') %>

    -
    + diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index dd29b813d..915647735 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -569,10 +569,40 @@ a.donate { width: 200px; height: 100%; background: white; +} - .leaflet-container { - width: 100%; - height: 50px; +.layers-ui { + section { + border-top: 1px solid #868e85; + padding: 15px; + } + + li { + margin-bottom: 10px; + } + + label { + border-radius: 4px; + display: block; + padding: 5px; + background-color: #868e85; + } + + li.active label { + background-color: #68c879; + } + + .base-layers { + label { + border-radius: 0px 0px 4px 4px; + } + + .leaflet-container { + border-radius: 4px 4px 0px 0px; + width: 100%; + height: 50px; + cursor: pointer; + } } }