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) {