Add leaflet-gesture-handling.js leaflet plugin

Author: rsmithlal

app/assets/config/better_together_manifest.js

@@ -2,6 +2,7 @@
 
 //= link_tree ../../javascript .js
 //= link_tree ../stylesheets .css
+//= link_tree ../../../vendor/stylesheets .css
 //= link_tree ../stylesheets .scss
 //= link_tree ../images
 
@@ -19,4 +20,5 @@
 //= link imagesloaded.min.js
 
 //= link leaflet.js
+//= link leaflet-gesture-handling.js
 //= link leaflet-providers.js

app/assets/stylesheets/better_together/application.scss

@@ -10,6 +10,7 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
+ *= require leaflet-gesture-handling.min
  *= require_self
  */
 

app/javascript/controllers/better_together/map_controller.js

@@ -1,6 +1,9 @@
+// Polyfill for `global` to fix compatibility issues with leaflet-gesture-handling
+
 // app/javascript/controllers/better_together/map_controller.js
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus'
 import L from 'leaflet'
+import 'leaflet-gesture-handling' // Import the library to ensure it is loaded globally
 
 export default class extends Controller {
   static values = {
@@ -26,7 +29,10 @@ export default class extends Controller {
   }
 
   initializeMap(center, zoom, extent) {
-    this.map = L.map(this.element).setView(center, zoom)
+    this.map = L.map(this.element, {
+      gestureHandling: true // Enable gesture handling
+    }).setView(center, zoom)
+
     this.osmLayer = L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(this.map)
     this.satelliteLayer = L.tileLayer.provider('Esri.WorldImagery')
 
@@ -36,6 +42,7 @@ export default class extends Controller {
     }
 
     this.addPointsWithLabels(this.spacesValue)
+
     // this.map.on('click', (e) => {
     //   console.log(`Map clicked at: ${e.latlng}`)
     // })
@@ -60,7 +67,7 @@ export default class extends Controller {
 
     const success = (pos) => {
       const crd = pos.coords
-      console.log("Your current position is:")
+      console.log('Your current position is:')
       console.log(`Latitude : ${crd.latitude}`)
       console.log(`Longitude: ${crd.longitude}`)
       console.log(`More or less ${crd.accuracy} meters.`)

bin/importmap

@@ -0,0 +1,6 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# require_relative '../config/application'
+require_relative '../lib/better_together/engine'
+require 'importmap/commands'

config/importmap.rb

@@ -32,8 +32,9 @@
 pin 'masonry', to: 'masonry.min.js' # @4.2.2
 pin 'imagesloaded', to: 'imagesloaded.min.js' # @5.0.0
 
-pin 'leaflet' # @1.9.4
-pin 'leaflet-providers' # @2.0.0
+pin 'leaflet', preload: true # @1.9.4
+pin 'leaflet-gesture-handling', to: 'leaflet-gesture-handling.js', preload: true # Ensure it is preloaded # @1.2.2
+pin 'leaflet-providers', preload: true # @2.0.0
 # pin "trix" # @2.1.13
 
 # Optional: Module shims

vendor/javascript/leaflet-gesture-handling.js

@@ -0,0 +1 @@
+@-webkit-keyframes leaflet-gestures-fadein{0%{opacity:0}100%{opacity:1}}@keyframes leaflet-gestures-fadein{0%{opacity:0}100%{opacity:1}}.leaflet-container:after{-webkit-animation:leaflet-gestures-fadein .8s backwards;animation:leaflet-gestures-fadein .8s backwards;color:#fff;font-family:Roboto,Arial,sans-serif;font-size:22px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:461;pointer-events:none}.leaflet-gesture-handling-scroll-warning:after,.leaflet-gesture-handling-touch-warning:after{-webkit-animation:leaflet-gestures-fadein .8s forwards;animation:leaflet-gestures-fadein .8s forwards}.leaflet-gesture-handling-touch-warning:after{content:attr(data-gesture-handling-touch-content)}.leaflet-gesture-handling-scroll-warning:after{content:attr(data-gesture-handling-scroll-content)}