From 5fa49257fe61d4ba0f734d69279d5ced925064be Mon Sep 17 00:00:00 2001
From: NicolasRichel <nicolas@bimdata.io>
Date: Wed, 15 Apr 2026 11:28:01 +0200
Subject: [PATCH] MINOR: feat: add projects map to space board

---
 .../maplibre-wrapper/MaplibreWrapper.scss     | 25 -----
 .../maplibre-wrapper/MaplibreWrapper.vue      | 40 ++++++--
 .../specific/models/models-map/ModelsMap.vue  | 94 +++++++++++++++++++
 .../projects/project-card/ProjectCard.vue     | 61 +++++-------
 .../projects/projects-map/ProjectsMap.vue     | 86 +++++++++++++++++
 src/composables/maplibre.js                   | 79 ----------------
 src/services/ModelService.js                  | 22 ++---
 src/utils/location.js                         |  4 +-
 src/utils/maplibre.js                         | 63 +++++++++++++
 src/views/space-board/SpaceBoard.scss         | 34 -------
 src/views/space-board/SpaceBoard.vue          | 87 ++++++++++++++---
 11 files changed, 388 insertions(+), 207 deletions(-)
 delete mode 100644 src/components/generic/maplibre-wrapper/MaplibreWrapper.scss
 create mode 100644 src/components/specific/models/models-map/ModelsMap.vue
 create mode 100644 src/components/specific/projects/projects-map/ProjectsMap.vue
 delete mode 100644 src/composables/maplibre.js
 create mode 100644 src/utils/maplibre.js
 delete mode 100644 src/views/space-board/SpaceBoard.scss

diff --git a/src/components/generic/maplibre-wrapper/MaplibreWrapper.scss b/src/components/generic/maplibre-wrapper/MaplibreWrapper.scss
deleted file mode 100644
index 8ec8786f1..000000000
--- a/src/components/generic/maplibre-wrapper/MaplibreWrapper.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.maplibre-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  filter: grayscale(0.7);
-
-  .maptiler-link {
-    position: absolute;
-    z-index: 1;
-    bottom: calc(var(--spacing-unit) / 4);
-    left: calc(var(--spacing-unit) / 2);
-    user-select: none;
-  }
-
-  &:deep() {
-    .maplibregl-canvas-container {
-      width: 100%;
-      height: 100%;
-    }
-
-    .maplibregl-canvas {
-      outline: none;
-    }
-  }
-}
diff --git a/src/components/generic/maplibre-wrapper/MaplibreWrapper.vue b/src/components/generic/maplibre-wrapper/MaplibreWrapper.vue
index 42c427855..4a2aafc65 100644
--- a/src/components/generic/maplibre-wrapper/MaplibreWrapper.vue
+++ b/src/components/generic/maplibre-wrapper/MaplibreWrapper.vue
@@ -3,13 +3,13 @@
     <a class="maptiler-link" href="https://www.maptiler.com/" target="_blank">
       <img src="/static/maptiler-logo.svg" />
     </a>
-    <!-- Maplibre map will be injected here -->
+    <!-- Map will be displayed here -->
   </div>
 </template>
 
 <script>
 import { onMounted, watchEffect } from "vue";
