Holy heck this might work?

Author: JPrevost

app/controllers/record_controller.rb

@@ -16,10 +16,23 @@ def view
     # Manipulation of returned record would go here...
 
     @record = response&.data&.to_h&.dig('recordId')
+    @rectangle = bounding_box_to_coords
   end
 
   private
 
+  def bounding_box_to_coords
+    return unless geospatial_coordinates?(@record['locations'])
+
+    raw_bbox = @record['locations'].select { |l| l if l['kind'] == 'Bounding Box' }.first
+    bbox = raw_bbox['geoshape'].sub('BBOX (', '').sub(')', '')
+    bbox_array = bbox.split(', ')
+    coords = [[bbox_array[2].to_f, bbox_array[0].to_f], [bbox_array[3].to_f, bbox_array[1].to_f]]
+    Rails.logger.info("Raw BBox: #{raw_bbox}")
+    Rails.logger.info("Rectangle: #{coords}")
+    coords
+  end
+
   def validate_id!
     return if params[:id]&.strip.present?
 

app/views/record/_record_geo.html.erb

@@ -79,6 +79,39 @@
         <% end %>
       <% end %>
       </ul>
+
+      <% content_for :additional_meta_tag do %>
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+          crossorigin=""/>
+
+      <!-- Make sure you put this AFTER Leaflet's CSS -->
+          <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+              integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+              crossorigin=""></script>
+      <% end %>
+
+      <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>
     <% end %>
 
     <% if @record['notes'].present? %>