From de2605c17b064865821aef047ceff93bc964b28a Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Sun, 13 Jul 2025 02:23:38 +0200
Subject: [PATCH] Use svg symbols for map controls icons

---
 app/assets/images/map-controls/geolocate.svg |  3 +++
 app/assets/images/map-controls/layers.svg    |  3 +++
 app/assets/images/map-controls/legend.svg    |  3 +++
 app/assets/images/map-controls/note.svg      |  3 +++
 app/assets/images/map-controls/query.svg     |  4 ++++
 app/assets/images/map-controls/share.svg     |  3 +++
 app/assets/images/map-controls/zoomin.svg    |  3 +++
 app/assets/images/map-controls/zoomout.svg   |  3 +++
 app/views/dashboards/show.html.erb           |  2 +-
 app/views/diary_entries/_form.html.erb       |  2 +-
 app/views/layouts/_control_icons.html.erb    | 25 ++++----------------
 app/views/layouts/map.html.erb               |  3 +--
 app/views/profiles/locations/show.html.erb   |  2 +-
 app/views/site/_add_a_note.html.erb          | 12 +++++-----
 14 files changed, 39 insertions(+), 32 deletions(-)
 create mode 100644 app/assets/images/map-controls/geolocate.svg
 create mode 100644 app/assets/images/map-controls/layers.svg
 create mode 100644 app/assets/images/map-controls/legend.svg
 create mode 100644 app/assets/images/map-controls/note.svg
 create mode 100644 app/assets/images/map-controls/query.svg
 create mode 100644 app/assets/images/map-controls/share.svg
 create mode 100644 app/assets/images/map-controls/zoomin.svg
 create mode 100644 app/assets/images/map-controls/zoomout.svg

diff --git a/app/assets/images/map-controls/geolocate.svg b/app/assets/images/map-controls/geolocate.svg
new file mode 100644
index 000000000..97ee99249
--- /dev/null
+++ b/app/assets/images/map-controls/geolocate.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="M10 10v6h2L16 6V4H14L4 8v2Z" />
+</svg>
diff --git a/app/assets/images/map-controls/layers.svg b/app/assets/images/map-controls/layers.svg
new file mode 100644
index 000000000..58b21556a
--- /dev/null
+++ b/app/assets/images/map-controls/layers.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="M4.094 13.5 9.5 16h1l5.406-2.5L17 14v1l-6.5 3h-1L3 15V14l1.094-.5Zm0-4L9.5 12h1l5.406-2.5L17 10v1l-6.5 3h-1L3 11V10l1.094-.5ZM9.5 3h1L17 6V7l-6.5 3h-1L3 7V6L9.5 3Z" />
+</svg>
diff --git a/app/assets/images/map-controls/legend.svg b/app/assets/images/map-controls/legend.svg
new file mode 100644
index 000000000..82f2ed676
--- /dev/null
+++ b/app/assets/images/map-controls/legend.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="M9 3 8 4V6L9 7h2l1-1V4L11 3zM9 9 8 10v6l1 1h2l1-1V10L11 9z" />
+</svg>
diff --git a/app/assets/images/map-controls/note.svg b/app/assets/images/map-controls/note.svg
new file mode 100644
index 000000000..ea399fe6e
--- /dev/null
+++ b/app/assets/images/map-controls/note.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="M17 12H15v2H13v2h2v2h2V16h2V14H17V12ZM3 12H6l2 3 2-3h3l1-1V4L13 3H3L2 4v7Z" />
+</svg>
diff --git a/app/assets/images/map-controls/query.svg b/app/assets/images/map-controls/query.svg
new file mode 100644
index 000000000..c5b0e4b1d
--- /dev/null
+++ b/app/assets/images/map-controls/query.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="M3 1s9 7 9 7c-1.056.587-2.112 1.173-3.168 1.76l3.031 6.615c.346.753.015 1.643-.738 1.989-.753.345-1.643.014-1.989-.739L6.201 11.221C5.134 11.814 4.067 12.407 3 13V1z" />
+  <text x="12.5" y="18.512" font-family="Helvetica, sans-serif" font-weight="Bold" font-size="12">?</text>
+</svg>
diff --git a/app/assets/images/map-controls/share.svg b/app/assets/images/map-controls/share.svg
new file mode 100644
index 000000000..51fe226b1
--- /dev/null
+++ b/app/assets/images/map-controls/share.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="m15 2-1 1V5h-2c-6 0-6 7-6 7s2-4 6-4h2v2l1 1 4-4.5L15 2ZM2 6 1 7v9l1 1h10l1-1V10h-1c-.32 0-.66.073-1 .188V15H3V8h1.531c.344-.669.792-1.348 1.344-2H2Z" />
+</svg>
diff --git a/app/assets/images/map-controls/zoomin.svg b/app/assets/images/map-controls/zoomin.svg
new file mode 100644
index 000000000..e13512b82
--- /dev/null
+++ b/app/assets/images/map-controls/zoomin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="M16 8H12V4L11 3H10L9 4V8H5L4 9v1l1 1H9v4l1 1h1l1-1V11h4l1-1V9z" />
+</svg>
diff --git a/app/assets/images/map-controls/zoomout.svg b/app/assets/images/map-controls/zoomout.svg
new file mode 100644
index 000000000..b348b51f4
--- /dev/null
+++ b/app/assets/images/map-controls/zoomout.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+  <path d="M4 9v1l1 1H16l1-1V9L16 8H5Z" />
+</svg>
diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb
index cb52195f2..cad3c9c71 100644
--- a/app/views/dashboards/show.html.erb
+++ b/app/views/dashboards/show.html.erb
@@ -2,7 +2,7 @@
   <h1><%= t ".title" %></h1>
 <% end %>
 
