From a2a0d51159bd9d1e1cf0b7d133782ca94504a452 Mon Sep 17 00:00:00 2001
From: Alexander Rolek <a.rolek@gmail.com>
Date: Sun, 29 Dec 2024 13:43:39 -0700
Subject: [PATCH] ui: Fix inspector CSS. Fix custom map control

After the viewer was migrated from mapboxgl to maplibregl
the associated CSS references were not updated. This caused
the styling for the inspector to use default browser styles.
The style references have now been corrected.

Additionally the debug tile line map control implementation was
was using mapboxgl CSS classes so the control was not being added
to the map. This has been fix.
---
 ui/src/App.vue                                | 22 +++++++++++--------
 .../{MapboxControls.js => MapControls.js}     |  4 ++--
 .../{ViewerMapbox.vue => Viewer.vue}          |  4 ++--
 3 files changed, 17 insertions(+), 13 deletions(-)
 rename ui/src/components/{MapboxControls.js => MapControls.js} (84%)
 rename ui/src/components/{ViewerMapbox.vue => Viewer.vue} (92%)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index a5dcbc13a..18bc4ddc4 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <ViewerMapbox v-if="capabilities && activeMap" />
+    <Viewer v-if="capabilities && activeMap" />
 
     <ViewerHeader v-if="capabilities" :capabilities="capabilities" />
 
@@ -12,7 +12,7 @@
 import ViewerHeader from "./components/ViewerHeader.vue";
 import "maplibre-gl/dist/maplibre-gl.css";
 import LeftNav from "./components/LeftNav/LeftNav.vue";
-import ViewerMapbox from "./components/ViewerMapbox.vue";
+import Viewer from "./components/Viewer.vue";
 import { store, mutations } from "./globals/store";
 import axios from "axios";
 
@@ -28,7 +28,7 @@ export default {
   components: {
     ViewerHeader,
     LeftNav,
-    ViewerMapbox
+    Viewer
   },
   data: function () {
     return {};
@@ -108,11 +108,11 @@ html {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.mapboxgl-ctrl-toggle-tile-boundaries {
+.maplibregl-ctrl-toggle-tile-boundaries {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1000 1000' enable-background='new 0 0 1000 1000' xml:space='preserve'%3E%3Cmetadata%3E Svg Vector Icons : http://www.onlinewebfonts.com/icon %3C/metadata%3E%3Cg%3E%3Cg transform='translate(0.000000,511.000000) scale(0.100000,-0.100000)'%3E%3Cpath d='M2060,4030v-980h-980H100v-326.7v-326.7h980h980v-980v-980h-980H100V110v-326.7h980h980v-980v-980h-980H100v-326.7V-2830h980h980v-980v-980h326.7h326.7v980v980h980h980v-980v-980H5000h326.7v980v980h980h980v-980v-980h326.7H7940v980v980h980h980v326.7v326.7h-980h-980v980v980h980h980V110v326.7h-980h-980v980v980h980h980v326.7V3050h-980h-980v980v980h-326.7h-326.7v-980v-980h-980h-980v980v980H5000h-326.7v-980v-980h-980h-980v980v980h-326.7H2060V4030z M4673.3,1416.7v-980h-980h-980v980v980h980h980V1416.7z M7286.7,1416.7v-980h-980h-980v980v980h980h980V1416.7z M4673.3-1196.7v-980h-980h-980v980v980h980h980V-1196.7z M7286.7-1196.7v-980h-980h-980v980v980h980h980V-1196.7z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
-.mapboxgl-popup-content {
+.maplibregl-popup-content {
   position: relative;
   background-color: rgba(0, 0, 0, 0.75);
   color: #ccc;
@@ -122,20 +122,24 @@ html {
   padding: 10px;
   pointer-events: auto;
 }
-.mapboxgl-popup-content h4 {
+
+.maplibregl-popup-content h4 {
   margin: 0 0 0.5em 0;
   border-bottom: 1px solid #ccc;
 }
-.mapboxgl-popup-content ul {
+
+.maplibregl-popup-content ul {
   margin: 0 0 1em 0;
   list-style: none;
   padding: 0;
 }
-.mapboxgl-popup-content ul > li {
+
+.maplibregl-popup-content ul>li {
   list-style: none;
   padding: 0;
 }
-.mapboxgl-popup-content ul:last-child {
+
+.maplibregl-popup-content ul:last-child {
   margin-bottom: 0;
 }
 </style>
diff --git a/ui/src/components/MapboxControls.js b/ui/src/components/MapControls.js
similarity index 84%
rename from ui/src/components/MapboxControls.js
rename to ui/src/components/MapControls.js
index 054a106c3..c4157180f 100644
--- a/ui/src/components/MapboxControls.js
+++ b/ui/src/components/MapControls.js
@@ -5,7 +5,7 @@ export default class ToggleTileBoundariesControl {
   onAdd(map) {
     this._map = map;
     this._container = document.createElement("div");
-    this._container.className = "mapboxgl-ctrl mapboxgl-ctrl-group";
+    this._container.className = "maplibregl-ctrl maplibregl-ctrl-group";
     this._container.style.color = "#f00";
 
     // toggle the tile boundaries on / off on click
@@ -16,7 +16,7 @@ export default class ToggleTileBoundariesControl {
     // build button with grid icon
     let btn = document.createElement("button");
     btn.title = "Toggle tile boundaries";
-    btn.className = "mapboxgl-ctrl-icon mapboxgl-ctrl-toggle-tile-boundaries";
+    btn.className = "maplibregl-ctrl-icon maplibregl-ctrl-toggle-tile-boundaries";
     this._container.appendChild(btn);
 
     return this._container;
diff --git a/ui/src/components/ViewerMapbox.vue b/ui/src/components/Viewer.vue
similarity index 92%
rename from ui/src/components/ViewerMapbox.vue
rename to ui/src/components/Viewer.vue
index 7d26f626f..85adf26b9 100644
--- a/ui/src/components/ViewerMapbox.vue
+++ b/ui/src/components/Viewer.vue
@@ -5,11 +5,11 @@
 <script>
 import { store, mutations } from "@/globals/store";
 import { mapSetters } from "@/globals/map";
-import ToggleTileBoundariesControl from "./MapboxControls";
+import ToggleTileBoundariesControl from "./MapControls";
 import maplibregl from "maplibre-gl";
 
 export default {
-  name: "ViewerMapbox",
+  name: "Viewer",
   mounted() {
     // build the style url
     let url = store.apiRoot + "maps/" + store.activeMap.name + "/style.json";