From 703990a5bbdcdb782ef85983b960253aecc3e163 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Thu, 21 Nov 2024 20:58:47 +0300 Subject: [PATCH 1/2] Move map layer ids/codes/keys to layer definition data --- app/assets/javascripts/leaflet.map.js | 189 ++++++++++++++------------ 1 file changed, 102 insertions(+), 87 deletions(-) diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index fe4b139d14..d053a81ce4 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -15,109 +15,125 @@ L.OSM.Map = L.Map.extend({ initialize: function (id, options) { L.Map.prototype.initialize.call(this, id, options); - const layerCredits = { - mapnik: { - id: "make_a_donation", - href: "https://supporting.openstreetmap.org", - donate: true + const layerDefinitions = [ + { + leafletOsmId: "Mapnik", + code: "M", + keyId: "mapnik", + nameId: "standard", + credit: { + id: "make_a_donation", + href: "https://supporting.openstreetmap.org", + donate: true + } + }, + { + leafletOsmId: "CyclOSM", + code: "Y", + keyId: "cyclosm", + nameId: "cyclosm", + credit: { + id: "cyclosm_credit", + children: { + cyclosm_link: { + id: "cyclosm_name", + href: "https://www.cyclosm.org" + }, + osm_france_link: { + id: "osm_france", + href: "https://openstreetmap.fr/" + } + } + } }, - cyclosm: { - id: "cyclosm_credit", - children: { - cyclosm_link: { - id: "cyclosm_name", - href: "https://www.cyclosm.org" - }, - osm_france_link: { - id: "osm_france", - href: "https://openstreetmap.fr/" + { + leafletOsmId: "CycleMap", + code: "C", + keyId: "cyclemap", + nameId: "cycle_map", + apiKeyId: "THUNDERFOREST_KEY", + credit: { + id: "thunderforest_credit", + children: { + thunderforest_link: { + id: "andy_allan", + href: "https://www.thunderforest.com/" + } } } }, - thunderforest: { - id: "thunderforest_credit", - children: { - thunderforest_link: { - id: "andy_allan", - href: "https://www.thunderforest.com/" + { + leafletOsmId: "TransportMap", + code: "T", + keyId: "transportmap", + nameId: "transport_map", + apiKeyId: "THUNDERFOREST_KEY", + credit: { + id: "thunderforest_credit", + children: { + thunderforest_link: { + id: "andy_allan", + href: "https://www.thunderforest.com/" + } } } }, - tracestrack: { - id: "tracestrack_credit", - children: { - tracestrack_link: { - id: "tracestrack", - href: "https://www.tracestrack.com/" + { + leafletOsmId: "TracestrackTopo", + code: "P", + keyId: "tracestracktopo", + nameId: "tracestracktop_topo", + apiKeyId: "TRACESTRACK_KEY", + credit: { + id: "tracestrack_credit", + children: { + tracestrack_link: { + id: "tracestrack", + href: "https://www.tracestrack.com/" + } } } }, - hotosm: { - id: "hotosm_credit", - children: { - hotosm_link: { - id: "hotosm_name", - href: "https://www.hotosm.org/" - }, - osm_france_link: { - id: "osm_france", - href: "https://openstreetmap.fr/" + { + leafletOsmId: "HOT", + code: "H", + keyId: "hot", + nameId: "hot", + credit: { + id: "hotosm_credit", + children: { + hotosm_link: { + id: "hotosm_name", + href: "https://www.hotosm.org/" + }, + osm_france_link: { + id: "osm_france", + href: "https://openstreetmap.fr/" + } } } } - }; + ]; this.baseLayers = []; - this.baseLayers.push(new L.OSM.Mapnik({ - attribution: makeAttribution("mapnik"), - code: "M", - keyid: "mapnik", - name: I18n.t("javascripts.map.base.standard") - })); - - this.baseLayers.push(new L.OSM.CyclOSM({ - attribution: makeAttribution("cyclosm"), - code: "Y", - keyid: "cyclosm", - name: I18n.t("javascripts.map.base.cyclosm") - })); - - if (OSM.THUNDERFOREST_KEY) { - this.baseLayers.push(new L.OSM.CycleMap({ - attribution: makeAttribution("thunderforest"), - apikey: OSM.THUNDERFOREST_KEY, - code: "C", - keyid: "cyclemap", - name: I18n.t("javascripts.map.base.cycle_map") - })); + for (const layerDefinition of layerDefinitions) { + if (layerDefinition.apiKeyId && !OSM[layerDefinition.apiKeyId]) continue; - this.baseLayers.push(new L.OSM.TransportMap({ - attribution: makeAttribution("thunderforest"), - apikey: OSM.THUNDERFOREST_KEY, - code: "T", - keyid: "transportmap", - name: I18n.t("javascripts.map.base.transport_map") - })); - } + const layerOptions = { + attribution: makeAttribution(layerDefinition.credit), + code: layerDefinition.code, + keyid: layerDefinition.keyId, + name: I18n.t(`javascripts.map.base.${layerDefinition.nameId}`) + }; + if (layerDefinition.apiKeyId) { + layerOptions.apikey = OSM[layerDefinition.apiKeyId]; + } - if (OSM.TRACESTRACK_KEY) { - this.baseLayers.push(new L.OSM.TracestrackTopo({ - attribution: makeAttribution("tracestrack"), - apikey: OSM.TRACESTRACK_KEY, - code: "P", - keyid: "tracestracktopo", - name: I18n.t("javascripts.map.base.tracestracktop_topo") - })); + const layer = new L.OSM[layerDefinition.leafletOsmId](layerOptions); + this.baseLayers.push(layer); } - this.baseLayers.push(new L.OSM.HOT({ - attribution: makeAttribution("hotosm"), - code: "H", - keyid: "hot", - name: I18n.t("javascripts.map.base.hot") - })); - this.noteLayer = new L.FeatureGroup(); this.noteLayer.options = { code: "N" }; @@ -135,8 +151,7 @@ L.OSM.Map = L.Map.extend({ } }); - function makeAttribution(id) { - const layerCredit = layerCredits[id]; + function makeAttribution(credit) { let attribution = ""; attribution += I18n.t("javascripts.map.copyright_text", { @@ -146,8 +161,8 @@ L.OSM.Map = L.Map.extend({ }).prop("outerHTML") }); - attribution += layerCredit.donate ? " ♥ " : ". "; - attribution += makeCredit(layerCredit); + attribution += credit.donate ? " ♥ " : ". "; + attribution += makeCredit(credit); attribution += ". "; attribution += $("", { From 126a987aa8b2d95b90b0970fba7d4e6df1cfaac0 Mon Sep 17 00:00:00 2001 From: Anton Khorev Date: Fri, 22 Nov 2024 01:18:55 +0300 Subject: [PATCH 2/2] Move layer definitions to yml --- app/assets/javascripts/leaflet.map.js | 102 +------------------------- app/assets/javascripts/osm.js.erb | 2 + config/layers.yml | 72 ++++++++++++++++++ 3 files changed, 75 insertions(+), 101 deletions(-) create mode 100644 config/layers.yml diff --git a/app/assets/javascripts/leaflet.map.js b/app/assets/javascripts/leaflet.map.js index d053a81ce4..78f43b73a0 100644 --- a/app/assets/javascripts/leaflet.map.js +++ b/app/assets/javascripts/leaflet.map.js @@ -15,109 +15,9 @@ L.OSM.Map = L.Map.extend({ initialize: function (id, options) { L.Map.prototype.initialize.call(this, id, options); - const layerDefinitions = [ - { - leafletOsmId: "Mapnik", - code: "M", - keyId: "mapnik", - nameId: "standard", - credit: { - id: "make_a_donation", - href: "https://supporting.openstreetmap.org", - donate: true - } - }, - { - leafletOsmId: "CyclOSM", - code: "Y", - keyId: "cyclosm", - nameId: "cyclosm", - credit: { - id: "cyclosm_credit", - children: { - cyclosm_link: { - id: "cyclosm_name", - href: "https://www.cyclosm.org" - }, - osm_france_link: { - id: "osm_france", - href: "https://openstreetmap.fr/" - } - } - } - }, - { - leafletOsmId: "CycleMap", - code: "C", - keyId: "cyclemap", - nameId: "cycle_map", - apiKeyId: "THUNDERFOREST_KEY", - credit: { - id: "thunderforest_credit", - children: { - thunderforest_link: { - id: "andy_allan", - href: "https://www.thunderforest.com/" - } - } - } - }, - { - leafletOsmId: "TransportMap", - code: "T", - keyId: "transportmap", - nameId: "transport_map", - apiKeyId: "THUNDERFOREST_KEY", - credit: { - id: "thunderforest_credit", - children: { - thunderforest_link: { - id: "andy_allan", - href: "https://www.thunderforest.com/" - } - } - } - }, - { - leafletOsmId: "TracestrackTopo", - code: "P", - keyId: "tracestracktopo", - nameId: "tracestracktop_topo", - apiKeyId: "TRACESTRACK_KEY", - credit: { - id: "tracestrack_credit", - children: { - tracestrack_link: { - id: "tracestrack", - href: "https://www.tracestrack.com/" - } - } - } - }, - { - leafletOsmId: "HOT", - code: "H", - keyId: "hot", - nameId: "hot", - credit: { - id: "hotosm_credit", - children: { - hotosm_link: { - id: "hotosm_name", - href: "https://www.hotosm.org/" - }, - osm_france_link: { - id: "osm_france", - href: "https://openstreetmap.fr/" - } - } - } - } - ]; - this.baseLayers = []; - for (const layerDefinition of layerDefinitions) { + for (const layerDefinition of OSM.LAYER_DEFINITIONS) { if (layerDefinition.apiKeyId && !OSM[layerDefinition.apiKeyId]) continue; const layerOptions = { diff --git a/app/assets/javascripts/osm.js.erb b/app/assets/javascripts/osm.js.erb index e08528f845..e9c09c79f9 100644 --- a/app/assets/javascripts/osm.js.erb +++ b/app/assets/javascripts/osm.js.erb @@ -1,5 +1,6 @@ //= depend_on settings.yml //= depend_on settings.local.yml +//= depend_on layers.yml //= depend_on key.yml //= require qs/dist/qs @@ -30,6 +31,7 @@ OSM = { TRACESTRACK_KEY: <%= Settings.tracestrack_key.to_json %>, <% end %> + LAYER_DEFINITIONS: <%= YAML.load_file(Rails.root.join("config/layers.yml")).to_json %>, LAYERS_WITH_MAP_KEY: <%= YAML.load_file(Rails.root.join("config/key.yml")).keys.to_json %>, MARKER_GREEN: <%= image_path("marker-green.png").to_json %>, diff --git a/config/layers.yml b/config/layers.yml new file mode 100644 index 0000000000..3b5bc944fe --- /dev/null +++ b/config/layers.yml @@ -0,0 +1,72 @@ +- leafletOsmId: "Mapnik" + code: "M" + keyId: "mapnik" + nameId: "standard" + credit: + id: "make_a_donation" + href: "https://supporting.openstreetmap.org" + donate: true + +- leafletOsmId: "CyclOSM" + code: "Y" + keyId: "cyclosm" + nameId: "cyclosm" + credit: + id: "cyclosm_credit" + children: + cyclosm_link: + id: "cyclosm_name" + href: "https://www.cyclosm.org" + osm_france_link: + id: "osm_france" + href: "https://openstreetmap.fr/" + +- leafletOsmId: "CycleMap" + code: "C" + keyId: "cyclemap" + nameId: "cycle_map" + apiKeyId: "THUNDERFOREST_KEY" + credit: + id: "thunderforest_credit" + children: + thunderforest_link: + id: "andy_allan" + href: "https://www.thunderforest.com/" + +- leafletOsmId: "TransportMap" + code: "T" + keyId: "transportmap" + nameId: "transport_map" + apiKeyId: "THUNDERFOREST_KEY" + credit: + id: "thunderforest_credit" + children: + thunderforest_link: + id: "andy_allan" + href: "https://www.thunderforest.com/" + +- leafletOsmId: "TracestrackTopo" + code: "P" + keyId: "tracestracktopo" + nameId: "tracestracktop_topo" + apiKeyId: "TRACESTRACK_KEY" + credit: + id: "tracestrack_credit" + children: + tracestrack_link: + id: "tracestrack" + href: "https://www.tracestrack.com/" + +- leafletOsmId: "HOT" + code: "H" + keyId: "hot" + nameId: "hot" + credit: + id: "hotosm_credit" + children: + hotosm_link: + id: "hotosm_name" + href: "https://www.hotosm.org/" + osm_france_link: + id: "osm_france" + href: "https://openstreetmap.fr/"