From b9b5ceb49dd074a18a186b2cb52c48efb27102fd Mon Sep 17 00:00:00 2001
From: Kevin Bieri <bierike@gmail.com>
Date: Sat, 7 Sep 2024 11:38:44 +0200
Subject: [PATCH] Frontend: Add map and IIIF viewer

---
 api/.gitignore                               |   1 +
 frontend/composables/useDeviceOrientation.js |   0
 frontend/nuxt.config.js                      |   5 +
 frontend/package.json                        |   3 +-
 frontend/pages/iiif.vue                      |  37 +++++++
 frontend/pages/index.vue                     | 104 ++++++++++++++++++-
 frontend/pages/map/index.vue                 |  33 ++++--
 frontend/pnpm-lock.yaml                      |   9 ++
 8 files changed, 182 insertions(+), 10 deletions(-)
 create mode 100644 frontend/composables/useDeviceOrientation.js
 create mode 100644 frontend/pages/iiif.vue

diff --git a/api/.gitignore b/api/.gitignore
index cd432fe..90852da 100644
--- a/api/.gitignore
+++ b/api/.gitignore
@@ -1,3 +1,4 @@
 .env
 /var/
 /venv/
+/**/__pycache__
diff --git a/frontend/composables/useDeviceOrientation.js b/frontend/composables/useDeviceOrientation.js
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 3b9ada0..16ef6c9 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -43,6 +43,11 @@ export default defineNuxtConfig({
   },
   nitro: {
     preset: "static",
+    devProxy: {
+      "/api/": {
+        target: `http://localhost:8000/api/`,
+      },
+    },
   },
   compatibilityDate: "2024-09-06",
 });
diff --git a/frontend/package.json b/frontend/package.json
index 3c42a20..3fdfd7b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,7 +40,8 @@
   "dependencies": {
     "@vueuse/core": "^11.0.3",
     "leaflet": "^1.9.4",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "tify": "^0.31.0"
   },
   "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }
diff --git a/frontend/pages/iiif.vue b/frontend/pages/iiif.vue
new file mode 100644
index 0000000..1a14095
--- /dev/null
+++ b/frontend/pages/iiif.vue
@@ -0,0 +1,37 @@
+<template>
+  <div id="iiif-viewer" class="h-screen w-screen" />
+</template>
+<script setup>
+import "tify";
+import "tify/dist/tify.css";
+import { isNull } from "lodash-es";
+
+const tify = ref(null);
+const route = useRoute();
+
+function constructManifestURL(imageURL) {
+  return imageURL.replace(/\/files\/.*/, "/pages/1/manifest/");
+}
+
+function openViewer() {
+  tify.value = new window.Tify({
+    container: "#iiif-viewer",
+    manifestUrl: constructManifestURL(route.query.manifestURL),
+  });
+}
+
+function destroyViewer() {
+  if (isNull(toValue(tify))) {
+    return;
+  }
+  toValue(tify).destroy();
+}
+
+onMounted(() => {
+  openViewer();
+});
+
+onBeforeUnmount(() => {
+  destroyViewer();
+});
+</script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 4dd0fde..be9eaf9 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,4 +1,104 @@
 <template>
-  <h1></h1>
+  <div
+    v-for="(radarPoint, index) in radarPoints"
+    :key="index"
+    class="absolute size-4 origin-center rounded-full bg-blue-400"
+    :style="radarPoint"
+    style="z-index: 9999"
+  />
+  <div id="map" class="h-screen w-screen" />
 </template>
