From: Tom Hughes Date: Sun, 2 Feb 2025 10:11:23 +0000 (+0000) Subject: Merge remote-tracking branch 'upstream/pull/5581' X-Git-Tag: live~387 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/8f387236cee2e842f695b287ae8a85c365bddf9c?hp=4b6b49801c63424b08c582d349511a6b1e05354f Merge remote-tracking branch 'upstream/pull/5581' --- diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index ef6f00670..44bb1fef5 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) { diff --git a/app/assets/javascripts/index/layers/data.js b/app/assets/javascripts/index/layers/data.js index e1246ca6c..dc522af41 100644 --- a/app/assets/javascripts/index/layers/data.js +++ b/app/assets/javascripts/index/layers/data.js @@ -1,6 +1,6 @@ OSM.initializeDataLayer = function (map) { - var loadedBounds; - var dataLayer = map.dataLayer; + let dataLoader, loadedBounds; + const dataLayer = map.dataLayer; dataLayer.setStyle({ way: { @@ -32,6 +32,8 @@ OSM.initializeDataLayer = function (map) { }); dataLayer.on("remove", function () { + if (dataLoader) dataLoader.abort(); + dataLoader = null; map.off("moveend", updateData); $("#browse_status").empty(); map.fire("overlayremove", { layer: this }); @@ -71,14 +73,10 @@ OSM.initializeDataLayer = function (map) { $("