-<svg class="d-none"><defs><%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout geolocate] } %></defs></svg>
+<svg class="d-none"><%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout geolocate] } %></svg>
 
 <div class="row">
   <div class="col-md order-md-last">
diff --git a/app/views/diary_entries/_form.html.erb b/app/views/diary_entries/_form.html.erb
index ab439e66c..a461841ce 100644
--- a/app/views/diary_entries/_form.html.erb
+++ b/app/views/diary_entries/_form.html.erb
@@ -5,7 +5,7 @@
 <fieldset>
   <legend><%= t ".location" -%></legend>
 
-  <svg class="d-none"><defs><%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout] } %></defs></svg>
+  <svg class="d-none"><%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout] } %></svg>
 
   <%= tag.div "", :id => "map", :class => "border border-secondary-subtle rounded mb-3 z-0", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
 
diff --git a/app/views/layouts/_control_icons.html.erb b/app/views/layouts/_control_icons.html.erb
index 5a4764e14..a9805723e 100644
--- a/app/views/layouts/_control_icons.html.erb
+++ b/app/views/layouts/_control_icons.html.erb
@@ -1,21 +1,4 @@
-<% paths = {
-     "zoomin" => { :d => "M16 8H12V4L11 3H10L9 4V8H5L4 9v1l1 1H9v4l1 1h1l1-1V11h4l1-1V9z" },
-     "zoomout" => { :d => "M4 9v1l1 1H16l1-1V9L16 8H5Z" },
-     "geolocate" => { :d => "M10 10v6h2L16 6V4H14L4 8v2Z" },
-     "layers" => { :d => "M4.094 13.5 9.5 16h1l5.406-2.5L17 14v1l-6.5 3h-1L3 15V14l1.094-.5Zm0-4L9.5 12h1l5.406-2.5L17 10v1l-6.5 3h-1L3 11V10l1.094-.5ZM9.5 3h1L17 6V7l-6.5 3h-1L3 7V6L9.5 3Z" },
-     "legend" => { :d => "M9 3 8 4V6L9 7h2l1-1V4L11 3zM9 9 8 10v6l1 1h2l1-1V10L11 9z" },
-     "share" => { :d => "m15 2-1 1V5h-2c-6 0-6 7-6 7s2-4 6-4h2v2l1 1 4-4.5L15 2ZM2 6 1 7v9l1 1h10l1-1V10h-1c-.32 0-.66.073-1 .188V15H3V8h1.531c.344-.669.792-1.348 1.344-2H2Z" },
-     "note" => { :d => "M17 12H15v2H13v2h2v2h2V16h2V14H17V12ZM3 12H6l2 3 2-3h3l1-1V4L13 3H3L2 4v7Z" }
-   }
-
-   icons.each do |icon| %>
-     <% if paths[icon] %>
-       <path id="icon-<%= icon %>" fill="currentColor" <%= tag.attributes(paths[icon]) %> />
-     <% end %>
-     <% if icon == "query" %>
-       <g id="icon-query" fill="currentColor">
-         <path d="M3 1s9 7 9 7c-1.056.587-2.112 1.173-3.168 1.76l3.031 6.615c.346.753.015 1.643-.738 1.989-.753.345-1.643.014-1.989-.739L6.201 11.221C5.134 11.814 4.067 12.407 3 13V1z" />
-         <text x="12.5" y="18.512" font-family="Helvetica, sans-serif" font-weight="Bold" font-size="12">?</text>
-       </g>
-     <% end %>
-   <% end %>
+<% icons ||= Rails.root.glob("app/assets/images/map-controls/*.svg").map { |f| File.basename(f, ".svg") } %>
+<% icons.each do |icon| %>
+  <%= inline_svg_tag "map-controls/#{icon}.svg", :id => "icon-#{icon}", :to_symbol => true %>
+<% end %>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index b23270794..71f39d274 100644
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -50,8 +50,7 @@
     <%= render :partial => "layouts/banner" %>
   </div>
 