-<script setup></script>
+<script setup>
+import { map as lodashMap } from "lodash-es";
+import {
+  useGeolocation,
+  useDeviceOrientation,
+  useWindowSize,
+} from "@vueuse/core";
+import { computed, toValue } from "vue";
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+
+const { coords } = useGeolocation();
+const { alpha } = useDeviceOrientation();
+const { data } = useFetchPhotos(coords, 1000);
+const { width, height } = useWindowSize();
+const router = useRouter();
+
+const orientation = computed(() => toValue(alpha) * (Math.PI / 180));
+const windowCenter = computed(() => ({
+  x: toValue(width) / 2,
+  y: toValue(height) / 2,
+}));
+const radius = computed(() => toValue(width) / 2 - 16);
+
+const pointsInProximity = computed(() =>
+  lodashMap(toValue(data), "coordinates"),
+);
+const radarPoints = computed(() => {
+  return toValue(pointsInProximity).map((point) => {
+    const beta = Math.tanh(
+      (point.lat - toValue(coords).latitude) /
+        (point.lon - toValue(coords).longitude),
+    );
+    const tangentPoint = {
+      x:
+        toValue(windowCenter).x +
+        toValue(radius) *
+          Math.cos(toValue(beta) + toValue(orientation) - Math.PI / 2),
+      y:
+        toValue(windowCenter).y +
+        toValue(radius) *
+          Math.sin(toValue(beta) + toValue(orientation) - Math.PI / 2),
+    };
+    return {
+      transform: `translate(${tangentPoint.x - 16}px, ${tangentPoint.y - 16}px)`,
+    };
+  });
+});
+
+const initialZoom = 20;
+const layer = {
+  url: "https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg",
+  attribution: "© swisstopo",
+};
+
+let map = null;
+const me = L.marker();
+const photosLayer = L.layerGroup();
+
+onMounted(() => {
+  map = L.map("map", { zoomControl: false });
+  L.tileLayer(layer.url, { attribution: layer.attribution }).addTo(map);
+  photosLayer.addTo(map);
+  me.addTo(map);
+});
+
+watch(coords, ({ latitude, longitude }) => {
+  me.setLatLng([latitude, longitude]);
+  map.setView(new L.LatLng(latitude, longitude), initialZoom);
+});
+
+function placePhotos(photos) {
+  photosLayer.clearLayers();
+  photos.forEach(({ coordinates: { lat, lon }, image_url, iiif_url }) => {
+    const marker = L.marker([lat, lon]).bindPopup(
+      `<img src="${image_url}" />`,
+      {
+        maxWidth: 200,
+        minWidth: 200,
+        maxHeight: 200,
+        minHeight: 200,
+      },
+    );
+    marker.on("popupopen", function () {
+      const popupContent = document.querySelector(".leaflet-popup-content");
+      popupContent.addEventListener("click", () => {
+        router.push({ name: "iiif", query: { manifestURL: iiif_url } });
+      });
+    });
+    marker.addTo(photosLayer);
+  });
+}
+watch(data, placePhotos);
+</script>
diff --git a/frontend/pages/map/index.vue b/frontend/pages/map/index.vue
index 44d02c5..9f745b1 100644
--- a/frontend/pages/map/index.vue
+++ b/frontend/pages/map/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="map" class="h-screen w-screen"></div>
+  <div id="map" class="h-screen w-screen" />
 </template>
 <script setup>
 import "leaflet/dist/leaflet.css";
@@ -7,8 +7,8 @@ import L from "leaflet";
 import { useGeolocation } from "@vueuse/core";
 
 const { coords } = useGeolocation();
+const router = useRouter();
 
-const initialPosition = [46.801111, 8.226667];
 const initialZoom = 20;
 const layer = {
   url: "https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.pixelkarte-farbe/default/current/3857/{z}/{x}/{y}.jpeg",
@@ -16,12 +16,15 @@ const layer = {
 };
 
 let map = null;
-const me = L.marker(initialPosition);
-const { data } = useFetchPhotos(coords, 0);
+const me = L.marker();
+const { data } = useFetchPhotos(coords, 1000);
+const photosLayer = L.layerGroup();
 
 onMounted(() => {
-  map = L.map("map", { zoomControl: false });
+  map = L.map("map", { zoomControl: false, dragging: false, tap: false });
+  map.dragging.disable();
   L.tileLayer(layer.url, { attribution: layer.attribution }).addTo(map);
+  photosLayer.addTo(map);
   me.addTo(map);
 });
 
@@ -31,8 +34,24 @@ watch(coords, ({ latitude, longitude }) => {
 });
 
 function placePhotos(photos) {
-  photos.forEach(({ coordinates: { coordinates } }) => {
-    L.marker(coordinates).addTo(map);
+  photosLayer.clearLayers();
+  photos.forEach(({ coordinates: { lat, lon }, image_url, iiif_url }) => {
+    const marker = L.marker([lat, lon]).bindPopup(
+      `<img src="${image_url}" />`,
+      {
+        maxWidth: 200,
+        minWidth: 200,
+        maxHeight: 200,
+        minHeight: 200,
+      },
+    );
+    marker.on("popupopen", function () {
+      const popupContent = document.querySelector(".leaflet-popup-content");
+      popupContent.addEventListener("click", () => {
+        router.push({ name: "iiif", query: { manifestURL: iiif_url } });
+      });
+    });
+    marker.addTo(photosLayer);
   });
 }
 watch(data, placePhotos);
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index a1d071e..4d9dca7 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
+      tify:
+        specifier: ^0.31.0
+        version: 0.31.0
     devDependencies:
       '@nuxt/devtools':
         specifier: ^1.3.9
@@ -4932,6 +4935,10 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  tify@0.31.0:
+    resolution: {integrity: sha512-HThe87eS9BB1V3Dsl7HyFD8R/9mOVg9o3Zc3ulH6f/AMO4ZNocLlyrEuIXc5XEu1JBlJheuthK3hOzSK5/d5cQ==}
+    engines: {node: '>= 18', npm: '>= 9'}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -11217,6 +11224,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tify@0.31.0: {}
+
   tiny-invariant@1.3.3: {}
 
   tinyglobby@0.2.5: