[openstreetmap/openstreetmap-website] Replace custom SVG map controls with Bootstrap Icons (Fixes #6681) (PR #6695)

[Marwin Hochfelsner]

@hlfan requested changes on this pull request.

So far for "nearly there"...

Matching the look of the controls _does_ require some changes to the button styling that are not separable from this PR.

> @@ -52,18 +52,6 @@
   background-color: white;

```suggestion
```

> 

```suggestion
.maplibregl-control-container .maplibregl-ctrl button {
  display: grid;
  height: 40px;
  width: 40px;
  color: white;
  place-content: center;
  background-color: rgba(0, 0, 0, 0.6);
```

Similarly, `common.css` should be updated here:

https://github.com/openstreetmap/openstreetmap-website/blob/071315433fb8f4ef00507a30eb8d6fa079a4d1b6/app/assets/stylesheets/common.scss#L233-L239

> @@ -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($("<i>").addClass("bi bi-cursor-fill"));

```suggestion
      .append($("<i>").addClass("fs-5 bi bi-cursor-fill"));
```

> @@ -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($("<i>").addClass("bi bi-chat-square-text-fill"))

```suggestion
      .append($("<i>").addClass("fs-5 bi bi-chat-square-text-fill"))
```

> @@ -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($("<i>").addClass("bi bi-question-lg"))

```suggestion
      .append($("<i>").addClass("fs-5 bi bi-question-lg"))
```

> @@ -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;
+    $("<i>").addClass("bi bi-" + iconName).appendTo(button);

```suggestion
    $("<i>").addClass("fs-5 bi bi-" + iconName).appendTo(button);
```

> @@ -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", "bi bi-" + className, link);

```suggestion
    L.DomUtil.create("i", "fs-5 bi bi-" + className, link);
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6695#pullrequestreview-3674315990
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6695/review/3674315990 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260117/36fe12a5/attachment-0001.htm>