Implement leaflet map with points and polyline

app/controllers/points_controller.rb

@@ -2,8 +2,8 @@ class PointsController < ApplicationController
   before_action :authenticate_user!
 
   def index
-    @points = Point.all
+    @points = Point.all.order(timestamp: :asc)
 
-    @coordinates = @points.as_json(only: [:latitude, :longitude])
+    @coordinates = @points.pluck(:latitude, :longitude).map { [_1.to_f, _2.to_f] }
   end
 end

app/javascript/controllers/maps_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+import L from "leaflet"
+
+// Connects to data-controller="maps"
+export default class extends Controller {
+  static targets = ["container"]
+
+  connect() {
+    var markers = JSON.parse(this.element.dataset.coordinates)
+    var map = L.map(this.containerTarget).setView(markers[0], 14);
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+
+    for (var i = 0; i < markers.length; i++) {
+
+      var lat = markers[i][0];
+      var lon = markers[i][1];
+
+      L.marker([lat, lon]).addTo(map);
+    }
+
+    L.polyline(markers).addTo(map);
+  }
+
+  disconnect() {
+    this.map.remove();
+  }
+}

app/views/layouts/application.html.erb

@@ -7,6 +7,7 @@
     <%= csp_meta_tag %>
 
     <link href="https://cdn.jsdelivr.net/npm/daisyui@4.7.2/dist/full.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
 
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

app/views/points/index.html.erb

@@ -1,3 +1,3 @@
-<%= js_map(@coordinates, style: "mapbox://styles/mapbox/outdoors-v12", trail: true, width: '100%', height: '800px') %>
+<div data-controller="maps" data-coordinates="<%= @coordinates %>">
-
+  <div data-maps-target="container" class="h-[25rem] w-auto min-h-screen"></div>
-<%#= render 'points/table', points: @points %>
+</div>

config/importmap.rb

@@ -10,5 +10,5 @@ pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
 
 pin "mapkick/bundle", to: "mapkick.bundle.js"
-pin "leaflet", to: "https://ga.jspm.io/npm:leaflet@1.9.4/dist/leaflet-src.js"
+pin "leaflet" # @1.9.4
-pin "leaflet-providers", to: "https://ga.jspm.io/npm:leaflet-providers@2.0.0/leaflet-providers.js"
+pin "leaflet-providers" # @2.0.0

package-lock.json

@@ -5,7 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
-        "@hotwired/turbo-rails": "^7.3.0"
+        "@hotwired/turbo-rails": "^7.3.0",
+        "leaflet": "^1.9.4"
       },
       "devDependencies": {
         "daisyui": "^4.7.3"
@@ -98,6 +99,11 @@
       "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
       "dev": true
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -248,6 +254,11 @@
       "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
       "dev": true
     },
+    "leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
-    "@hotwired/turbo-rails": "^7.3.0"
+    "@hotwired/turbo-rails": "^7.3.0",
+    "leaflet": "^1.9.4"
   },
   "devDependencies": {
     "daisyui": "^4.7.3"

yarn.lock

@@ -58,6 +58,11 @@ fastparse@^1.1.2:
   resolved "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz"
   integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
 
+leaflet@^1.9.4:
+  version "1.9.4"
+  resolved "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz"
+  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
 nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"