Add a heatmap layer to the map to show the density of points

.app_version

@@ -1 +1 @@
-0.4.0
+0.4.1

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.4.1] — 2024-05-25
+
+### Added
+
+- Heatmap layer on the map to show the density of points
+
 ## [0.4.0] — 2024-05-25
 
 **BREAKING CHANGES**:
@@ -34,7 +40,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ---
 
-
 ## [0.3.2] — 2024-05-23
 
 ### Added

README.md

@@ -39,7 +39,11 @@ You can track your location using the Owntracks or Overland app.
 
 ### Location history
 
-You can view your location history on a map.
+You can view your location history on a map. On the map you can enable/disable the following layers:
+
+- Heatmap
+- Points
+- Lines between points
 
 ### Statistics
 

app/javascript/controllers/maps_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 import L, { circleMarker } from "leaflet"
+import "leaflet.heat"
 
 // Connects to data-controller="maps"
 export default class extends Controller {
@@ -17,17 +18,21 @@ export default class extends Controller {
 
     var markersArray = this.markersArray(markers)
     var markersLayer = L.layerGroup(markersArray)
+    var hearmapMarkers = markers.map(element => [element[0], element[1], 1]);
 
     var polylineCoordinates = markers.map(element => element.slice(0, 2));
     var polylineLayer = L.polyline(polylineCoordinates, { color: 'blue', opacity: 0.6, weight: 3 })
+    var heatmapLayer = L.heatLayer(hearmapMarkers, {radius: 25}).addTo(map);
 
     var controlsLayer = {
       "Points": markersLayer,
-      "Polyline": polylineLayer
+      "Polyline": polylineLayer,
+      "Heatmap": heatmapLayer
     }
 
     var layerControl = L.control.layers(this.baseMaps(), controlsLayer).addTo(map);
 
+
     this.addTileLayer(map);
     // markersLayer.addTo(map);
     polylineLayer.addTo(map);

config/importmap.rb

@@ -1,15 +1,18 @@
+# frozen_string_literal: true
+
 # Pin npm packages by running ./bin/importmap
 
-pin_all_from "app/javascript/channels", under: "channels"
+pin_all_from 'app/javascript/channels', under: 'channels'
 
-pin "application", preload: true
-pin "@rails/actioncable", to: "actioncable.esm.js"
-pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
-pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
-pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
-pin_all_from "app/javascript/controllers", under: "controllers"
+pin 'application', preload: true
+pin '@rails/actioncable', to: 'actioncable.esm.js'
+pin '@hotwired/turbo-rails', to: 'turbo.min.js', preload: true
+pin '@hotwired/stimulus', to: 'stimulus.min.js', preload: true
+pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js', preload: true
+pin_all_from 'app/javascript/controllers', under: 'controllers'
 
-pin "leaflet" # @1.9.4
-pin "leaflet-providers" # @2.0.0
-pin "chartkick", to: "chartkick.js"
-pin "Chart.bundle", to: "Chart.bundle.js"
+pin 'leaflet' # @1.9.4
+pin 'leaflet-providers' # @2.0.0
+pin 'chartkick', to: 'chartkick.js'
+pin 'Chart.bundle', to: 'Chart.bundle.js'
+pin 'leaflet.heat' # @0.2.0