Sentiment Heatmap as seperate page

frontend/css/heatmap.css

@@ -0,0 +1,60 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+#map {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+}
+/* .mapbox-gl-toggle_sentiment {
+  background-repeat: no-repeat;
+  background-position: center;
+  pointer-events: auto;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjIwIiAgIGhlaWdodD0iMjAiICAgdmlld0JveD0iMCAwIDIwIDIwIiAgIGlkPSJzdmcxOTE2NyIgICB2ZXJzaW9uPSIxLjEiICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45MStkZXZlbCtvc3htZW51IHIxMjkxMSIgICBzb2RpcG9kaTpkb2NuYW1lPSJzcXVhcmUuc3ZnIj4gIDxkZWZzICAgICBpZD0iZGVmczE5MTY5IiAvPiAgPHNvZGlwb2RpOm5hbWVkdmlldyAgICAgaWQ9ImJhc2UiICAgICBwYWdlY29sb3I9IiNmZmZmZmYiICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIgICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIiAgICAgaW5rc2NhcGU6em9vbT0iMTEuMzEzNzA4IiAgICAgaW5rc2NhcGU6Y3g9IjExLjY4MTYzNCIgICAgIGlua3NjYXBlOmN5PSI5LjI4NTcxNDMiICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiICAgICBzaG93Z3JpZD0idHJ1ZSIgICAgIHVuaXRzPSJweCIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4MCIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlua3NjYXBlOndpbmRvdy14PSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjIzIiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIgICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSI+ICAgIDxpbmtzY2FwZTpncmlkICAgICAgIHR5cGU9Inh5Z3JpZCIgICAgICAgaWQ9ImdyaWQxOTcxNSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGExOTE3MiI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICAgIDxkYzp0aXRsZSAvPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxnICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIgICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiICAgICBpZD0ibGF5ZXIxIiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMTAzMi4zNjIyKSI+ICAgIDxwYXRoICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiICAgICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MC41O21hcmtlcjpub25lO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiICAgICAgIGQ9Im0gNSwxMDM5LjM2MjIgMCw2IDIsMiA2LDAgMiwtMiAwLC02IC0yLC0yIC02LDAgeiBtIDMsMCA0LDAgMSwxIDAsNCAtMSwxIC00LDAgLTEsLTEgMCwtNCB6IiAgICAgICBpZD0icmVjdDc3OTciICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2NjY2NjY2NjY2NjY2NjY2NjIiAvPiAgICA8Y2lyY2xlICAgICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS42MDAwMDAwMjttYXJrZXI6bm9uZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIiAgICAgICBpZD0icGF0aDQzNjQiICAgICAgIGN4PSI2IiAgICAgICBjeT0iMTA0Ni4zNjIyIiAgICAgICByPSIyIiAvPiAgICA8Y2lyY2xlICAgICAgIGlkPSJwYXRoNDM2OCIgICAgICAgc3R5bGU9ImNvbG9yOiMwMDAwMDA7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTt2aXNpYmlsaXR5OnZpc2libGU7ZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxLjYwMDAwMDAyO21hcmtlcjpub25lO2VuYWJsZS1iYWNrZ3JvdW5kOmFjY3VtdWxhdGUiICAgICAgIGN4PSIxNCIgICAgICAgY3k9IjEwNDYuMzYyMiIgICAgICAgcj0iMiIgLz4gICAgPGNpcmNsZSAgICAgICBpZD0icGF0aDQzNzAiICAgICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO2Rpc3BsYXk6aW5saW5lO292ZXJmbG93OnZpc2libGU7dmlzaWJpbGl0eTp2aXNpYmxlO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MS42MDAwMDAwMjttYXJrZXI6bm9uZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlIiAgICAgICBjeD0iNiIgICAgICAgY3k9IjEwMzguMzYyMiIgICAgICAgcj0iMiIgLz4gICAgPGNpcmNsZSAgICAgICBzdHlsZT0iY29sb3I6IzAwMDAwMDtkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlO3Zpc2liaWxpdHk6dmlzaWJsZTtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjEuNjAwMDAwMDI7bWFya2VyOm5vbmU7ZW5hYmxlLWJhY2tncm91bmQ6YWNjdW11bGF0ZSIgICAgICAgaWQ9InBhdGg0MzcyIiAgICAgICBjeD0iMTQiICAgICAgIGN5PSIxMDM4LjM2MjIiICAgICAgIHI9IjIiIC8+ICA8L2c+PC9zdmc+)
+} */
+
+#menu {
+  background: #fff;
+  position: absolute;
+  z-index: 1;
+  top: 10px;
+  right: 10px;
+  border-radius: 3px;
+  width: 120px;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  text-anchor: middle;
+  }
+
+  #menu a {
+  font-size: 13px;
+  color: #404040;
+  display: block;
+  margin: 0;
+  padding: 0;
+  padding: 10px;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  text-align: center;
+  }
+
+  #menu a:last-child {
+  border: none;
+  }
+
+  #menu a:hover {
+  background-color: #f8f8f8;
+  color: #404040;
+  }
+
+  #menu a.active {
+  background-color: #3887be;
+  color: #ffffff;
+  }
+
+  #menu a.active:hover {
+  background: #3074a4
+  }

