diff --git a/js/ds.js b/js/ds.js index 4447633..b699990 100644 --- a/js/ds.js +++ b/js/ds.js @@ -1,4 +1,5 @@ 'use strict'; +const MAPBOX_API_KEY = 'pk.eyJ1IjoiZ2VyYW5nMSIsImEiOiJjbDg5MHZxcG8wMmo3M3BudnphMWhnN2ZrIn0.SsFGVF-EMHwRYTp7njmb_Q'; /** * @namespace DataSpace */ @@ -129,12 +130,33 @@ DataSpace.printReport = function () { * * @return {void} */ -DataSpace.createMap = function(coordinates, htmlId = 'map') { - const map = L.map(htmlId).setView(coordinates, 17); +DataSpace.createMap = function (coordinates, htmlId = 'map') { + const mapboxAttribution = `© Mapbox`; + const mapboxSat = `https://api.mapbox.com/v4/mapbox.satellite/18/152278/101181.webp?access_token=${MAPBOX_API_KEY}`; + const streets = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 18, + attribution: '© OpenStreetMap' + }); + const satellite = L.tileLayer( + mapboxSat, + { + id: 'mapbox/satellite-v9', + tileSize: 512, + zoomOffset: -1, + attribution: mapboxAttribution + } + ); + const baseMaps = { + "OpenStreetMap": streets, + "Mapbox Satellite": satellite + }; + const map = L.map(htmlId, { + center: coordinates, + zoom: 18, + layers: [streets, satellite] + }); - L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' - }).addTo(map); + L.control.layers(baseMaps).addTo(map); L.marker(coordinates).addTo(map) .bindPopup(`lat.: ${coordinates[0]}, long. : ${coordinates[1]}`) @@ -146,7 +168,7 @@ DataSpace.createMap = function(coordinates, htmlId = 'map') { * * @return {string[]} */ -DataSpace.getImagesSrc = function(resource) { +DataSpace.getImagesSrc = function (resource) { // TODO hardcoded... const filesUri = `${this.BASE_URL}/files/uploadedfiles/`; @@ -201,42 +223,3 @@ export default DataSpace; * Query report links to determine * resource instance type... */ - - -/** - * Create links list - * @param {string[]} links The fetched resource links - * @param {string} id The ID of the UL element - * @param {string} replace The string that should replace loalhost... - * - * @return {void} -export function createLinks(links, id, replace) -{ - for (const link of links) { - const item = document.createElement('li'); - - item.innerHTML = - ` - ${link.substring(link.lastIndexOf('/') + 1)} - `; - document.querySelector(`#${id}`).appendChild(item); - } -} - */ -/** - * @todo Query report links to determine resource type? - * @param {int} max Max number of resources to list - * (randomly selected) - * - * @returns {Array} An array with selected resource links -export async function fetchResourceList(max = 20) -{ - // TODO Errors!! - const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`) - .then(res => res.json()) - .catch(); - - // Arbitrary slice... - return list['ldp:contains'].slice(100, max + 100); -} - */ \ No newline at end of file diff --git a/js/views/index.js b/js/views/index.js index 0d83bed..f102759 100644 --- a/js/views/index.js +++ b/js/views/index.js @@ -1,12 +1,48 @@ -import { - fetchResourceList, - createLinks, - BASE_URL -} from "../ds.js"; +'use strict'; -document.addEventListener('readystatechange', async () => { - const resList = await fetchResourceList(); +const BASE_URL = 'http://dataspace.ispc.cnr.it'; +/** + * Create links list + * @param {string[]} links The fetched resource links + * @param {string} id The ID of the UL element + * @param {string} replace The string that should replace loalhost... + * + * @return {void} + */ +function createLinks(links, id, replace) +{ + for (const link of links) { + const item = document.createElement('li'); + + item.innerHTML = + ` + ${link.substring(link.lastIndexOf('/') + 1)} + `; + document.querySelector(`#${id}`).appendChild(item); + } +} +/** + * @todo Query report links to determine resource type? + * @param {int} max Max number of resources to list + * (randomly selected) + * + * @returns {Array} An array with selected resource links + */ +async function fetchResourceList(max = 20) +{ + // TODO Errors!! + const list = await fetch(`${BASE_URL}${RES_ENDPOINT}`) + .then(res => res.json()) + .catch(); + + // Arbitrary slice... + return list['ldp:contains'].slice(100, max + 100); +} + +document.addEventListener('readystatechange', () => { + const resList = fetchResourceList(); createLinks(resList, 'links', `${BASE_URL}/report/`); createLinks( resList, 'rep-links', `/report?id=`); -}) \ No newline at end of file +}) +