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";