-  <svg class="d-none"><defs><%= render :partial => "layouts/control_icons",
-                                       :locals => { :icons => %w[zoomin zoomout geolocate layers legend share note query] } %></defs></svg>
+  <svg class="d-none"><%= render :partial => "layouts/control_icons" %></svg>
 
   <noscript>
     <div class="mt-5 p-3">
diff --git a/app/views/profiles/locations/show.html.erb b/app/views/profiles/locations/show.html.erb
index 9d18226ff..75960a9fe 100644
--- a/app/views/profiles/locations/show.html.erb
+++ b/app/views/profiles/locations/show.html.erb
@@ -9,7 +9,7 @@
   <%= render :partial => "navigation" %>
 <% end %>
 
-<svg class="d-none"><defs><%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout geolocate] } %></defs></svg>
+<svg class="d-none"><%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout geolocate] } %></svg>
 
 <%= bootstrap_form_for current_user, :url => { :action => :update } do |f| %>
   <p id="home_message" class="text-body-secondary m-0<% if current_user.home_location? %> invisible<% end %>"><%= t ".no home location" %></p>
diff --git a/app/views/site/_add_a_note.html.erb b/app/views/site/_add_a_note.html.erb
index f545234e4..c2ea89d1a 100644
--- a/app/views/site/_add_a_note.html.erb
+++ b/app/views/site/_add_a_note.html.erb
@@ -1,9 +1,9 @@
 <p><%= t ".para_1" %></p>
 <p><%= t ".para_2_html",
-         :note_icon => (link_to new_note_path(:anchor => map_hash(params)), :title => t("javascripts.site.createnote_tooltip"),
-                                                                            :class => "d-inline-block rounded-1 text-white bg-black bg-opacity-75 border border-2 my-n1 align-text-bottom" do
-                          tag.svg :width => 20, :height => 20, :class => "d-block" do
-                            render :partial => "layouts/control_icons", :locals => { :icons => %w[note] }
-                          end
-                        end),
+         :note_icon => link_to(
+           inline_svg_tag("map-controls/note.svg"),
+           new_note_path(:anchor => map_hash(params)),
+           :title => t("javascripts.site.createnote_tooltip"),
+           :class => "d-inline-block rounded-1 text-white bg-black bg-opacity-75 border border-2 my-n1 align-text-bottom"
+         ),
          :map_link => link_to(t(".the_map"), root_path) %></p>
-- 
2.39.5