From 16edbdda2933fe6588f9e8efff64be6f661639ad Mon Sep 17 00:00:00 2001
From: Stefan Peters <stefandesu@exo.pm>
Date: Wed, 26 Jun 2024 09:44:59 +0200
Subject: [PATCH] Implement map view via Leaflet

---
 package-lock.json                 | 24 ++++++++++++++++++++++++
 package.json                      |  2 ++
 src/client/components/MapView.vue | 29 +++++++++++++++++++++++++++++
 src/client/views/ItemView.vue     |  9 +++++++++
 4 files changed, 64 insertions(+)
 create mode 100644 src/client/components/MapView.vue

diff --git a/package-lock.json b/package-lock.json
index 847cda2..c84c9fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@intlify/unplugin-vue-i18n": "^4.0.0",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
         "axios": "^1.7.2",
         "cocoda-sdk": "^3.4.8",
         "dotenv": "^16.4.5",
@@ -17,6 +18,7 @@
         "jskos-tools": "^1.0.37",
         "jskos-vue": "^0.3.5",
         "jsonld": "^8.3.2",
+        "leaflet": "^1.9.4",
         "portfinder": "^1.0.32",
         "rdflib": "^2.2.35",
         "vite-express": "^0.16.0",
@@ -948,6 +950,23 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue-leaflet/vue-leaflet": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
+      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
+      "dependencies": {
+        "vue": "^3.2.25"
+      },
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/leaflet": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.4.27",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
@@ -3812,6 +3831,11 @@
         }
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
diff --git a/package.json b/package.json
index 12750bb..f90e2b5 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "axios": "^1.7.2",
     "cocoda-sdk": "^3.4.8",
     "dotenv": "^16.4.5",
@@ -37,6 +38,7 @@
     "jskos-tools": "^1.0.37",
     "jskos-vue": "^0.3.5",
     "jsonld": "^8.3.2",
+    "leaflet": "^1.9.4",
     "portfinder": "^1.0.32",
     "rdflib": "^2.2.35",
     "vite-express": "^0.16.0",
diff --git a/src/client/components/MapView.vue b/src/client/components/MapView.vue
new file mode 100644
index 0000000..bd307ea
--- /dev/null
+++ b/src/client/components/MapView.vue
@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  longitude: Number,
+  latitude: Number,
+})
+
+import "leaflet/dist/leaflet.css"
+import { LMap, LTileLayer, LMarker } from "@vue-leaflet/vue-leaflet"
+import { ref } from "vue"
+
+const zoom = ref(8)
+</script>
+
+<template>
+  <div style="height: 300px">
+    <l-map
+      ref="map"
+      v-model:zoom="zoom"
+      :center="[latitude, longitude]"
+      :use-global-leaflet="false">
+      <l-tile-layer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        layer-type="base"
+        name="OpenStreetMap"
+        attribution="&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>" />
+      <l-marker :lat-lng="[latitude, longitude]" />
+    </l-map>
+  </div>
+</template>
diff --git a/src/client/views/ItemView.vue b/src/client/views/ItemView.vue
index 58b508d..e2dd0bb 100644
--- a/src/client/views/ItemView.vue
+++ b/src/client/views/ItemView.vue
@@ -6,6 +6,8 @@ import { schemes, registry, loadTop, loadNarrower, loadConcept, loadAncestors, s
 import { computed, ref, watch } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { utils } from "jskos-vue"
+import MapView from "@/components/MapView.vue"
+
 import { getRouterUrl } from "@/utils.js"
 const route = useRoute()
 const router = useRouter()
@@ -138,6 +140,13 @@ const topConcepts = computed(() => {
           <pre><code>{{ JSON.stringify(jskos.deepCopy(concept || scheme, ["topConceptOf", "inScheme", "topConcepts"]), null, 2) }}
             </code></pre>
         </tab>
+        <tab
+          v-if="concept?.location?.coordinates?.length"
+          title="Map">
+          <MapView
+            :longitude="concept.location.coordinates[0]"
+            :latitude="concept.location.coordinates[1]" />
+        </tab>
       </template>
     </item-details>
   </div>