frontend/data/testData.geojson

@@ -0,0 +1,31 @@
+{
+  "type": "FeatureCollection",
+  "features": [{
+    "type": "Feature",
+    "properties": {
+      "username": "Username",
+      "timestamp": "00:00:00",
+      "message": "Hi",
+      "icon": "park",
+      "sentiment": 2
+    },
+    "geometry": {
+      "type": "Point",
+      "coordinates": [-87.623177, 41.881832]
+    }
+  },
+  {
+    "type": "Feature",
+    "properties": {
+      "username": "Username2",
+      "timestamp": "02:00:00",
+      "message": "Hello!",
+      "icon": "park",
+      "sentiment": -1.5
+    },
+    "geometry": {
+      "type": "Point",
+      "coordinates": [-87.625501, 41.871294]
+    }
+  }]
+}

frontend/js/heatmap.js

@@ -0,0 +1,188 @@
+mapboxgl.accessToken = 'pk.eyJ1IjoiYW5kcmV3c2NvaGVuIiwiYSI6ImNsYWlydHpkZjA1NjUzbnA4MWFyOHZqd24ifQ.2taNnYIsG1csIs8QmJ45SQ'
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/mapbox/dark-v11',
+  center: [-87.65005, 41.85003],
+  zoom: 10
+})
+
+map.on('load', () => {
+  map.addSource('cta', {
+    type: 'geojson',
+    data: './data/cta.geojson'
+    // data: './data/testData.geojson'
+  })
+
+  map.addLayer(
+    {
+      id: 'Sentiment',
+      type: 'heatmap',
+      source: 'cta',
+      maxzoom: 15,
+      layout: {
+        // Make the layer visible by default.
+        visibility: 'none'
+      },
+      paint: {
+        // increase weight as diameter breast height increases
+        'heatmap-weight': {
+          property: 'sentiment',
+          type: 'exponential',
+          stops: [
+            [1, 0],
+            [62, 1]
+          ]
+        },
+        // increase intensity as zoom level increases
+        'heatmap-intensity': {
+          stops: [
+            [11, 1],
+            [15, 3]
+          ]
+        },
+        // use sequential color palette to use exponentially as the weight increases
+        'heatmap-color': [
+          'interpolate',
+          ['linear'],
+          ['heatmap-density'],
+          0,
+          'rgba(33,102,172,0)',
+          0.2,
+          'rgb(103,169,207)',
+          0.4,
+          'rgb(209,229,240)',
+          0.6,
+          'rgb(253,219,199)',
+          0.8,
+          'rgb(239,138,98)',
+          1,
+          'rgb(178,24,43)'
+        ],
+        // increase radius as zoom increases
+        'heatmap-radius': {
+          stops: [
+            [11, 15],
+            [15, 20]
+          ]
+        },
+        // decrease opacity to transition into the circle layer
+        'heatmap-opacity': {
+          default: 1,
+          stops: [
+            [14, 1],
+            [15, 0]
+          ]
+        }
+      }
+    },
+    'waterway-label'
+  )
+
+  map.addLayer(
+    {
+      id: 'cta-point',
+      type: 'circle',
+      source: 'cta',
+      minzoom: 14,
+      paint: {
+        // increase the radius of the circle as the zoom level and route value increases
+        'circle-radius': {
+          property: 'sentiment',
+          type: 'exponential',
+          stops: [
+            [{ zoom: 15, value: 1 }, 5],
+            [{ zoom: 15, value: 62 }, 10],
+            [{ zoom: 22, value: 1 }, 20],
+            [{ zoom: 22, value: 62 }, 50]
+          ]
+        },
+        'circle-color': {
+          property: 'sentiment',
+          type: 'exponential',
+          stops: [
+            [0, 'rgba(236,222,239,0)'],
+            [10, 'rgb(236,222,239)'],
+            [20, 'rgb(208,209,230)'],
+            [30, 'rgb(166,189,219)'],
+            [40, 'rgb(103,169,207)'],
+            [50, 'rgb(28,144,153)'],
+            [60, 'rgb(1,108,89)']
+          ]
+        },
+        'circle-stroke-color': 'white',
+        'circle-stroke-width': 1,
+        'circle-opacity': {
+          stops: [
+            [14, 0],
+            [15, 1]
+          ]
+        }
+      }
+    },
+    'waterway-label'
+  )
+})
+
+// click on tree to view route in a popup
+map.on('click', 'cta-point', (event) => {
+  new mapboxgl.Popup()
+    .setLngLat(event.features[0].geometry.coordinates)
+    .setHTML(`<strong>Sentiment:</strong> ${event.features[0].properties.sentiment}`)
+    .addTo(map)
+})
+
+// After the last frame rendered before the map enters an "idle" state.
+map.on('idle', () => {
+  // If these two layers were not added to the map, abort
+  if (!map.getLayer('Sentiment') || !map.getLayer('cta-point')) {
+    return
+  }
+
+  // Enumerate ids of the layers.
+  const toggleableLayerIds = ['Sentiment']
+
+  // Set up the corresponding toggle button for each layer.
+  for (const id of toggleableLayerIds) {
+  // Skip layers that already have a button set up.
+    if (document.getElementById(id)) {
+      continue
+    }
+
+    // Create a link.
+    const link = document.createElement('a')
+    link.id = id
+    link.href = '#'
+    link.textContent = id
+    link.className = ''
+
+    // Show or hide layer when the toggle is clicked.
+    link.onclick = function (e) {
+      const clickedLayer = this.textContent
+      e.preventDefault()
+      e.stopPropagation()
+
+      const visibility = map.getLayoutProperty(
+        clickedLayer,
+        'visibility'
+      )
+
+      // Toggle layer visibility by changing the layout object's visibility property.
+      if (visibility === 'visible') {
+        map.setLayoutProperty(clickedLayer, 'visibility', 'none')
+        this.className = ''
+      } else {
+        this.className = 'active'
+        map.setLayoutProperty(
+          clickedLayer,
+          'visibility',
+          'visible'
+        )
+      }
+    }
+
+    const layers = document.getElementById('menu')
+    layers.appendChild(link)
+  }
+})
+
+map.addControl(new mapboxgl.NavigationControl(), 'top-left')

