Use Leaflet for map

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!)

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'));