From eb35b6b8d8248a0e4eea1f134def3d439e93493a Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Wed, 28 May 2025 23:52:00 +0200
Subject: [PATCH] Write layer sidebar in erb template

---
 app/abilities/ability.rb                   |  2 +-
 app/assets/javascripts/leaflet.layers.js   | 93 ++++++----------------
 app/controllers/layers_panes_controller.rb |  9 +++
 app/views/layers_panes/show.html.erb       | 30 +++++++
 config/routes.rb                           |  1 +
 5 files changed, 67 insertions(+), 68 deletions(-)
 create mode 100644 app/controllers/layers_panes_controller.rb
 create mode 100644 app/views/layers_panes/show.html.erb

diff --git a/app/abilities/ability.rb b/app/abilities/ability.rb
index f68449aa8..18f8ad93a 100644
--- a/app/abilities/ability.rb
+++ b/app/abilities/ability.rb
@@ -4,7 +4,7 @@ class Ability
   include CanCan::Ability
 
   def initialize(user)
-    can :read, [:feature_query, :legend_pane]
+    can :read, [:feature_query, :layers_pane, :legend_pane]
     can :read, [Node, Way, Relation, OldNode, OldWay, OldRelation]
     can [:show, :create], Note
     can :read, :directions
diff --git a/app/assets/javascripts/leaflet.layers.js b/app/assets/javascripts/leaflet.layers.js
index 82f477973..cbd704fe5 100644
--- a/app/assets/javascripts/leaflet.layers.js
+++ b/app/assets/javascripts/leaflet.layers.js
@@ -4,31 +4,19 @@ L.OSM.layers = function (options) {
   control.onAddPane = function (map, button, $ui, toggle) {
     const layers = options.layers;
 
-    const baseSection = $("<div>")
-      .attr("class", "base-layers d-grid gap-3 p-3 border-bottom border-secondary-subtle")
-      .appendTo($ui);
+    control.onContentLoaded = function () {
+      $ui.find(".base-layers>div").each(initBaseLayer);
+      initOverlays();
+    };
+    control.loadContent();
 
-    layers.forEach(function (layer, i) {
-      const id = "map-ui-layer-" + i;
-
-      const buttonContainer = $("<div class='position-relative'>")
-        .appendTo(baseSection);
-
-      const mapContainer = $("<div class='position-absolute top-0 start-0 bottom-0 end-0 z-0 bg-body-secondary'>")
-        .appendTo(buttonContainer);
-
-      const input = $("<input type='radio' class='btn-check' name='layer'>")
-        .prop("id", id)
-        .prop("checked", map.hasLayer(layer))
-        .appendTo(buttonContainer);
-
-      const item = $("<label class='btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute p-0 h-100 w-100 overflow-hidden'>")
-        .prop("for", id)
-        .append($("<span class='badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base'>").append(layer.options.name))
-        .appendTo(buttonContainer);
+    function initBaseLayer() {
+      const [container, input, item] = this.children;
+      const layer = layers.find(l => l.options.layerId === container.dataset.layer);
+      input.checked = map.hasLayer(layer);
 
       map.whenReady(function () {
-        const miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false })
+        const miniMap = L.map(container, { attributionControl: false, zoomControl: false, keyboard: false })
           .addLayer(new layer.constructor(layer.options));
 
         miniMap.dragging.disable();
@@ -59,7 +47,7 @@ L.OSM.layers = function (options) {
         }
       });
 
-      input.on("click", function () {
+      $(input).on("click", function () {
         for (const other of layers) {
           if (other !== layer) {
             map.removeLayer(other);
@@ -68,51 +56,26 @@ L.OSM.layers = function (options) {
         map.addLayer(layer);
       });
 
-      item.on("dblclick", toggle);
+      $(item).on("dblclick", toggle);
 
       map.on("baselayerchange", function () {
-        input.prop("checked", map.hasLayer(layer));
+        input.checked = map.hasLayer(layer);
       });
-    });
-
-    if (OSM.STATUS !== "api_offline" && OSM.STATUS !== "database_offline") {
-      const overlaySection = $("<div>")
-        .attr("class", "overlay-layers p-3")
-        .appendTo($ui);
-
-      $("<p>")
-        .text(OSM.i18n.t("javascripts.map.layers.overlays"))
-        .attr("class", "text-body-secondary small mb-2")
-        .appendTo(overlaySection);
-
-      const addOverlay = function (layer, name, maxArea) {
-        const item = $("<div>")
-          .attr("class", "form-check")
-          .appendTo(overlaySection);
-
-        if (name === "notes" || name === "data") {
-          item
-            .attr("title", OSM.i18n.t("javascripts.site.map_" + name + "_zoom_in_tooltip"))
-            .tooltip("disable");
-        }
+    }
 
-        const label = $("<label>")
-          .attr("class", "form-check-label")
-          .attr("id", `label-layers-${name}`)
-          .appendTo(item);
+    function initOverlays() {
+      $ui.find(".overlay-layers div.form-check").each(function () {
+        const item = this;
+        const layer = map[this.dataset.layerId];
+        const input = this.firstElementChild.firstElementChild;
+        $(item).tooltip("disable");
 
         let checked = map.hasLayer(layer);
 
-        const input = $("<input>")
-          .attr("type", "checkbox")
-          .attr("class", "form-check-input")
-          .prop("checked", checked)
-          .appendTo(label);
-
-        label.append(" ", OSM.i18n.t("javascripts.map.layers." + name));
+        input.checked = checked;
 
-        input.on("change", function () {
-          checked = input.is(":checked");
+        $(input).on("change", function () {
+          checked = input.checked;
           if (layer.cancelLoading) {
             layer.cancelLoading();
           }
@@ -126,11 +89,11 @@ L.OSM.layers = function (options) {
         });
 
         map.on("overlayadd overlayremove", function () {
-          input.prop("checked", map.hasLayer(layer));
+          input.checked = map.hasLayer(layer);
         });
 
         map.on("zoomend", function () {
-          const disabled = map.getBounds().getSize() >= maxArea;
+          const disabled = map.getBounds().getSize() >= item.dataset.maxArea;
           $(input).prop("disabled", disabled);
 
           if (disabled && $(input).is(":checked")) {
@@ -146,11 +109,7 @@ L.OSM.layers = function (options) {
             .toggleClass("disabled", disabled)
             .tooltip(disabled ? "enable" : "disable");
         });
-      };
-
-      addOverlay(map.noteLayer, "notes", OSM.MAX_NOTE_REQUEST_AREA);
-      addOverlay(map.dataLayer, "data", OSM.MAX_REQUEST_AREA);
-      addOverlay(map.gpsLayer, "gps", Number.POSITIVE_INFINITY);
+      });
     }
   };
 
diff --git a/app/controllers/layers_panes_controller.rb b/app/controllers/layers_panes_controller.rb
new file mode 100644
index 000000000..5034fd71a
--- /dev/null
+++ b/app/controllers/layers_panes_controller.rb
@@ -0,0 +1,9 @@
+class LayersPanesController < ApplicationController
+  before_action :authorize_web
+  before_action :set_locale
+  authorize_resource :class => false
+
+  def show
+    render :layout => false
+  end
+end
diff --git a/app/views/layers_panes/show.html.erb b/app/views/layers_panes/show.html.erb
new file mode 100644
index 000000000..c75f87a03
--- /dev/null
+++ b/app/views/layers_panes/show.html.erb
@@ -0,0 +1,30 @@
+<div class="base-layers d-grid gap-3 p-3 border-bottom border-secondary-subtle">
+  <% MapLayers.full_definitions("config/layers.yml").each do |layer| %>
+    <div class="position-relative">
+      <div class="position-absolute top-0 start-0 bottom-0 end-0 z-0 bg-body-secondary" data-layer="<%= layer["layerId"] %>"></div>
+      <input type="radio" class="btn-check" name="layer" id="map-ui-layer-<%= layer["layerId"] %>"></input>
+      <label class="btn btn-outline-primary border-4 rounded-3 bg-transparent position-absolute p-0 h-100 w-100 overflow-hidden" for="map-ui-layer-<%= layer["layerId"] %>">
+        <span class="badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base">
+          <%= t "javascripts.map.base.#{layer['nameId']}" %>
+        </span>
+      </label>
+    </div>
+  <% end %>
+</div>
+<% if Settings.status != "api_offline" && Settings.status != "database_offline" %>
+  <div class="overlay-layers p-3">
+    <p class="text-body-secondary small mb-2"><%= t "javascripts.map.layers.overlays" %></p>
+    <% [{ :layer_id => "noteLayer", :name => "notes", :max_area => Settings.max_note_request_area },
+        { :layer_id => "dataLayer", :name => "data", :max_area => Settings.max_request_area },
+        { :layer_id => "gpsLayer", :name => "gps" }].each do |layer|
+         options = { :data => layer, :class => "form-check" }
+         options[:title] = t("javascripts.site.map_#{layer[:name]}_zoom_in_tooltip") if layer[:max_area] %>
+      <%= tag.div(**options) do %>
+        <label id="<%= "label-layers-#{layer[:name]}" %>" class="form-check-label">
+          <input type="checkbox" class="form-check-input">
+          <%= t "javascripts.map.layers.#{layer[:name]}" %>
+        </label>
+      <% end
+    end %>
+  </div>
+<% end %>
diff --git a/config/routes.rb b/config/routes.rb
index 834c60fa5..83262a70f 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -202,6 +202,7 @@ OpenStreetMap::Application.routes.draw do
   post "/login" => "sessions#create"
   match "/logout" => "sessions#destroy", :via => [:get, :post]
   get "/offline" => "site#offline"
+  resource :layers_pane, :path => "/panes/layers", :only => :show
   resource :legend_pane, :path => "/panes/legend", :only => :show
   get "/id" => "site#id"
   resource :feature_query, :path => "query", :only => :show
-- 
2.39.5