frontend/js/map.js

@@ -1,5 +1,3 @@
-mapboxgl.accessToken = 'pk.eyJ1IjoiYWpjaHUyOCIsImEiOiJja3o2M3MzMWswd200MnZwNGdieTNlaHRjIn0.BePZiTybP8rLoo6yQKon_w'
-
 const map = new mapboxgl.Map({
   container: 'map',
   style: 'mapbox://styles/ajchu28/cla8p13jr002s14qvhnow3727',

frontend/js/sntmGeo.js

@@ -0,0 +1,55 @@
+// async function getAllPoems () {
+//   const res = await fetch('/api/poems')
+//   const data = await res.json()
+//   data.forEach(poem => {
+//     poem.author
+//   });
+// }
+
+// Sentiment Analysis package (installed from npm)
+async function getSentiment (text) {
+  const Sentiment = require('sentiment')
+  const sentiment = new Sentiment()
+  const result = sentiment.analyze(text)
+  return (result.comparative)
+}
+
+// Test Data of Poems
+const testData = [
+  {
+    poem: 'a cat jumped over an evil demon',
+    date: 1,
+    author: 'nick',
+    lat: -87.65005,
+    long: 41.85003,
+    route: 123
+  },
+  {
+    poem: 'a dog licked a delicious lollipop',
+    date: 1,
+    author: 'tina',
+    lat: -107.65005,
+    long: 41.85003,
+    route: 124
+  }
+]
+
+// Run Sentiment Analysis on the Poems and convert out poem JSON to a GEOJSON for Mapping
+async function getGeoJson() {
+  const outGeoJson = {}
+  const sentiment = []
+  const coords = []
+
+  for (const key in testData) {
+    const aPoem = testData[key]
+    aPoem.sentm = getSentiment(aPoem.poem)
+    sentiment.push(aPoem.sentm)
+    coords.push([aPoem.lat, aPoem.long])
+  }
+
+  outGeoJson.type = 'Feature'
+  outGeoJson.properties = sentiment
+  outGeoJson.geometry = ({ type: 'Point', coordinates: coords })
+
+  return outGeoJson
+}

frontend/sentimentHeatmap.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Demo: Make a heatmap with Mapbox GL JS</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
+    <link
+      href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css"
+      rel="stylesheet"
+    />
+    <link href ="css/heatmap.css" rel="stylesheet"/>
+  </head>
+
+  <body>
+    <nav id="menu"></nav>
+    <div id="map"></div>
+    <script src="js/heatmap.js"></script>
+  </body>
+
+</html>