X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/aebacc88de18c24c583a12b589eb98cf0b826627..e2e61692ea04fc156221082aeddc21ea18facdec:/app/assets/javascripts/embed.js.erb diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index 34a8b68bc..297259043 100644 --- a/app/assets/javascripts/embed.js.erb +++ b/app/assets/javascripts/embed.js.erb @@ -6,19 +6,21 @@ //= require i18n //= require i18n/embed +const OSM = { i18n: I18n }; + if (navigator.languages) { - I18n.locale = navigator.languages[0]; + OSM.i18n.locale = navigator.languages[0]; } else if (navigator.language) { - I18n.locale = navigator.language; + OSM.i18n.locale = navigator.language; } -I18n.default_locale = <%= I18n.default_locale.to_json %>; -I18n.fallbacks = true; +OSM.i18n.default_locale = <%= I18n.default_locale.to_json %>; +OSM.i18n.fallbacks = true; window.onload = function () { - const args = Object.fromEntries(new URLSearchParams(window.location.search)); + const args = Object.fromEntries(new URLSearchParams(location.search)); - const tileOptions = { + const options = { mapnik: { <% if Settings.key?(:tile_cdn_url) %> url: <%= Settings.tile_cdn_url.to_json %> @@ -26,36 +28,16 @@ window.onload = function () { } }; - const apiKeys = { -<% if Settings.key?(:thunderforest_key) %> - THUNDERFOREST_KEY: <%= Settings.thunderforest_key.to_json %> -<% end %> - }; - - var map = L.map("map"); + const map = L.map("map"); map.attributionControl.setPrefix(""); map.removeControl(map.attributionControl); const isDarkTheme = args.theme === "dark" || (args.theme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches); - 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"], - darkLayer: entry["leafletOsmDarkId"], - apiKeyId: entry["apiKeyId"] - }.compact - end.to_json - %>; + const layers = <%= MapLayers::embed_definitions("config/layers.yml").to_json %>; const layerId = (args.layer || "").replaceAll(" ", ""); const layerConfig = layers[layerId] || layers.mapnik; - const { layer, ...options } = { - layer: layerConfig.darkLayer && isDarkTheme ? layerConfig.darkLayer : layerConfig.layer, - apikey: apiKeys[layerConfig.apiKeyId], - ...tileOptions[layerId] - }; - new L.OSM[layer](options).addTo(map); + const layer = (isDarkTheme && layerConfig.leafletOsmDarkId) || layerConfig.leafletOsmId; + new L.OSM[layer]({ apikey: layerConfig.apikey, ...options[layerId] }).addTo(map); if (args.marker) { L.marker(args.marker.split(","), { icon: L.icon({ @@ -76,11 +58,11 @@ window.onload = function () { L.Control.OSMReportAProblem = L.Control.Attribution.extend({ options: { position: "bottomright", - prefix: `${I18n.t("javascripts.embed.report_problem")}` + prefix: `${OSM.i18n.t("javascripts.embed.report_problem")}` }, onAdd: function (map) { - var container = L.Control.Attribution.prototype.onAdd.call(this, map); + const container = L.Control.Attribution.prototype.onAdd.call(this, map); map.on("moveend", this._update, this);