diff --git a/css/.ds.css.swp b/css/.ds.css.swp deleted file mode 100644 index 857f5af..0000000 Binary files a/css/.ds.css.swp and /dev/null differ diff --git a/css/ds.css b/css/ds.css index 053c76b..644e086 100644 --- 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; } -} \ No newline at end of file +} diff --git a/js/ds.js b/js/ds.js index ddd69ef..70badae 100644 --- 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: '© OpenStreetMap contributors' + }).addTo(map); + + L.marker(coordinates).addTo(map); + /* + .bindPopup('A pretty CSS3 popup.
Easily customizable.') + .openPopup(); + */ +} /** * @todo Use TS to define object shape * @param {object} resource The resource object (Arches JSON!) diff --git a/js/views/report.js b/js/views/report.js index 8ec4dc7..07eef81 100644 --- 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')); diff --git a/package.json b/package.json index f49dfae..7ff26fc 100644 --- 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" diff --git a/report/index.html b/report/index.html index 92dbb4e..1914e2d 100644 --- a/report/index.html +++ b/report/index.html @@ -4,8 +4,10 @@ DataSpace | Report + + @@ -32,7 +34,7 @@
-
+

@@ -40,8 +42,8 @@
-
- +
+