Update main.js

ZsoltMONOLITE · Dec 2, 2023 · 4e0cea3 · 4e0cea3
1 parent 1711149
commit 4e0cea3
Showing 1 changed file with 19 additions and 85 deletions.
diff --git a/main.js b/main.js
@@ -1,10 +1,5 @@
 /* global L Papa */
 
-/*
- * Script to display two tables from Google Sheets as point and geometry layers using Leaflet
- * The Sheets are then imported using PapaParse and overwrite the initially laded layers
- */
-
 // PASTE YOUR URLs HERE
 // these URLs come from Google Sheets 'shareable link' form
 // the first is the geometry layer and the second the points
@@ -19,9 +14,6 @@ let map;
 let sidebar;
 let panelID = "my-info-panel";
 
-/*
- * init() is called when the page has loaded
- */
 function init() {
   // Create a new Leaflet map centered on the continental US
   map = L.map("map").setView([51.5, -0.1], 14);
@@ -31,7 +23,7 @@ function init() {
     "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png",
     {
       attribution:
-        "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> &copy; <a href='http://cartodb.com/attributions'>CartoDB</a>",
+        "© <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> © <a href='http://cartodb.com/attributions'>CartoDB</a>",
       subdomains: "abcd",
       maxZoom: 19,
     }
@@ -71,22 +63,13 @@ function init() {
   });
 }
 
-/*
- * Expects a JSON representation of the table with properties columns
- * and a 'geometry' column that can be parsed by parseGeom()
- */
 function addGeoms(data) {
   data = data.data;
-  // Need to convert the PapaParse JSON into a GeoJSON
-  // Start with an empty GeoJSON of type FeatureCollection
-  // All the rows will be inserted into a single GeoJSON
   let fc = {
     type: "FeatureCollection",
     features: [],
   };
-
   for (let row in data) {
-    // The Sheets data has a column 'include' that specifies if that row should be mapped
     if (data[row].include == "y") {
       let features = parseGeom(JSON.parse(data[row].geometry));
       features.forEach((el) => {
@@ -99,7 +82,6 @@ function addGeoms(data) {
     }
   }
 
-  // The geometries are styled slightly differently on mouse hovers
   let geomStyle = { color: "#2ca25f", fillColor: "#99d8c9", weight: 2 };
   let geomHoverStyle = { color: "green", fillColor: "#2ca25f", weight: 3 };
 
@@ -113,42 +95,24 @@ function addGeoms(data) {
           e.target.setStyle(geomHoverStyle);
         },
         click: function (e) {
-          // This zooms the map to the clicked geometry
-          // Uncomment to enable
-          // map.fitBounds(e.target.getBounds());
-
-          // if this isn't added, then map.click is also fired!
-          L.DomEvent.stopPropagation(e);
-
           document.getElementById("sidebar-title").innerHTML =
             e.target.feature.properties.name;
           document.getElementById("sidebar-content").innerHTML =
             e.target.feature.properties.description;
           sidebar.open(panelID);
         },
       });
+      // Always-on labels for the polygons
+      layer.bindTooltip(feature.properties.name, { permanent: true, opacity: 1 });
     },
     style: geomStyle,
   }).addTo(map);
 }
 
-/*
- * addPoints is a bit simpler, as no GeoJSON is needed for the points
- */
 function addPoints(data) {
   data = data.data;
   let pointGroupLayer = L.layerGroup().addTo(map);
-
-  // Choose marker type. Options are:
-  // (these are case-sensitive, defaults to marker!)
-  // marker: standard point with an icon
-  // circleMarker: a circle with a radius set in pixels
-  // circle: a circle with a radius set in meters
   let markerType = "marker";
-
-  // Marker radius
-  // Wil be in pixels for circleMarker, metres for circle
-  // Ignore for point
   let markerRadius = 100;
 
   for (let row = 0; row < data.length; row++) {
@@ -166,65 +130,35 @@ function addPoints(data) {
     }
     marker.addTo(pointGroupLayer);
 
-    // UNCOMMENT THIS LINE TO USE POPUPS
-    //marker.bindPopup('<h2>' + data[row].name + '</h2>There's a ' + data[row].description + ' here');
+    // Pop-up marker with all data
+    marker.bindPopup(`
+      <h2>${data[row].name}</h2>
+      <p>Description: ${data[row].description}</p>
+      <p>Program: ${data[row].program}</p>
+      <p>Client: ${data[row].client}</p>
+      <p>Dropbox: ${data[row].dropbox}</p>
+    `);
 
-    // COMMENT THE NEXT GROUP OF LINES TO DISABLE SIDEBAR FOR THE MARKERS
-    marker.feature = {
-      properties: {
-        name: data[row].name,
-        description: data[row].description,
-      },
-    };
+    // Always-on labels for the points
+    marker.bindTooltip(data[row].name, { permanent: true, opacity: 1 });
+
+    // Sidebar feature for zooming
     marker.on({
       click: function (e) {
-        L.DomEvent.stopPropagation(e);
-        document.getElementById("sidebar-title").innerHTML =
-          e.target.feature.properties.name;
-        document.getElementById("sidebar-content").innerHTML =
-          e.target.feature.properties.description;
-        sidebar.open(panelID);
+        map.setView([data[row].lat, data[row].lon], 14);
       },
     });
-    // COMMENT UNTIL HERE TO DISABLE SIDEBAR FOR THE MARKERS
-
-    // AwesomeMarkers is used to create fancier icons
-    let icon = L.AwesomeMarkers.icon({
-      icon: "info-circle",
-      iconColor: "white",
-      markerColor: data[row].color,
-      prefix: "fa",
-      extraClasses: "fa-rotate-0",
-    });
-    if (!markerType.includes("circle")) {
-      marker.setIcon(icon);
-    }
   }
 }
 
-/*
- * Accepts any GeoJSON-ish object and returns an Array of
- * GeoJSON Features. Attempts to guess the geometry type
- * when a bare coordinates Array is supplied.
- */
 function parseGeom(gj) {
-  // FeatureCollection
   if (gj.type == "FeatureCollection") {
     return gj.features;
-  }
-
-  // Feature
-  else if (gj.type == "Feature") {
+  } else if (gj.type == "Feature") {
     return [gj];
-  }
-
-  // Geometry
-  else if ("type" in gj) {
+  } else if ("type" in gj) {
     return [{ type: "Feature", geometry: gj }];
-  }
-
-  // Coordinates
-  else {
+  } else {
     let type;
     if (typeof gj[0] == "number") {
       type = "Point";