Add satellite layer to map (draft)

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') {
+DataSpace.createMap = function (coordinates, htmlId = 'map') {
-    const map = L.map(htmlId).setView(coordinates, 17);
+    const mapboxAttribution = `© <a href="https://www.mapbox.com/about/maps/">Mapbox</a>`;
+    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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    });
+    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', {
+    L.control.layers(baseMaps).addTo(map);
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).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 = 
-            `<a href="${link.replace('http://localhost:8000/resources/', replace)}">
-                ${link.substring(link.lastIndexOf('/') + 1)}
-            </a>`;
-        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);
-}
- */

js/views/index.js

@@ -1,12 +1,48 @@
-import {
+'use strict';
-    fetchResourceList,
-    createLinks,
-    BASE_URL
-} from "../ds.js";
 
-document.addEventListener('readystatechange', async () => {
+const BASE_URL = 'http://dataspace.ispc.cnr.it';
-    const resList = await fetchResourceList();
+/**
+ * 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 = 
+            `<a href="${link.replace('http://localhost:8000/resources/', replace)}">
+                ${link.substring(link.lastIndexOf('/') + 1)}
+            </a>`;
+        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=`);
 })
+