diff --git a/main.js b/main.js index b7be89b8..948a4153 100644 --- 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: - "© OpenStreetMap © CartoDB", + "© OpenStreetMap © CartoDB", 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,13 +95,6 @@ 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 = @@ -127,28 +102,17 @@ function addGeoms(data) { 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('

' + data[row].name + '

There's a ' + data[row].description + ' here'); + // Pop-up marker with all data + marker.bindPopup(` +

${data[row].name}

+

Description: ${data[row].description}

+

Program: ${data[row].program}

+

Client: ${data[row].client}

+

Dropbox: ${data[row].dropbox}

+ `); - // 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";