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

@@ -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>

ui/src/components/MapboxControls.js → 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;

ui/src/components/ViewerMapbox.vue → 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";