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

1 files changed, 11 insertions, 21 deletions

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 %>