From b30b13b5b6da15cd62fc3230e76f72ae2961ca0e Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 29 Jan 2025 01:08:27 +0100 Subject: [PATCH 1/6] Refactor embed.js.erb with layers.yml --- app/assets/javascripts/embed.js.erb | 60 +++++++++++++---------------- 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index ef6f006709..9b04ce904a 100644 --- a/app/assets/javascripts/embed.js.erb +++ b/app/assets/javascripts/embed.js.erb @@ -15,24 +15,19 @@ I18n.default_locale = <%= I18n.default_locale.to_json %>; I18n.fallbacks = true; window.onload = function () { - var query = (window.location.search || "?").slice(1), - args = {}; + const args = Object.fromEntries(new URLSearchParams(window.location.search)); - var pairs = query.split("&"); - for (var i = 0; i < pairs.length; i++) { - var parts = pairs[i].split("="); - args[parts[0]] = decodeURIComponent(parts[1] || ""); - } - - var mapnikOptions = { + const tileOptions = { + mapnik: { <% if Settings.key?(:tile_cdn_url) %> - url: <%= Settings.tile_cdn_url.to_json %> + url: <%= Settings.tile_cdn_url.to_json %> <% end %> + } }; - var thunderforestOptions = { + const apiKeys = { <% if Settings.key?(:thunderforest_key) %> - apikey: <%= Settings.thunderforest_key.to_json %> + THUNDERFOREST_KEY: <%= Settings.thunderforest_key.to_json %> <% end %> }; @@ -40,17 +35,23 @@ window.onload = function () { map.attributionControl.setPrefix(""); map.removeControl(map.attributionControl); - if (args.layer === "cyclosm") { - new L.OSM.CyclOSM().addTo(map); - } else if (args.layer === "cyclemap" || args.layer === "cycle map") { - new L.OSM.CycleMap(thunderforestOptions).addTo(map); - } else if (args.layer === "transportmap") { - new L.OSM.TransportMap(thunderforestOptions).addTo(map); - } else if (args.layer === "hot") { - new L.OSM.HOT().addTo(map); - } else { - new L.OSM.Mapnik(mapnikOptions).addTo(map); - } + const layers = <%= +(YAML.load_file(Rails.root.join("config/layers.yml")) + .select { |entry| entry["canEmbed"] } + .each_with_object({}) do |entry, obj| + obj[entry["layerId"]] = { + layer: entry["leafletOsmId"], + apiKeyId: entry["apiKeyId"] + }.compact + end).to_json +%>; + const layerId = (args.layer || "").replaceAll(" ", ""); + const layerConfig = layers[layerId] || layers.mapnik; + const { layer, ...layerOptions } = { + layer: layerConfig.layer, + apikey: apiKeys[layerConfig.apiKeyId] + }; + new L.OSM[layer]({ ...layerOptions, ...tileOptions[layerId] }).addTo(map); if (args.marker) { L.marker(args.marker.split(","), { icon: L.icon({ @@ -62,15 +63,8 @@ window.onload = function () { }) }).addTo(map); } - if (args.bbox) { - var bbox = args.bbox.split(","); - map.fitBounds([ - L.latLng(bbox[1], bbox[0]), - L.latLng(bbox[3], bbox[2]) - ]); - } else { - map.fitWorld(); - } + const bbox = (args.bbox || "-180,-90,180,90").split(","); + map.fitBounds([[bbox[1], bbox[0]], [bbox[3], bbox[2]]]); map.addControl(new L.Control.OSMReportAProblem()); }; @@ -78,7 +72,7 @@ window.onload = function () { L.Control.OSMReportAProblem = L.Control.Attribution.extend({ options: { position: "bottomright", - prefix: "" + I18n.t("javascripts.embed.report_problem") + "" + prefix: `${I18n.t("javascripts.embed.report_problem")}` }, onAdd: function (map) { From 4683f6a16260e270a69f04c8ae8017ae2f42ed86 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 29 Jan 2025 05:45:51 +0100 Subject: [PATCH 2/6] Consolidate options destructuring --- app/assets/javascripts/embed.js.erb | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index 9b04ce904a..4fdcd959c6 100644 --- a/app/assets/javascripts/embed.js.erb +++ b/app/assets/javascripts/embed.js.erb @@ -47,11 +47,12 @@ window.onload = function () { %>; const layerId = (args.layer || "").replaceAll(" ", ""); const layerConfig = layers[layerId] || layers.mapnik; - const { layer, ...layerOptions } = { + const { layer, ...options } = { layer: layerConfig.layer, - apikey: apiKeys[layerConfig.apiKeyId] + apikey: apiKeys[layerConfig.apiKeyId], + ...tileOptions[layerId] }; - new L.OSM[layer]({ ...layerOptions, ...tileOptions[layerId] }).addTo(map); + new L.OSM[layer](options).addTo(map); if (args.marker) { L.marker(args.marker.split(","), { icon: L.icon({ From 8b2e6b8541964865b9c768d5c9a13713bf15b656 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 29 Jan 2025 08:09:23 +0100 Subject: [PATCH 3/6] Add Sprockets directive --- app/assets/javascripts/embed.js.erb | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index 4fdcd959c6..012a1153af 100644 --- a/app/assets/javascripts/embed.js.erb +++ b/app/assets/javascripts/embed.js.erb @@ -1,5 +1,6 @@ //= depend_on settings.yml //= depend_on settings.local.yml +//= depend_on layers.yml //= require leaflet/dist/leaflet-src //= require leaflet.osm //= require i18n From 36ce71f553947059b44ad0cf6d0f1b37b68650c4 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Thu, 30 Jan 2025 04:49:56 +0100 Subject: [PATCH 4/6] Improve formatting --- app/assets/javascripts/embed.js.erb | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index 012a1153af..44bb1fef5d 100644 --- a/app/assets/javascripts/embed.js.erb +++ b/app/assets/javascripts/embed.js.erb @@ -37,15 +37,15 @@ window.onload = function () { map.removeControl(map.attributionControl); const layers = <%= -(YAML.load_file(Rails.root.join("config/layers.yml")) - .select { |entry| entry["canEmbed"] } - .each_with_object({}) do |entry, obj| - obj[entry["layerId"]] = { - layer: entry["leafletOsmId"], - apiKeyId: entry["apiKeyId"] - }.compact - end).to_json -%>; + YAML.load_file(Rails.root.join("config/layers.yml")) + .select { |entry| entry["canEmbed"] } + .each_with_object({}) do |entry, obj| + obj[entry["layerId"]] = { + layer: entry["leafletOsmId"], + apiKeyId: entry["apiKeyId"] + }.compact + end.to_json + %>; const layerId = (args.layer || "").replaceAll(" ", ""); const layerConfig = layers[layerId] || layers.mapnik; const { layer, ...options } = { From 50e5d49bc44181425cdfd798ab75ca108d1bf8a1 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 29 Jan 2025 01:08:27 +0100 Subject: [PATCH 5/6] Refactor embed.js.erb with layers.yml --- app/assets/javascripts/embed.js.erb | 62 ++++++++++++++--------------- 1 file changed, 29 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index ef6f006709..44bb1fef5d 100644 --- a/app/assets/javascripts/embed.js.erb +++ b/app/assets/javascripts/embed.js.erb @@ -1,5 +1,6 @@ //= depend_on settings.yml //= depend_on settings.local.yml +//= depend_on layers.yml //= require leaflet/dist/leaflet-src //= require leaflet.osm //= require i18n @@ -15,24 +16,19 @@ I18n.default_locale = <%= I18n.default_locale.to_json %>; I18n.fallbacks = true; window.onload = function () { - var query = (window.location.search || "?").slice(1), - args = {}; + const args = Object.fromEntries(new URLSearchParams(window.location.search)); - var pairs = query.split("&"); - for (var i = 0; i < pairs.length; i++) { - var parts = pairs[i].split("="); - args[parts[0]] = decodeURIComponent(parts[1] || ""); - } - - var mapnikOptions = { + const tileOptions = { + mapnik: { <% if Settings.key?(:tile_cdn_url) %> - url: <%= Settings.tile_cdn_url.to_json %> + url: <%= Settings.tile_cdn_url.to_json %> <% end %> + } }; - var thunderforestOptions = { + const apiKeys = { <% if Settings.key?(:thunderforest_key) %> - apikey: <%= Settings.thunderforest_key.to_json %> + THUNDERFOREST_KEY: <%= Settings.thunderforest_key.to_json %> <% end %> }; @@ -40,17 +36,24 @@ window.onload = function () { map.attributionControl.setPrefix(""); map.removeControl(map.attributionControl); - if (args.layer === "cyclosm") { - new L.OSM.CyclOSM().addTo(map); - } else if (args.layer === "cyclemap" || args.layer === "cycle map") { - new L.OSM.CycleMap(thunderforestOptions).addTo(map); - } else if (args.layer === "transportmap") { - new L.OSM.TransportMap(thunderforestOptions).addTo(map); - } else if (args.layer === "hot") { - new L.OSM.HOT().addTo(map); - } else { - new L.OSM.Mapnik(mapnikOptions).addTo(map); - } + const layers = <%= + YAML.load_file(Rails.root.join("config/layers.yml")) + .select { |entry| entry["canEmbed"] } + .each_with_object({}) do |entry, obj| + obj[entry["layerId"]] = { + layer: entry["leafletOsmId"], + apiKeyId: entry["apiKeyId"] + }.compact + end.to_json + %>; + const layerId = (args.layer || "").replaceAll(" ", ""); + const layerConfig = layers[layerId] || layers.mapnik; + const { layer, ...options } = { + layer: layerConfig.layer, + apikey: apiKeys[layerConfig.apiKeyId], + ...tileOptions[layerId] + }; + new L.OSM[layer](options).addTo(map); if (args.marker) { L.marker(args.marker.split(","), { icon: L.icon({ @@ -62,15 +65,8 @@ window.onload = function () { }) }).addTo(map); } - if (args.bbox) { - var bbox = args.bbox.split(","); - map.fitBounds([ - L.latLng(bbox[1], bbox[0]), - L.latLng(bbox[3], bbox[2]) - ]); - } else { - map.fitWorld(); - } + const bbox = (args.bbox || "-180,-90,180,90").split(","); + map.fitBounds([[bbox[1], bbox[0]], [bbox[3], bbox[2]]]); map.addControl(new L.Control.OSMReportAProblem()); }; @@ -78,7 +74,7 @@ window.onload = function () { L.Control.OSMReportAProblem = L.Control.Attribution.extend({ options: { position: "bottomright", - prefix: "" + I18n.t("javascripts.embed.report_problem") + "" + prefix: `${I18n.t("javascripts.embed.report_problem")}` }, onAdd: function (map) { From 4d1e5e82d8a8cdb76f6b64d69709bed77191b271 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner Date: Thu, 30 Jan 2025 07:38:19 +0100 Subject: [PATCH 6/6] Remove other whitespace in layerId too --- app/assets/javascripts/embed.js.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index 44bb1fef5d..27fc19dc93 100644 --- a/app/assets/javascripts/embed.js.erb +++ b/app/assets/javascripts/embed.js.erb @@ -46,7 +46,7 @@ window.onload = function () { }.compact end.to_json %>; - const layerId = (args.layer || "").replaceAll(" ", ""); + const layerId = (args.layer || "").replaceAll(/\s/g, ""); const layerConfig = layers[layerId] || layers.mapnik; const { layer, ...options } = { layer: layerConfig.layer,