-import { useMaplibre } from "../../../composables/maplibre.js";
+import { MaplibreMap } from "../../../utils/maplibre.js";
 
 export default {
   props: {
@@ -27,11 +27,14 @@ export default {
     }
   },
   setup(props) {
-    const { loadMap } = useMaplibre(props.containerID);
-
     onMounted(() => {
       watchEffect(() => {
-        loadMap(props.longitude, props.latitude);
+        // Do not try to load map if container element does not exist
+        if (!document.getElementById(props.containerID)) return;
+
+        const center = [props.longitude, props.latitude];
+        const map = new MaplibreMap(props.containerID, center);
+        map.addMarker(center);
       });
     });
   }
@@ -39,4 +42,29 @@ export default {
 </script>
 
 <style src="../../../../node_modules/maplibre-gl/dist/maplibre-gl.css"></style>
-<style scoped lang="scss" src="./MaplibreWrapper.scss"></style>
+<style scoped>
+.maplibre-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  filter: grayscale(0.7);
+
+  .maptiler-link {
+    position: absolute;
+    z-index: 1;
+    bottom: calc(var(--spacing-unit) / 4);
+    left: calc(var(--spacing-unit) / 2);
+    user-select: none;
+  }
+
+  &:deep() {
+    .maplibregl-canvas {
+      outline: none;
+    }
+    .maplibregl-canvas-container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/components/specific/models/models-map/ModelsMap.vue b/src/components/specific/models/models-map/ModelsMap.vue
new file mode 100644
index 000000000..bd5ef3d57
--- /dev/null
+++ b/src/components/specific/models/models-map/ModelsMap.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="models-map" :id="CONTAINER_ID">
+    <!-- Map will be displayed here -->
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, watch } from "vue";
+import { useRouter } from "vue-router";
+import { useModels } from "../../../../state/models.js";
+import { computeBounds, MaplibreMap } from "../../../../utils/maplibre.js";
+import { DMS2DD } from "../../../../utils/location.js";
+import { openInViewer } from "../../../../utils/models.js";
+
+const router = useRouter();
+const { fetchModelLocation } = useModels();
+
+const CONTAINER_ID = "models-map";
+
+const props = defineProps({
+  models: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const loadedModelIds = new Set();
+const markers = new Map();
+
+onMounted(() => {
+  const map = new MaplibreMap(CONTAINER_ID);
+
+  watch(
+    () => props.models,
+    async models => {
+      const ids = new Set(models.map(m => m.id));
+      const modelIdsToLoad = ids.difference(loadedModelIds);
+      const modelIdsToUnload = loadedModelIds.difference(ids);
+
+      await Promise.all(
+        models.map(async model => {
+          if (modelIdsToLoad.has(model.id)) {
+            const location = await fetchModelLocation(model.project, model);
+            const { longitude, latitude } = location;
+
+            if (longitude && latitude) {
+              const position = [DMS2DD(longitude, "longitude"), DMS2DD(latitude, "latitude")];
+              const marker = await map.addMarker(position);
+              marker.on("click", () => openInViewer(router, model.project, model));
+
+              markers.set(model.id, marker);
+            }
+
+            loadedModelIds.add(model.id);
+          }
+
+          if (modelIdsToUnload.has(model.id)) {
+            // TODO: remove marker from map
+
+            loadedModelIds.delete(model.id);
+          }
+        })
+      );
+
+      // Set map camera
+      if (markers.length === 0) {
+        return;
+      }
+      if (markers.length === 1) {
+        map.setCenter(markers[0]);
+        return;
+      }
+
+      const bounds = computeBounds([...markers.values()]);
+      if (bounds) map.map.fitBounds(bounds, { animate: false });
+    },
+    { immediate: true }
+  );
+});
+
+onBeforeUnmount(() => {
+  loadedModelIds.clear();
+  markers.clear();
+});
+</script>
+
+<style src="../../../../../node_modules/maplibre-gl/dist/maplibre-gl.css"></style>
+<style scoped>
+.models-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/specific/projects/project-card/ProjectCard.vue b/src/components/specific/projects/project-card/ProjectCard.vue
index 8528ac7c8..7b31b7a29 100644
--- a/src/components/specific/projects/project-card/ProjectCard.vue
+++ b/src/components/specific/projects/project-card/ProjectCard.vue
@@ -67,7 +67,7 @@
 </template>
 
 <script setup>
-import { inject, onMounted, onUnmounted, ref, watch } from "vue";
+import { inject, onMounted, onUnmounted, ref, toRaw } from "vue";
 import { useRouter } from "vue-router";
 import { useToggle } from "../../../../composables/toggle.js";
 import { MODEL_TYPE } from "../../../../config/models.js";
@@ -118,6 +118,8 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(["loaded"]);
+
 const router = useRouter();
 const { isSpaceAdmin, isFavoriteProject } = useUser();
 const { isOpen: showMenu, open: openMenu, close: closeMenu } = useToggle();
@@ -144,47 +146,36 @@ onMounted(() => {
     ([{ isIntersecting }]) => {
       if (!isIntersecting) return;
 
-      setTimeout(() => {
+      setTimeout(async () => {
         // Do not load card if it is not in the viewport
         if (!isElementInViewport(placeholder.value, viewContainer.value.clientHeight)) return;
 
-        unwatchProject = watch(
-          () => props.project,
-          async () => {
-            loading.value = true;
-            const models = await ModelService.fetchModels(props.project, { cache: true });
-            displayedModels.value = models.reduce(
-              (acc, model) => {
-                if (
-                  !model.archived &&
-                  model.type !== MODEL_TYPE.META_BUILDING &&
-                  model.type !== MODEL_TYPE.PHOTOSPHERE_BUILDING
-                ) {
-                  if (model.id === props.project.main_model_id) {
-                    acc.unshift(model);
-                  } else {
-                    acc.push(model);
-                  }
-                }
-                return acc;
-              },
-              []
-            );
-            loading.value = false;
-            visible.value = true;
-          },
-          { immediate: true }
-        );
-  
-        unwatchModels = watch(
-          displayedModels,
-          () => {
-            currentModel.value = displayedModels.value[0];
+        loading.value = true;
+        const models = await ModelService.fetchModels(props.project);
+        displayedModels.value = models.reduce(
+          (acc, model) => {
+            if (
+              !model.archived &&
+              model.type !== MODEL_TYPE.META_BUILDING &&
+              model.type !== MODEL_TYPE.PHOTOSPHERE_BUILDING
+            ) {
+              if (model.id === props.project.main_model_id) {
+                acc.unshift(model);
+              } else {
+                acc.push(model);
+              }
+            }
+            return acc;
           },
-          { immediate: true }
+          []
         );
+        currentModel.value = displayedModels.value[0];
+        loading.value = false;
+        visible.value = true;
 
         observer.disconnect();
+
+        emit("loaded", { project: toRaw(props.project), models: displayedModels.value });
       }, LOADING_DELAY);
     },
     {
diff --git a/src/components/specific/projects/projects-map/ProjectsMap.vue b/src/components/specific/projects/projects-map/ProjectsMap.vue
new file mode 100644
index 000000000..b1b0c619f
--- /dev/null
+++ b/src/components/specific/projects/projects-map/ProjectsMap.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="projects-map" :id="CONTAINER_ID">
+    <!-- Map will be displayed here -->
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useModels } from "../../../../state/models.js";
+import routeNames from "../../../../router/route-names.js";
+import { debounce } from "../../../../utils/async.js";
+import { computeBounds, MaplibreMap } from "../../../../utils/maplibre.js";
+import { DMS2DD } from "../../../../utils/location.js";
+
+const router = useRouter();
+const { fetchModelLocation } = useModels();
+
+const CONTAINER_ID = "projects-map";
+
+let map = null, markers;
+
+const setMapCamera = debounce(() => {
+  if (markers.size === 0) {
+    return;
+  }
+  if (markers.size === 1) {
+    const marker = markers.values().next().value;
+    const center = marker.getLngLat();
+    map.setCenter(center);
+    return;
+  }
+
+  const bounds = computeBounds([...markers.values()]);
+  if (bounds) map.map.fitBounds(bounds, { animate: false });
+}, 600);
+
+const addProject = async project => {
+  if (!map) return;
+
+  for (const model of project.models) {
+    const location = await fetchModelLocation(project, model);
+    const { longitude, latitude } = location;
+
+    if (longitude && latitude) {
+      const position = [DMS2DD(longitude, "longitude"), DMS2DD(latitude, "latitude")];
+      const marker = await map.addMarker(position);
+      marker.on("click", () =>
+        router.push({
+          name: routeNames.projectBoard,
+          params: {
+            spaceID: model.project.cloud.id,
+            projectID: model.project.id,
+          }
+        })
+      );
+
+      markers.set(project.id, marker);
+      break;
+    }
+  }
+
+  setMapCamera();
+};
+
+defineExpose({ addProject });
+
+onMounted(() => {
+  map = new MaplibreMap(CONTAINER_ID);
+  markers = new Map();
+});
+
+onBeforeUnmount(() => {
+  markers?.clear();
+  map?.map.remove();
+});
+</script>
+
+<style src="../../../../../node_modules/maplibre-gl/dist/maplibre-gl.css"></style>
+<style scoped>
+.projects-map {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/composables/maplibre.js b/src/composables/maplibre.js
deleted file mode 100644
index 382f6309e..000000000
--- a/src/composables/maplibre.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import maplibregl from "maplibre-gl";
-
-const MAP_TILER_TOKEN = ENV.VUE_APP_MAPTILER_TOKEN;
-
-export function useMaplibre(containerID) {
-  const loadMap = (longitude, latitude) => {
-    if (!document.getElementById(containerID)) {
-      // Do not try to load map if container element does not exist
-      return;
-    }
-
-    if (longitude && latitude) {
-      try {
-        const map = new maplibregl.Map({
-          container: containerID,
-          style: `https://api.maptiler.com/maps/streets/style.json?key=${MAP_TILER_TOKEN}`,
-          center: [longitude, latitude],
-          zoom: 15.5,
-          pitch: 45,
-          bearing: -17.6,
-          attributionControl: false,
-          antialias: true
-        });
-
-        map.on("load", () => {
-          const labelsLayer = map
-            .getStyle()
-            .layers.find(
-              layer => layer.type === "symbol" && layer.layout["text-field"]
-            );
-
-          map.addLayer(
-            {
-              type: "fill-extrusion",
-              id: "3d-buildings",
-              source: "openmaptiles",
-              "source-layer": "building",
-              filter: ["==", "extrude", "true"],
-              minzoom: 15,
-              paint: {
-                "fill-extrusion-color": "#aaa",
-                "fill-extrusion-opacity": 0.6,
-                "fill-extrusion-height": [
-                  "interpolate",
-                  ["linear"],
-                  ["zoom"],
-                  15,
-                  0,
-                  15.05,
-                  ["get", "height"]
-                ],
-                "fill-extrusion-base": [
-                  "interpolate",
-                  ["linear"],
-                  ["zoom"],
-                  15,
-                  0,
-                  15.05,
-                  ["get", "min_height"]
-                ]
-              }
-            },
-            labelsLayer ? labelsLayer.id : undefined
-          );
-
-          new maplibregl.Marker({ color: "#2F374A" /* color primary */ })
-            .setLngLat([longitude, latitude])
-            .addTo(map);
-        });
-      } catch (error) {
-        console.warn(error);
-      }
-    }
-  };
-
-  return {
-    loadMap
-  };
-}
diff --git a/src/services/ModelService.js b/src/services/ModelService.js
index 64abe7109..acd742233 100644
--- a/src/services/ModelService.js
+++ b/src/services/ModelService.js
@@ -6,9 +6,7 @@ import { ERRORS, RuntimeError, ErrorService } from "./ErrorService.js";
 class ModelService {
   constructor() {
     this.cache = new Map();
-    this.callQueue = queue(async task => {
-      return await task();
-    }, 40);
+    this.callQueue = queue(async task => { return await task(); }, 40);
   }
 
   async fetchModels(project, { cache } = {}) {
@@ -113,14 +111,16 @@ class ModelService {
   }
 
   fetchModelElements(project, model, params = {}) {
-    return apiClient.modelApi.getElements(
-      project.cloud.id,
-      model.id,
-      project.id,
-      params.classification,
-      params.classificationNotation,
-      undefined, // property_filter
-      params.type
+    return this.callQueue.push(() =>
+      apiClient.modelApi.getElements(
+        project.cloud.id,
+        model.id,
+        project.id,
+        params.classification,
+        params.classificationNotation,
+        undefined, // property_filter
+        params.type
+      )
     );
   }
 
diff --git a/src/utils/location.js b/src/utils/location.js
index e606f0343..f35c08e38 100644
--- a/src/utils/location.js
+++ b/src/utils/location.js
@@ -96,7 +96,7 @@ function DMS2DD([degrees, minutes, seconds, secondsFraction = 0], type) {
     seconds *= -1;
     secondsFraction *= -1;
   }
-  seconds += secondsFraction/1000000;
+  seconds += secondsFraction / 1_000_000;
   const dmsString = `${degrees}°${minutes}′${seconds}″ ${direction}`;
   return parseDMS(dmsString);
 }
@@ -132,7 +132,7 @@ function DD2DMS(lat, long) {
 const MAP_TILER_TOKEN = ENV.VUE_APP_MAPTILER_TOKEN;
 
 /**
- * Get the DD coordinates of a given address using OpenStreetMapAPI.
+ * Get the DD coordinates of a given address using Maptiler API.
  * The returned value is an object with a "longitude" and "latitude" fields.
  * If no coordinates are found, "longitude" and "latitude" will be null.
  *
diff --git a/src/utils/maplibre.js b/src/utils/maplibre.js
new file mode 100644
index 000000000..e9a2c6aa4
--- /dev/null
+++ b/src/utils/maplibre.js
@@ -0,0 +1,63 @@
+import maplibregl from "maplibre-gl";
+
+const MAP_TILER_TOKEN = ENV.VUE_APP_MAPTILER_TOKEN;
+const MAP_STYLE_URL = `https://api.maptiler.com/maps/streets/style.json?key=${MAP_TILER_TOKEN}`;
+const MAP_DEFAULT_CENTER = [2.294481, 48.858370]; // Tour Eiffel
+
+const MARKER_COLOR = "#2F374A"; // color primary
+
+export class MaplibreMap {
+  constructor(containerId, center = MAP_DEFAULT_CENTER) {
+    this.map = new maplibregl.Map({
+      container: containerId,
+      style: MAP_STYLE_URL,
+      center,
+      zoom: 15.5,
+      pitch: 45,
+      bearing: 0,
+      attributionControl: false,
+    });
+
+    const { promise, resolve } = Promise.withResolvers();
+    this.isReady = promise;
+
+    this.map.on("load", resolve);
+  }
+
+  setCenter(center) {
+    this.map.setCenter(center);
+  }
+
+  addMarker([longitude, latitude]) {
+    const marker = new maplibregl.Marker({ color: MARKER_COLOR });
+    marker.setLngLat([longitude, latitude]);
+
+    return this.isReady.then(() => marker.addTo(this.map));
+  }
+}
+
+export function computeBounds(markers) {
+  if (markers.length < 2) {
+    console.warn("[computeBounds] We need at least 2 markers to compute map bounds.");
+    return;
+  }
+
+  markers = markers.map(m => {
+    const { lng, lat } = m.getLngLat();
+    return [lng, lat];
+  });
+
+  let [a0, b0] = markers.pop(), [a1, b1] = markers.pop();
+  let sw = [Math.min(a0, a1), Math.min(b0, b1)]; // south-west
+  let ne = [Math.max(a0, a1), Math.max(b0, b1)]; // north-east
+
+  while (markers.length > 0) {
+    let [lng, lat] = markers.pop();
+    if (lng < sw[0]) sw[0] = lng;
+    if (lat < sw[1]) sw[1] = lat;
+    if (lng > ne[0]) ne[0] = lng;
+    if (lat > ne[1]) ne[1] = lat;
+  }
+
+  return [sw, ne];
+}
diff --git a/src/views/space-board/SpaceBoard.scss b/src/views/space-board/SpaceBoard.scss
deleted file mode 100644
index cbe5cd4c2..000000000
--- a/src/views/space-board/SpaceBoard.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.space-board {
-  height: 100%;
-
-  &__banner {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  // Add top padding to header when banner is displayed
-  &__banner.visible + &__header {
-    padding-top: var(--spacing-unit);
-  }
-
-  &__header {
-    &__search {
-      background-color: var(--color-white);
-    }
-
-    &__actions {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-unit);
-    }
-
-    &__btn {
-      color: var(--color-granite-light);
-    }
-  }
-
-  &__body {
-    padding: calc(var(--spacing-unit) * 2) 0;
-  }
-}
diff --git a/src/views/space-board/SpaceBoard.vue b/src/views/space-board/SpaceBoard.vue
index e75f4667e..bac572ad4 100644
--- a/src/views/space-board/SpaceBoard.vue
+++ b/src/views/space-board/SpaceBoard.vue
@@ -61,18 +61,22 @@
     </AppSidePanelContent>
 
     <AppLoading name="space-projects">
-      <BIMDataResponsiveGrid
-        class="space-board__body"
-        itemWidth="320px"
-        rowGap="36px"
-        columnGap="36px"
-        :style="{ justifyContent: isMD ? 'center' : '' }"
-      >
-        <transition-group name="grid">
-          <ProjectCreationCard v-if="isSpaceAdmin(space)" :key="-1" :space="space" />
-          <ProjectCard v-for="project in projects" :key="project.id" :project="project" />
-        </transition-group>
-      </BIMDataResponsiveGrid>
+      <div class="space-board__body">
+        <div class="models-map-container">
+          <ProjectsMap ref="map" />
+        </div>
+        <BIMDataResponsiveGrid
+          itemWidth="320px"
+          rowGap="36px"
+          columnGap="36px"
+          :style="{ justifyContent: isMD ? 'center' : '' }"
+        >
+          <transition-group name="grid">
+            <ProjectCreationCard v-if="isSpaceAdmin(space)" :key="-1" :space="space" />
+            <ProjectCard v-for="project in projects" :key="project.id" :project="project" @loaded="onProjectLoaded" />
+          </transition-group>
+        </BIMDataResponsiveGrid>
+      </div>
     </AppLoading>
   </div>
 </template>
@@ -100,10 +104,11 @@ import GoBackButton from "../../components/specific/app/go-back-button/GoBackBut
 import ViewHeader from "../../components/specific/app/view-header/ViewHeader.vue";
 import ProjectCard from "../../components/specific/projects/project-card/ProjectCard.vue";
 import ProjectCreationCard from "../../components/specific/projects/project-creation-card/ProjectCreationCard.vue";
+import ProjectsMap from "../../components/specific/projects/projects-map/ProjectsMap.vue";
+import StatusFilterButton from "../../components/specific/projects/status-filter-button/StatusFilterButton.vue";
 import SpaceSizeInfo from "../../components/specific/subscriptions/space-size-info/SpaceSizeInfo.vue";
 import SubscriptionStatusBanner from "../../components/specific/subscriptions/subscription-status-banner/SubscriptionStatusBanner.vue";
 import SpaceUsersManager from "../../components/specific/users/space-users-manager/SpaceUsersManager.vue";
-import StatusFilterButton from "../../components/specific/projects/status-filter-button/StatusFilterButton.vue";
 
 export default {
   components: {
@@ -113,11 +118,12 @@ export default {
     GoBackButton,
     ProjectCard,
     ProjectCreationCard,
+    ProjectsMap,
     SpaceSizeInfo,
     SpaceUsersManager,
+    StatusFilterButton,
     SubscriptionStatusBanner,
     ViewHeader,
-    StatusFilterButton,
   },
   setup() {
     const viewContainer = inject("viewContainer");
@@ -142,6 +148,12 @@ export default {
 
     const { sortToggle: sortProjects } = useListSort(displayedProjects, (project) => project.name);
 
+    const map = ref(null);
+    const onProjectLoaded = ({ project, models }) => {
+      project.models = models;
+      map.value.addProject(project);
+    };
+
     useInterval(() => {
       if (isOpenRight.value) {
         loadSpaceUsers(currentSpace.value);
@@ -168,6 +180,7 @@ export default {
       // References
       invitations: spaceInvitations,
       IS_SUBSCRIPTION_ENABLED,
+      map,
       projects: displayedProjects,
       searchText,
       space: currentSpace,
@@ -177,6 +190,7 @@ export default {
       filteredProjects,
       // Methods
       isSpaceAdmin,
+      onProjectLoaded,
       openUsersManager: openSidePanel,
       sortProjects,
       // Responsive breakpoints
@@ -186,4 +200,47 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="./SpaceBoard.scss"></style>
+<style scoped>
+.space-board {
+  height: 100%;
+
+  .space-board__banner {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  /* Add top padding to header when banner is displayed */
+  .space-board__banner.visible + .space-board__header {
+    padding-top: var(--spacing-unit);
+  }
+
+  .space-board__header {
+    .space-board__header__search {
+      background-color: var(--color-white);
+    }
+
+    .space-board__header__actions {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-unit);
+    }
+
+    .space-board__header__btn {
+      color: var(--color-granite-light);
+    }
+  }
+
+  
+  .space-board__body {
+    padding: calc(var(--spacing-unit) * 2) 0;
+
+    .models-map-container {
+      height: 300px;
+      padding: calc(var(--spacing-unit) * 2);
+      margin-bottom: calc(var(--spacing-unit) * 2);
+      background-color: var(--color-white);
+    }
+  }
+}
+</style>