Style layers and features; add jsdoc and fonts

js/caprigis.js

@@ -5,18 +5,58 @@
  */
 const GIS = {};
 
-const BASE_URL = location.href;
+const optionsVincoli = {
+    color: '#222',
+    opacity: 0.8,
+    weight: 1,
+    fillColor: '#987db7',
+    fillOpacity: 0.8
+};
+const optionsSiti = {
+    color: '#800040',
+    opacity: 1,
+    weight: 2.5,
+    fillColor: '#800040',
+    fillOpacity: 0.8
+};
+const optionsPaesistici = {
+    color: '#222',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#ff8000',
+    fillOpacity: 0.8
+};
 
+const BASE_URL = location.href;
+/**
+ * 
+ * @param {?string} text 
+ */
+function capitalize(text) {
+    let capital = text;
+    if (text) {
+        let words = text.split(' ');
+        capital = '';
+
+        for (let w of words) {
+            w = w[0].toUpperCase() + w.slice(1);
+            capital += w + ' ';
+        }
+        capital.trimEnd();
+    }
+
+    return capital;
+}
 /**
  * @param {string} mapId
  * @param {number} zoomLevel
  * @returns {Map}
  */
 GIS.initMap = async function (mapId, zoomLevel = 15) {
-    let layerSiti = await this.loadLayer('siti.geojson', '#800040');
-    let layerVincoli = await this.loadLayer('vincoli.geojson');
+    let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
+    let layerSiti = await this.loadLayer('siti.geojson', optionsSiti, false);
     // TODO named parameters??
-    let layerPaesistici = await this.loadLayer('paesistici.geojson', '#222', '#ff8000');
+    let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici);
     let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxNativeZoom : 22,
         maxZoom: 22,
@@ -40,37 +80,28 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
     };
 
     let layerControl = L.control.layers(baseMap, archeo).addTo(map);
-
-    //DEBUG
-    // Il sistema di riferimento per i livelli geoJSON è EPSG3857
 }
 /**
  * @todo Distinguere tipo di geojson per contenuto popup 
  * @param {string} geoJSON 
- * @param {Map} map 
+ * @param {{color, opacity, weight, fillColor, fillOpacity}} options Style options for features
+ * @param {boolean} popup Should the features have a popup? 
  */
-GIS.loadLayer = async function (geoJSON, color = '#222', fillColor = '#987db7') {
+GIS.loadLayer = async function (geoJSON, options, popup = true) {
     const data = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
         .then(res => res.json())
         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
 
-    // DEBUG
-    console.log(data.features);
-
     // Show data from feature in popUp?
     const layer = new L.geoJson(data, {
         style: function (feature) {
-            let style = {
-                color: color,
-                opacity: 0.8,
-                weight: 1,
-                fillColor: fillColor,
-                fillOpacity: 0.8
-            };
+            let style = options;
             return style;
         },
         onEachFeature: function (feature, layer) {
-            layer.bindPopup(GIS.featurePopup(geoJSON, feature));
+            if (popup) {
+                layer.bindPopup(GIS.featurePopup(geoJSON, feature));
+            }
         }
     });
 
@@ -85,23 +116,17 @@ GIS.loadLayer = async function (geoJSON, color = '#222', fillColor = '#987db7')
  * @returns {string} The popup's content
  */
 GIS.featurePopup = function (layerName, feature) {
+    const html = `
+        <table class="table m-2">
+        <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr>
+        <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr>
+        <tr><td class="text-bold">Comune</td><td>${capitalize(feature.properties.COMUNE)}</td></tr>
+        <tr><td class="text-bold">Proprietà</td><td>${capitalize(feature.properties.PROPRIETA)}</td></tr>
+        </table>
+    `;
     const content = {
-        'vincoli.geojson' : `
-                <table class="table m-2">
-                <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr>
-                <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr>
-                <tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr>
-                <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr>
-                </table>
-            `,
-        'paesistici.geojson' : `
-                <table class="table m-2">
-                <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr>
-                <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr>
-                <tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr>
-                <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr>
-                </table>
-            `,
+        'vincoli.geojson' : html,
+        'paesistici.geojson' : html,
     };
 
     return content[layerName];

js/jsdoc.json

@@ -0,0 +1,19 @@
+{
+    "source": {
+        "include": ["caprigis.js", "index.js"],
+        "includePattern": ".js$",
+        "excludePattern": "(vendor/|docs)"
+    },
+
+    "plugins": ["plugins/markdown"],
+
+    "opts": {
+        "encoding": "utf8",
+        "destination": "docs/",
+        "recurse": true,
+        "verbose": true,
+        "theme_opts": {
+            "theme": "light"
+        }
+    }
+}