From aea8ec8c208d322a8cc4e447c75713a88af71b96 Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Wed, 17 Apr 2024 21:05:31 +0200 Subject: [PATCH 1/4] Add padding to the main content area and adjust the stats layout for mobile --- app/views/layouts/application.html.erb | 2 +- app/views/stats/index.html.erb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index dbd7a696..7f3d83c6 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -18,7 +18,7 @@
<%= render 'shared/navbar' %> <%= render 'shared/flash' %> -
+
<%= yield %>
diff --git a/app/views/stats/index.html.erb b/app/views/stats/index.html.erb index a03d12d5..b66625f1 100644 --- a/app/views/stats/index.html.erb +++ b/app/views/stats/index.html.erb @@ -1,5 +1,5 @@
-
+
<%= number_with_delimiter(current_user.total_km) %> km From 44c2d7eaf2d7bc2f2775f80447a4a4329e3afffc Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Wed, 17 Apr 2024 21:54:04 +0200 Subject: [PATCH 2/4] Implement toggling visibility of polylines and points on the map --- CHANGELOG.md | 11 ++++ app/javascript/controllers/maps_controller.js | 50 +++++++++++++++++-- 2 files changed, 58 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5580e950..5f96716c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,17 @@ 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 diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 519ea4dc..99413083 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -10,11 +10,55 @@ 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 osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 19, + attribution: '© OpenStreetMap' + }); + + var osmHOT = 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' + }); + + var baseMaps = { + "OpenStreetMap": osm, + "OpenStreetMap.HOT": osmHOT + }; + + var map = L.map(this.containerTarget, { + layers: [osm, osmHOT] + }).setView([center[0], center[1]], 14); + + + var markersArray = [] + + for (var i = 0; i < markers.length; i++) { + var lat = markers[i][0]; + var lon = markers[i][1]; + + var popupContent = this.popupContent(markers[i]); + var circleMarker = L.circleMarker([lat, lon], {radius: 4}) + + markersArray.push(circleMarker.bindPopup(popupContent).openPopup()) + } + + var markersLayer = L.layerGroup(markersArray) + markersLayer.addTo(map); + + var polylineCoordinates = markers.map(element => element.slice(0, 2)); + var polylineLayer = L.polyline(polylineCoordinates) + polylineLayer.addTo(map); + + var controlsLayer = { + "Points": markersLayer, + "Polyline": polylineLayer + } + + var layerControl = L.control.layers(baseMaps, controlsLayer).addTo(map); this.addTileLayer(map); - this.addMarkers(map, markers); - this.addPolyline(map, markers); + // var markersLayer = this.addMarkers(map, markers); + // this.addPolyline(map, markers); this.addLastMarker(map, markers); } From e0244335b7c1027c37fdeb3b2f7b4ef6ea92bc3c Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Wed, 17 Apr 2024 22:00:23 +0200 Subject: [PATCH 3/4] Move js spaghetti to a tiny bit more structured codebase --- app/javascript/controllers/maps_controller.js | 82 +++++++++++-------- 1 file changed, 49 insertions(+), 33 deletions(-) diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 99413083..44044af0 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -10,55 +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 osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 19, - attribution: '© OpenStreetMap' - }); - - var osmHOT = 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' - }); - - var baseMaps = { - "OpenStreetMap": osm, - "OpenStreetMap.HOT": osmHOT - }; var map = L.map(this.containerTarget, { - layers: [osm, osmHOT] + layers: [this.osmMapLayer(), this.osmHotMapLayer()] }).setView([center[0], center[1]], 14); - - var markersArray = [] - - for (var i = 0; i < markers.length; i++) { - var lat = markers[i][0]; - var lon = markers[i][1]; - - var popupContent = this.popupContent(markers[i]); - var circleMarker = L.circleMarker([lat, lon], {radius: 4}) - - markersArray.push(circleMarker.bindPopup(popupContent).openPopup()) - } - + var markersArray = this.markersArray(markers) var markersLayer = L.layerGroup(markersArray) - markersLayer.addTo(map); var polylineCoordinates = markers.map(element => element.slice(0, 2)); var polylineLayer = L.polyline(polylineCoordinates) - polylineLayer.addTo(map); var controlsLayer = { "Points": markersLayer, "Polyline": polylineLayer } - var layerControl = L.control.layers(baseMaps, controlsLayer).addTo(map); + var layerControl = L.control.layers(this.baseMaps(), controlsLayer).addTo(map); this.addTileLayer(map); - // var markersLayer = this.addMarkers(map, markers); - // this.addPolyline(map, markers); + markersLayer.addTo(map); + polylineLayer.addTo(map); this.addLastMarker(map, markers); } @@ -66,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 ` Timestamp: ${this.formatDate(marker[4])}
From 9a29f23e22c13cf559df86e09d5cf19598a477d3 Mon Sep 17 00:00:00 2001 From: Eugene Burmakin Date: Wed, 17 Apr 2024 22:04:42 +0200 Subject: [PATCH 4/4] Update changelog --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f96716c..c4494a72 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,7 +22,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/). - Removed strong_params from POST /api/v1/points - ## [0.1.6.1] — 2024-04-06 ### Fixed