From 784b5bde9c3b4cd62718cd1c832cb04424878f05 Mon Sep 17 00:00:00 2001 From: Snehal Jadhav Date: Mon, 19 Jan 2026 01:24:14 +0530 Subject: [PATCH] Replace custom SVG map controls with Bootstrap Icons (#6695) --- 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/assets/javascripts/index/contextmenu.js | 4 ++-- app/assets/javascripts/leaflet.locate.js | 7 +------ app/assets/javascripts/leaflet.note.js | 6 +----- app/assets/javascripts/leaflet.query.js | 6 +----- app/assets/javascripts/leaflet.sidebar-pane.js | 12 +++++++----- app/assets/javascripts/leaflet.zoom.js | 9 +++------ .../maplibre.combinedcontrolgroup.js | 18 ++++++++++++++++++ app/assets/stylesheets/common.scss | 6 +++--- app/assets/stylesheets/maplibre-gl-all.scss | 18 +++--------------- app/views/dashboards/show.html.erb | 2 -- app/views/diary_entries/_form.html.erb | 1 - app/views/layouts/_control_icons.html.erb | 6 ------ app/views/layouts/map.html.erb | 1 - app/views/profiles/locations/show.html.erb | 1 - app/views/site/_add_a_note.html.erb | 4 ++-- 23 files changed, 41 insertions(+), 85 deletions(-) delete mode 100644 app/assets/images/map-controls/geolocate.svg delete mode 100644 app/assets/images/map-controls/layers.svg delete mode 100644 app/assets/images/map-controls/legend.svg delete mode 100644 app/assets/images/map-controls/note.svg delete mode 100644 app/assets/images/map-controls/query.svg delete mode 100644 app/assets/images/map-controls/share.svg delete mode 100644 app/assets/images/map-controls/zoomin.svg delete mode 100644 app/assets/images/map-controls/zoomout.svg delete mode 100644 app/views/layouts/_control_icons.html.erb diff --git a/app/assets/images/map-controls/geolocate.svg b/app/assets/images/map-controls/geolocate.svg deleted file mode 100644 index 97ee99249..000000000 --- a/app/assets/images/map-controls/geolocate.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/images/map-controls/layers.svg b/app/assets/images/map-controls/layers.svg deleted file mode 100644 index 58b21556a..000000000 --- a/app/assets/images/map-controls/layers.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/images/map-controls/legend.svg b/app/assets/images/map-controls/legend.svg deleted file mode 100644 index 82f2ed676..000000000 --- a/app/assets/images/map-controls/legend.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/images/map-controls/note.svg b/app/assets/images/map-controls/note.svg deleted file mode 100644 index ea399fe6e..000000000 --- a/app/assets/images/map-controls/note.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/images/map-controls/query.svg b/app/assets/images/map-controls/query.svg deleted file mode 100644 index c5b0e4b1d..000000000 --- a/app/assets/images/map-controls/query.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - ? - diff --git a/app/assets/images/map-controls/share.svg b/app/assets/images/map-controls/share.svg deleted file mode 100644 index 51fe226b1..000000000 --- a/app/assets/images/map-controls/share.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/images/map-controls/zoomin.svg b/app/assets/images/map-controls/zoomin.svg deleted file mode 100644 index e13512b82..000000000 --- a/app/assets/images/map-controls/zoomin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/images/map-controls/zoomout.svg b/app/assets/images/map-controls/zoomout.svg deleted file mode 100644 index b348b51f4..000000000 --- a/app/assets/images/map-controls/zoomout.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/app/assets/javascripts/index/contextmenu.js b/app/assets/javascripts/index/contextmenu.js index 4dcc0d8d7..4808b8f81 100644 --- a/app/assets/javascripts/index/contextmenu.js +++ b/app/assets/javascripts/index/contextmenu.js @@ -61,7 +61,7 @@ OSM.initializations.push(function (map) { }, { id: "menu-action-add-note", - icon: "bi-chat-text", + icon: "bi-chat-square-text", text: OSM.i18n.t("javascripts.context.add_note"), callback: () => routeWithLatLon("/note/new") }, @@ -76,7 +76,7 @@ OSM.initializations.push(function (map) { }, { id: "menu-action-query-features", - icon: "bi-question", + icon: "bi-question-lg", text: OSM.i18n.t("javascripts.context.query_features"), callback: () => routeWithLatLon("/query") }, diff --git a/app/assets/javascripts/leaflet.locate.js b/app/assets/javascripts/leaflet.locate.js index c706b59ce..a6192e099 100644 --- a/app/assets/javascripts/leaflet.locate.js +++ b/app/assets/javascripts/leaflet.locate.js @@ -21,12 +21,7 @@ L.OSM.locate = function (options) { .removeClass("leaflet-bar-part leaflet-bar-part-single") .addClass("control-button") .empty() - .append( - $(L.SVG.create("svg")) - .attr("class", "h-100 w-100") - .append( - $(L.SVG.create("use")) - .attr("href", "#icon-geolocate"))); + .append($("").addClass("fs-5 bi bi-cursor-fill")); return container; }; diff --git a/app/assets/javascripts/leaflet.note.js b/app/assets/javascripts/leaflet.note.js index 841e2a03e..c9b16f363 100644 --- a/app/assets/javascripts/leaflet.note.js +++ b/app/assets/javascripts/leaflet.note.js @@ -9,13 +9,9 @@ L.OSM.note = function (options) { .attr("class", "control-button") .attr("href", "#") .attr("title", OSM.i18n.t("javascripts.site.createnote_tooltip")) + .append($("").addClass("fs-5 bi bi-chat-square-text-fill")) .appendTo($container); - $(L.SVG.create("svg")) - .append($(L.SVG.create("use")).attr("href", "#icon-note")) - .attr("class", "h-100 w-100") - .appendTo(link); - map.on("zoomend", update); function update() { diff --git a/app/assets/javascripts/leaflet.query.js b/app/assets/javascripts/leaflet.query.js index 5611b2d18..dd95f8d8f 100644 --- a/app/assets/javascripts/leaflet.query.js +++ b/app/assets/javascripts/leaflet.query.js @@ -9,13 +9,9 @@ L.OSM.query = function (options) { .attr("class", "control-button") .attr("href", "#") .attr("title", OSM.i18n.t("javascripts.site.queryfeature_tooltip")) + .append($("").addClass("fs-5 bi bi-question-lg")) .appendTo($container); - $(L.SVG.create("svg")) - .append($(L.SVG.create("use")).attr("href", "#icon-query")) - .attr("class", "h-100 w-100") - .appendTo(link); - map.on("zoomend", update); function update() { diff --git a/app/assets/javascripts/leaflet.sidebar-pane.js b/app/assets/javascripts/leaflet.sidebar-pane.js index c0dcb807a..2f7518a20 100644 --- a/app/assets/javascripts/leaflet.sidebar-pane.js +++ b/app/assets/javascripts/leaflet.sidebar-pane.js @@ -11,11 +11,13 @@ L.OSM.sidebarPane = function (options, uiClass, buttonTitle, paneTitle) { .attr("title", OSM.i18n.t(buttonTitle)) .on("click", toggle); - $(L.SVG.create("svg")) - .append($(L.SVG.create("use")).attr("href", "#icon-" + uiClass)) - .attr("class", "h-100 w-100") - .appendTo(button); - + const iconMap = { + layers: "stack", + legend: "info-lg", + share: "share-fill" + }; + const iconName = iconMap[uiClass] || uiClass; + $("").addClass("fs-5 bi bi-" + iconName).appendTo(button); button.appendTo($container); const $ui = $("
") diff --git a/app/assets/javascripts/leaflet.zoom.js b/app/assets/javascripts/leaflet.zoom.js index dbc383833..5aa080d33 100644 --- a/app/assets/javascripts/leaflet.zoom.js +++ b/app/assets/javascripts/leaflet.zoom.js @@ -10,9 +10,9 @@ L.OSM.Zoom = L.Control.extend({ this._map = map; this._zoomInButton = this._createButton( - "", OSM.i18n.t("javascripts.map.zoom.in"), zoomName + "in", container, this._zoomIn, this); + "", OSM.i18n.t("javascripts.map.zoom.in"), "plus-lg", container, this._zoomIn, this); this._zoomOutButton = this._createButton( - "", OSM.i18n.t("javascripts.map.zoom.out"), zoomName + "out", container, this._zoomOut, this); + "", OSM.i18n.t("javascripts.map.zoom.out"), "dash-lg", container, this._zoomOut, this); map.on("zoomend zoomlevelschange", this._updateDisabled, this); @@ -37,10 +37,7 @@ L.OSM.Zoom = L.Control.extend({ link.href = "#"; link.title = title; - $(L.SVG.create("svg")) - .append($(L.SVG.create("use")).attr("href", "#icon-" + className)) - .attr("class", "h-100 w-100") - .appendTo(link); + L.DomUtil.create("i", "fs-5 bi bi-" + className, link); const stop = L.DomEvent.stopPropagation; diff --git a/app/assets/javascripts/maplibre.combinedcontrolgroup.js b/app/assets/javascripts/maplibre.combinedcontrolgroup.js index 94310286d..5ad0b2ea5 100644 --- a/app/assets/javascripts/maplibre.combinedcontrolgroup.js +++ b/app/assets/javascripts/maplibre.combinedcontrolgroup.js @@ -16,7 +16,25 @@ class CombinedControlGroup { // Extract buttons from the control's container and add to our wrapper const buttons = ctrlContainer.querySelectorAll("button"); + const iconMap = { + "zoom-in": "plus-lg", + "zoom-out": "dash-lg", + "geolocate": "cursor-fill" + }; + buttons.forEach(button => { + // Find the type of button (zoom-in, zoom-out, etc.) from its class name + const match = button.className.match(/maplibregl-ctrl-([\w-]+)/); + if (match) { + const type = match[1]; // e.g., "zoom-in" + const icon = iconMap[type]; + + if (icon) { + $(button) + .empty() + .append($("").addClass(`maplibregl-ctrl-icon fs-5 bi bi-${icon}`)); + } + } this._container.appendChild(button); }); } diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 8c9e6cd17..9b1cf9f94 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -231,12 +231,12 @@ body.small-nav { } .leaflet-control .control-button { - display: block; + display: grid; height: 40px; width: 40px; color: white; - padding: 10px; - background-color: rgba(0,0,0,.6); + place-content: center; + background-color: rgba(0, 0, 0, 0.6); outline: none; &:hover, diff --git a/app/assets/stylesheets/maplibre-gl-all.scss b/app/assets/stylesheets/maplibre-gl-all.scss index 7d94bbdd9..1d7b8159f 100644 --- a/app/assets/stylesheets/maplibre-gl-all.scss +++ b/app/assets/stylesheets/maplibre-gl-all.scss @@ -9,10 +9,11 @@ } .maplibregl-control-container .maplibregl-ctrl button { - display: block; + display: grid; height: 40px; width: 40px; - padding: 10px; + color: white; + place-content: center; background-color: rgba(0, 0, 0, 0.6); &:hover, &:focus { @@ -49,19 +50,6 @@ .maplibregl-ctrl button .maplibregl-ctrl-icon { background-image: none !important; - background-color: white; -} - -.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { - mask-image: image-url("map-controls/zoomin.svg"); -} - -.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { - mask-image: image-url("map-controls/zoomout.svg"); -} - -.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { - mask-image: image-url("map-controls/geolocate.svg"); } .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon { diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb index 03f32968c..30f6283c4 100644 --- a/app/views/dashboards/show.html.erb +++ b/app/views/dashboards/show.html.erb @@ -1,8 +1,6 @@ <% content_for :heading do %>

<%= t ".title" %>

<% end %> - -<%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout geolocate] } %> <%= render :partial => "layouts/markers", :locals => { :types => %w[dot] } %>
diff --git a/app/views/diary_entries/_form.html.erb b/app/views/diary_entries/_form.html.erb index 118e9afc6..1b9b1985b 100644 --- a/app/views/diary_entries/_form.html.erb +++ b/app/views/diary_entries/_form.html.erb @@ -5,7 +5,6 @@
<%= t ".location" -%> - <%= render :partial => "layouts/control_icons", :locals => { :icons => %w[zoomin zoomout] } %> <%= render :partial => "layouts/markers", :locals => { :types => %w[dot] } %> <%= 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 deleted file mode 100644 index 94c43f2c8..000000000 --- a/app/views/layouts/_control_icons.html.erb +++ /dev/null @@ -1,6 +0,0 @@ -<% 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 3d6c0641f..f403b0157 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -50,7 +50,6 @@ <%= render :partial => "layouts/banner" %>
- <%= render :partial => "layouts/control_icons" %> <%= render :partial => "layouts/markers", :locals => { :types => %w[dot cross tick plus start destination] } %>