diff --git a/app/assets/javascripts/embed.js.erb b/app/assets/javascripts/embed.js.erb index ef6f006709..27fc19dc93 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(/\s/g, ""); + 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) {