Add map support

This commit creates a dedicated Map model and
moves the JavaScript from view to a Stimulus controller.

- Stimulus.js https://stimulusjs.org
- Leaflet.js  https://leafletjs.org

Upcoming resources:
- https://discourse.stimulusjs.org/t/leafletjs-with-stimulusjs-on-rails-6/1343/4
- https://github.com/ghybs/leaflet-defaulticon-compatibility

4 files changed, 30 insertions, 21 deletions

diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
index 0c41e5a..ee76eb6 100644
--- a/app/controllers/welcome_controller.rb
+++ b/app/controllers/welcome_controller.rb
@@ -1,6 +1,7 @@
 class WelcomeController < ApplicationController
   # GET /
   def index
+    @map       = Map.first
     @resources = Resource.order(:uuid).page params[:page]
     Rails.logger.info "WECLOME ///// #{@resources&.count || 0}"
   end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 0b22f4b..aa3a8d7 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -7,4 +7,18 @@ module ApplicationHelper
       current_agency.send(:"#{role}?")
     end
   end
+
+  def map_container(map = Map.first)
+    raw tag.div(
+          tag.div(id: 'map',
+                  data: {
+                    target: 'map.container'
+                  }),
+          data: {
+            controller: 'map',
+            'map-latitude': map.latitude,
+            'map-longitude': map.longitude,
+            'map-zoom': map.zoom
+          })
+  end
 end
diff --git a/app/models/map.rb b/app/models/map.rb
new file mode 100644
index 0000000..10a55f6
--- /dev/null
+++ b/app/models/map.rb
@@ -0,0 +1,4 @@
+class Map < ApplicationRecord
+  include UUIDParameter
+  belongs_to :taxonomy
+end
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 1b6ab77..eac1eff 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -9,7 +9,17 @@
 
 <h1>Bienvenue à l'atelier carto d'IN COMMON</h1>
 
-<%= tag.div(id: 'map') %>
+<%= map_container %>
+
+<% content_for :aside do %>
+    <div data-controller="taxonomy" data-taxonomy-id="2519915f-d19c-4281-b758-f5ddb889d7fa">
+        <div class="leaflet-bar leaftlet-control" id="taxonomy-toggle">
+            <button data-action="taxonomy#toggle"></button>
+        </div>
+        <nav data-target="taxonomy.filter">
+        </nav>
+    </div>
+<% end %>
 
 <% content_for :debug do %>
     <% if current_user.present? %>
@@ -19,23 +29,3 @@
         <p><%= res.feature["geometry"]["coordinates"] %></p>
     <% end %><%# ensure it does not break when we don't have a record... %>
 <% end %>
-
-<% content_for :body_end do %>
-<script>
-	var mymap = L.map('map').setView([50.8503396, 4.3517103],13);
-
-	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
-		maxZoom: 18,
-		id: 'mapbox/streets-v11',
-		tileSize: 512,
-		zoomOffset: -1,
-		accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
-	}).addTo(mymap);
-	var marker = L.marker([50.850, 4.351]).addTo(mymap);
-	//CONTINUER AVEC LES WHILE ET CONDITIONS, @resources ne contient que 25 elements (lié au nombre d'élément par page?) -- oui
-	//OU PLUTOT UTILISER POSTGRES POUR FAIRE DES REQUESTES SUR @resources
-	var count = 0
-	console.log(count)
-</script>
-<% end %>