Use Leaflet for map

2023-03-02 16:07:15 +01:00 · 2023-03-02 16:07:15 +01:00 · 167545ffbf
commit 167545ffbf
parent 00b5195a1f
7 changed files with 45 additions and 9 deletions
--- a/css/.ds.css.swp
+++ b/css/.ds.css.swp
--- a/css/ds.css
+++ b/css/ds.css
@ -59,6 +59,9 @@ table.table td,
 table.table th {
    border: none;
 }
+#map {
+    height: 600px;
+}

 /* Print styles */
@media print {
@ -70,4 +73,4 @@ table.table th {
    #map {
        display: none;
    }
-}
+}
--- a/js/ds.js
+++ b/js/ds.js
@ -12,10 +12,14 @@ export const OBJECT_ORDER = {
    "Object Chronology" : null,
    "Object Era" : null,
    "Object Geographical Context of Discovery" : null,
-    "Object Description" : null,
-    "Object Conservation State" : null,
    "Object Dimensions" : null,
    "Object Material" : null,
+    "Object Description" : null,
+    "Object Conservation State" : null,
+    "Object Reused?" : null,
+    "Object Project" : null,
+    "Object Compiler" : null,
+    "Object Bibliography" : null,
 };
 /*
 export const SAMPLE_ORDER = {
@ -82,6 +86,19 @@ export function printReport() {
        window.print();
    });
 }
+export function attachMap(coordinates, htmlId = 'map') {
+    const map = L.map(htmlId).setView(coordinates, 13);
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    L.marker(coordinates).addTo(map);
+    /*
+        .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
+        .openPopup();
+    */
+}
 /**
 * @todo Use TS to define object shape
 * @param {object} resource The resource object (Arches JSON!)
--- a/js/views/report.js
+++ b/js/views/report.js
@ -5,7 +5,8 @@ import {
    fetchReport,
    printReport,
    getImageSrc,
-    OBJECT_ORDER
+    OBJECT_ORDER,
+    attachMap
 } from "../ds.js";

 document.addEventListener('readystatechange', async () => {
@ -27,8 +28,15 @@ document.addEventListener('readystatechange', async () => {
    }

    resType = resKeys[0].split(' ')[0]; 
-    // TODO use coordinates for map
-    const coordinates = resource['Coordinates'];
+    // TODO use match...
+    const coordinates = resource['Object Coordinates']
+        .replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1")
+        .split(', ');
+
+    let lat, long;
+    [long, lat] = coordinates;
+    
+    attachMap([lat, long]);

    resKeys = resKeys.filter(e => !e.includes('Coordinates'));

--- a/package.json
+++ b/package.json
@ -7,6 +7,7 @@
  "license": "MIT",
  "dependencies": {
    "fontawesome-free": "^1.0.4",
+    "leaflet": "^1.9.3",
    "plotly.js": "^2.18.2",
    "spectre.css": "^0.5.9",
    "spotlight.js": "^0.7.8"
--- a/report/index.html
+++ b/report/index.html
@ -4,8 +4,10 @@
        <title>DataSpace | Report</title>
        <link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
        <link href="../css/ds.css" rel="stylesheet" />
+        <link href="../vendor/leaflet/dist/leaflet.css" rel="stylesheet" />
        <link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
        <script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script>
+        <script src="../vendor/leaflet/dist/leaflet.js"></script>
        <script src="../js/views/report.js" type="module"></script>
    </head>
    <body>
@ -32,7 +34,7 @@
        </header>
        <main>
            <div class="columns report-container">
-                <div class="column col-8">
+                <div class="column col-6">
                    <h2 class="mt-2 p-2" id="rep-tit">
                    </h2>
                    <table class="table table-hover mt-2" id="resource">
@ -40,8 +42,8 @@
                        </tbody>
                    </table>
                </div>
-                <div class="column col-4 p-2">
-                    <img id="map" class="img-responsive mt-2" src="../img/map.png" />
+                <div class="column col-6 p-2 mt-2">
+                    <div id="map"></div>
                </div>
                <div class="container grid-md">
                    <div class="columns d-hide mt-2" id="gallery">
--- a/yarn.lock
+++ b/yarn.lock
@ -1080,6 +1080,11 @@ kdbush@^3.0.0:
  resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
  integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==

+leaflet@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.3.tgz#52ec436954964e2d3d39e0d433da4b2500d74414"
+  integrity sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==
+
 levn@~0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"