Implement map view via Leaflet

package.json

@@ -30,13 +30,15 @@
   },
   "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",
     "express": "^4.19.2",
     "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",

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>

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>