nicolo/ds-front-test
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Use Leaflet for map

Browse Source
This commit is contained in:
Nicolò P 2023-03-02 16:07:15 +01:00
parent 00b5195a1f
commit 167545ffbf
7 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/.ds.css.swp
View File

Binary file not shown.

3
css/ds.css
View File

@ -59,6 +59,9 @@ table.table td,
table.table th { table.table th {
border: none; border: none;
} }
#map {
height: 600px;
}
/* Print styles */ /* Print styles */
@media print { @media print {

21
js/ds.js
View File

@ -12,10 +12,14 @@ export const OBJECT_ORDER = {
"Object Chronology" : null, "Object Chronology" : null,
"Object Era" : null, "Object Era" : null,
"Object Geographical Context of Discovery" : null, "Object Geographical Context of Discovery" : null,
"Object Description" : null,
"Object Conservation State" : null,
"Object Dimensions" : null, "Object Dimensions" : null,
"Object Material" : 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 = { export const SAMPLE_ORDER = {
@ -82,6 +86,19 @@ export function printReport() {
window.print(); 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 * @todo Use TS to define object shape
* @param {object} resource The resource object (Arches JSON!) * @param {object} resource The resource object (Arches JSON!)

14
js/views/report.js
View File

@ -5,7 +5,8 @@ import {
fetchReport, fetchReport,
printReport, printReport,
getImageSrc, getImageSrc,
OBJECT_ORDER OBJECT_ORDER,
attachMap
} from "../ds.js"; } from "../ds.js";
document.addEventListener('readystatechange', async () => { document.addEventListener('readystatechange', async () => {
@ -27,8 +28,15 @@ document.addEventListener('readystatechange', async () => {
} }
resType = resKeys[0].split(' ')[0]; resType = resKeys[0].split(' ')[0];
// TODO use coordinates for map // TODO use match...
const coordinates = resource['Coordinates']; 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')); resKeys = resKeys.filter(e => !e.includes('Coordinates'));

1
package.json
View File

@ -7,6 +7,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"fontawesome-free": "^1.0.4", "fontawesome-free": "^1.0.4",
"leaflet": "^1.9.3",
"plotly.js": "^2.18.2", "plotly.js": "^2.18.2",
"spectre.css": "^0.5.9", "spectre.css": "^0.5.9",
"spotlight.js": "^0.7.8" "spotlight.js": "^0.7.8"

8
report/index.html
View File

@ -4,8 +4,10 @@
<title>DataSpace | Report</title> <title>DataSpace | Report</title>
<link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" /> <link href="../vendor/spectre.css/dist/spectre.css" rel="stylesheet" />
<link href="../css/ds.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" /> <link rel="shortcut icon" href="../img/favicon_dataspace.svg" />
<script src="../vendor/spotlight.js/dist/spotlight.bundle.js"></script> <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> <script src="../js/views/report.js" type="module"></script>
</head> </head>
<body> <body>
@ -32,7 +34,7 @@
</header> </header>
<main> <main>
<div class="columns report-container"> <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 class="mt-2 p-2" id="rep-tit">
</h2> </h2>
<table class="table table-hover mt-2" id="resource"> <table class="table table-hover mt-2" id="resource">
@ -40,8 +42,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="column col-4 p-2"> <div class="column col-6 p-2 mt-2">
<img id="map" class="img-responsive mt-2" src="../img/map.png" /> <div id="map"></div>
</div> </div>
<div class="container grid-md"> <div class="container grid-md">
<div class="columns d-hide mt-2" id="gallery"> <div class="columns d-hide mt-2" id="gallery">

5
yarn.lock
View File

@ -1080,6 +1080,11 @@ kdbush@^3.0.0:
resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0" resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew== 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: levn@~0.3.0:
version "0.3.0" version "0.3.0"
resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee" resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"