Stimulize-it

Author: JPrevost

app/controllers/record_controller.rb

@@ -16,7 +16,6 @@ def view
     # Manipulation of returned record would go here...
 
     @record = response&.data&.to_h&.dig('recordId')
-    @rectangle = bounding_box_to_coords(@record)
   end
 
   private

app/javascript/controllers/map_controller.js

@@ -0,0 +1,28 @@
+// app/javascript/controllers/map_controller.js
+import { Controller } from "@hotwired/stimulus"
+// import L from 'leaflet'
+export default class extends Controller {
+  static values = {
+    coords: Array,
+    id: String
+  }
+  connect() {
+    // Map logic goes here
+    // console.log(this.identifier)
+    // console.log(this.coordsValue)
+    // console.log(this.idValue)
+
+    var map = L.map(this.idValue);
+    
+    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);
+
+    // create an orange rectangle
+    L.rectangle(this.coordsValue, {color: "#ff7800", weight: 1}).addTo(map);
+
+    // // zoom the map to the rectangle bounds
+    map.fitBounds(this.coordsValue);
+  }
+}

app/views/record/_record_geo.html.erb

@@ -64,29 +64,7 @@
     <% if geospatial_coordinates?(@record['locations']) %>
       <h3 class="section-title">Geospatial coordinates</h3>
 
-      <div id="map" style="height: 180px"></div>
-      <script>
-        var map = L.map('map');
-        
-        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);
-
-        // define rectangle geographical bounds
-        // -71.158693, -71.064796, 42.395972, 42.351993
-        // var bounds = [[42.395972, -71.158693],[42.351993, -71.064796]];
-
-        console.log('#<%= @rectangle %>');
-        var bounds = <%= @rectangle %>;
-
-        // create an orange rectangle
-        L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
-
-        // zoom the map to the rectangle bounds
-        map.fitBounds(bounds);
-      </script>
-
+      <div id="map" style="height: 180px" data-controller="map" data-map-coords-value=<%= bounding_box_to_coords(@record).to_json %> data-map-id-value="map"></div>
       <p>
         <ul>
           <% parse_nested_field(@record['locations']).each do |location| %>

app/views/search/_result_geo.html.erb

@@ -25,7 +25,7 @@
     <!-- We only care about geospatial locations for this, as place names are also subjects. -->
     <% if geospatial_coordinates?(result_geo['locations']) %>
 
-      <%= render partial: 'shared/map', locals: { result_geo_counter: result_geo_counter,  result_geo: result_geo} %>
+      <div id=<%= "map_#{result_geo_counter}" %> style="height: 180px" data-controller="map" data-map-coords-value=<%= bounding_box_to_coords(result_geo).to_json %> data-map-id-value=<%= "map_#{result_geo_counter}" %>></div>
 
       <p>
         <ul>

app/views/shared/_map.html.erb

@@ -1,21 +1 @@
-<div id=<%= "map_#{result_geo_counter}" %> style="height: 180px"></div>
 
-<script>
-  var <%= "map_#{result_geo_counter}" %> = L.map('<%= "map_#{result_geo_counter}" %>');
-  
-  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_#{result_geo_counter}" %>);
-
-  // define rectangle geographical bounds
-  var bounds = <%= bounding_box_to_coords(result_geo) %>;
-
-  // console.log(bounds);
-
-  // create an orange rectangle
-  L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(<%= "map_#{result_geo_counter}" %>);
-
-  // zoom the map to the rectangle bounds
-  <%= "map_#{result_geo_counter}" %>.fitBounds(bounds);
-</script>