[WIP] fixes loklak#275 - Adding heatmap overlay for CountryTweetMap app

Adding heat map layer.
djmgit · Jul 26, 2017 · aef57fb · aef57fb
1 parent 5a2ee90
commit aef57fb
Show file tree

Hide file tree

Showing 5 changed files with 1,053 additions and 6 deletions.
diff --git a/CountryTweetMap/index.html b/CountryTweetMap/index.html
@@ -23,6 +23,9 @@
      crossorigin=""></script>
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <!--<script src="scripts/heatmap.js"></script>
+    <script src="scripts/leaflet-heatmap.js"></script>-->
+    <script src="scripts/leaflet-heat.js"></script>
   </head>
   <body>
     <div class="sidenav">

diff --git a/CountryTweetMap/scripts/app.js b/CountryTweetMap/scripts/app.js
@@ -14,6 +14,8 @@ app.controller("app", function ($scope, $http) {
     $scope.plot = null;
     $scope.isLoading = false;
     $scope.error = "";
+    $scope.heatmapData = [];
+    $scope.totalTweets = 0;
     $(".date").datepicker();
     $(".date").datepicker( "option", "dateFormat", "yy-mm-dd");
     var LeafIcon = L.Icon.extend({
@@ -91,6 +93,28 @@ app.controller("app", function ($scope, $http) {
             });
     }
 
+    $scope.setupHeatMapData = function () {
+        $scope.totalTweets = 0;
+        $scope.heatmapData = [];
+        /*for (var key in $scope.tweetFreq) {
+            $scope.heatmapData.push({
+                lat: $scope.tweetFreq[key][0].place_country_center[1],
+                lng: $scope.tweetFreq[key][0].place_country_center[0],
+                count: $scope.tweetFreq[key].length
+            });
+            $scope.totalTweets += $scope.tweetFreq[key].length;s
+        }*/
+
+        for (var key in $scope.tweetFreq) {
+            $scope.heatmapData.push([
+                $scope.tweetFreq[key][0].place_country_center[1],
+                $scope.tweetFreq[key][0].place_country_center[0],
+                $scope.tweetFreq[key].length
+            ]);
+            $scope.totalTweets += $scope.tweetFreq[key].length;
+        }
+    }
+
     // Function to prepare frequency of tweets for individual countries
     $scope.prepareFreq = function(data) {
         data.forEach(function(status) {
@@ -105,8 +129,8 @@ app.controller("app", function ($scope, $http) {
         var sumLon = 0.0;
 
         for (var key in $scope.tweetFreq) {
-            sumLat += $scope.tweetFreq[key][0].place_country_center[0];
-            sumLon += $scope.tweetFreq[key][0].place_country_center[1];
+            sumLat += $scope.tweetFreq[key][0].place_country_center[1];
+            sumLon += $scope.tweetFreq[key][0].place_country_center[0];
             $scope.modalList.push({
                 country_name: $scope.tweetFreq[key][0].place_country,
                 country_code: $scope.tweetFreq[key][0].place_country_code,
@@ -116,6 +140,7 @@ app.controller("app", function ($scope, $http) {
         }
         mapCenterLat = sumLat / $scope.countryCount;
         mapCenterLon = sumLon / $scope.countryCount;
+        $scope.setupHeatMapData();
     }
 
     $scope.setUpInitialMap = function() {
@@ -175,15 +200,15 @@ app.controller("app", function ($scope, $http) {
             var markerIcon = null;
             var marker = null;
             if (size === $scope.tweetMax) {
-                markerIcon = L.marker(country.place_country_center, {icon: redIcon});
+                markerIcon = L.marker([country.place_country_center[1], country.place_country_center[0]], {icon: redIcon});
                 marker = $scope.getMarker(markerIcon, country, key);
                 countriesHigh.push(marker);
             } else if (size > rangeMid) {
-                markerIcon = L.marker(country.place_country_center, {icon: blueIcon});
+                markerIcon = L.marker([country.place_country_center[1], country.place_country_center[0]], {icon: blueIcon});
                 marker = $scope.getMarker(markerIcon, country, key);
                 countriesMedium.push(marker)
             } else {
-                markerIcon = L.marker(country.place_country_center, {icon: greenIcon});
+                markerIcon = L.marker([country.place_country_center[1], country.place_country_center[0]], {icon: greenIcon});
                 marker = $scope.getMarker(markerIcon, country, key);
                 countriesLow.push(marker);
             }
@@ -192,6 +217,40 @@ app.controller("app", function ($scope, $http) {
         var countryMediumGroup = L.layerGroup(countriesMedium);
         var countryLowGroup = L.layerGroup(countriesLow);
 
+        /*var heatMapPlotData = {
+            max: $scope.totalTweets,
+            data: $scope.heatmapData
+        }*/
+
+        /*var cfg = {
+            "radius": 4,
+            "maxOpacity": .8, 
+            "scaleRadius": true, 
+            "useLocalExtrema": true,
+            latField: 'lat',
+            lngField: 'lng',
+            valueField: 'count'
+        };*/
+
+        var gradientStart = (Math.round(($scope.totalTweets / 3) * 10) / 10).toFixed(1);
+        var gradientMiddle = (Math.round(($scope.totalTweets / 2) * 10) / 10).toFixed(1);
+        var gradientEnd = $scope.totalTweets;
+
+        var cfg = {
+            radius: 25,
+            max: $scope.totalTweets,
+            minOpacity: 0.6,
+            blur: 8,
+            gradient: {0.4: 'blue', 0.65: 'lime', 1.0: 'red'}
+        }
+
+        console.log($scope.heatmapData);
+        console.log(cfg);
+
+        //console.log(heatMapPlotData)
+
+        //var heatmapLayer = new HeatmapOverlay(cfg);
+
         var backgroundLight = L.tileLayer(
             'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
             {
@@ -208,16 +267,20 @@ app.controller("app", function ($scope, $http) {
             ],
             layers: [backgroundLight, countryHighGroup, countryMediumGroup, countryLowGroup]
         });
+        //heatmapLayer.setData(heatMapPlotData);
+        var heat = L.heatLayer($scope.heatmapData, cfg);
 
         var overlayMaps = {
             "Maximum tweets": countryHighGroup,
             "Medium tweets": countryMediumGroup,
-            "Low tweets": countryLowGroup
+            "Low tweets": countryLowGroup,
+            "Heatmap": heat
         };
         var baseMaps = {
             "basemap": backgroundLight
         };
         L.control.layers(baseMaps, overlayMaps).addTo($scope.map);
+
         $scope.isLoading = false;
     }