Merge pull request #17 from Freika/releases/0-1-7

0.1.7

CHANGELOG.md

@@ -5,13 +5,23 @@ 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.1.7] — 2024-04-17
+
+### Added
+
+- Map controls to toggle polylines and points visibility
+
+### Changed
+
+- Added content padding for mobile view
+- Fixed stat card layout for mobile view
+
 ## [0.1.6.3] — 2024-04-07
 
 ### Changed
 
 - Removed strong_params from POST /api/v1/points
 
-
 ## [0.1.6.1] — 2024-04-06
 
 ### Fixed

app/javascript/controllers/maps_controller.js

@@ -10,11 +10,27 @@ export default class extends Controller {
     var markers = JSON.parse(this.element.dataset.coordinates)
     var center = markers[markers.length - 1] || JSON.parse(this.element.dataset.center)
     var center = (center === undefined) ? [52.516667, 13.383333] : center;
-    var map = L.map(this.containerTarget).setView([center[0], center[1]], 14);
+
+    var map = L.map(this.containerTarget, {
+      layers: [this.osmMapLayer(), this.osmHotMapLayer()]
+    }).setView([center[0], center[1]], 14);
+
+    var markersArray = this.markersArray(markers)
+    var markersLayer = L.layerGroup(markersArray)
+
+    var polylineCoordinates = markers.map(element => element.slice(0, 2));
+    var polylineLayer = L.polyline(polylineCoordinates)
+
+    var controlsLayer = {
+      "Points": markersLayer,
+      "Polyline": polylineLayer
+    }
+
+    var layerControl = L.control.layers(this.baseMaps(), controlsLayer).addTo(map);
 
     this.addTileLayer(map);
-    this.addMarkers(map, markers);
-    this.addPolyline(map, markers);
+    markersLayer.addTo(map);
+    polylineLayer.addTo(map);
     this.addLastMarker(map, markers);
   }
 
@@ -22,6 +38,50 @@ export default class extends Controller {
     this.map.remove();
   }
 
+  osmMapLayer() {
+    return L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap'
+    })
+  }
+
+  osmHotMapLayer() {
+    return L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap contributors, Tiles style by Humanitarian OpenStreetMap Team hosted by OpenStreetMap France'
+    })
+  }
+
+  baseMaps() {
+    return {
+      "OpenStreetMap": this.osmMapLayer(),
+      "OpenStreetMap.HOT": this.osmHotMapLayer()
+    }
+  }
+
+  controlsLayer() {
+    return {
+      "Points": this.markersLayer,
+      "Polyline": this.polylineLayer
+    }
+  }
+
+  markersArray(markers_data) {
+    var markersArray = []
+
+    for (var i = 0; i < markers_data.length; i++) {
+      var lat = markers_data[i][0];
+      var lon = markers_data[i][1];
+
+      var popupContent = this.popupContent(markers_data[i]);
+      var circleMarker = L.circleMarker([lat, lon], {radius: 4})
+
+      markersArray.push(circleMarker.bindPopup(popupContent).openPopup())
+    }
+
+    return markersArray
+  }
+
   popupContent(marker) {
     return `
       <b>Timestamp:</b> ${this.formatDate(marker[4])}<br>

app/views/layouts/application.html.erb

@@ -18,7 +18,7 @@
     <div class='container mx-auto'>
       <%= render 'shared/navbar' %>
       <%= render 'shared/flash' %>
-      <div class="flex flex-row gap-5 w-full">
+      <div class="flex flex-row gap-5 w-full px-5">
         <%= yield %>
       </div>
     </div>

app/views/stats/index.html.erb

@@ -1,5 +1,5 @@
 <div class="w-full">
-  <div class="stats shadow w-full bg-base-200">
+  <div class="stats stats-vertical lg:stats-horizontal shadow w-full bg-base-200">
     <div class="stat text-center">
       <div class="stat-value text-primary">
         <%= number_with_delimiter(current_user.total_km) %> km