web: ui

Author: Rubix982

projects/rank-nsf-linker/docker-compose.dev.yaml

@@ -1,5 +1,3 @@
-version: "3.9"
-
 services:
   postgres:
     image: cgr.dev/chainguard/postgres

projects/rank-nsf-linker/web/package.json

@@ -9,9 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@deck.gl/layers": "^9.1.13",
-    "deck.gl": "^9.1.13",
     "mapbox-gl": "^3.14.0",
+    "maplibre-gl": "^5.9.0",
     "vue": "^3.5.17"
   },
   "devDependencies": {

projects/rank-nsf-linker/web/src/App.vue

@@ -1,30 +1,31 @@
 <script setup lang="ts">
-import DeckMap from './components/DeckMap.vue';
+import WorldMap from './components/WorldMap.vue';
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+  <div class="app">
+    <WorldMap />
   </div>
-  <DeckMap />
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+.app {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+</style>
+
+<style>
+/* Ensure html and body also fill viewport */
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 </style>

projects/rank-nsf-linker/web/src/components/DeckMap.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="map" class="map-container"></div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount } from 'vue'
+import maplibregl from 'maplibre-gl'
+import 'maplibre-gl/dist/maplibre-gl.css'
+
+let map: maplibregl.Map | null = null
+
+onMounted(() => {
+  map = new maplibregl.Map({
+    container: 'map',
+    style: {
+      version: 8,
+      sources: {
+        osm: {
+          type: 'raster',
+          tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
+          tileSize: 256,
+          attribution:
+            '© <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors</a>'
+        }
+      },
+      layers: [
+        {
+          id: 'osm',
+          type: 'raster',
+          source: 'osm'
+        }
+      ]
+    },
+    center: [7, 47.65],
+    zoom: 4.5,
+  })
+
+  // Example: Add marker (for later)
+  new maplibregl.Marker().setLngLat([7, 47.65]).addTo(map)
+})
+
+onBeforeUnmount(() => {
+  map?.remove()
+})
+</script>
+
+<style scoped>
+.map-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+</style>

projects/rank-nsf-linker/web/src/components/WorldMap.vue

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

projects/rank-nsf-linker/web/src/vue.d.ts

@@ -9,7 +9,8 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+    "types": ["vite/client"]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
 }