Refactor. Remove some indirection

app/assets/javascripts/tailwind/maps.js

@@ -1,50 +1,58 @@
 //= require maps/pano_utils
 
-async function initialisePano2(elem) {
+async function initialisePano2(elem, params) {
   const { StreetViewPanorama } = await google.maps.importLibrary("streetView");
   const { Marker } = await google.maps.importLibrary("marker")
 
-  var lat = Number(elem.dataset.lat);
-  var lng = Number(elem.dataset.lng);
-  var address = elem.dataset.address;
-
   // Can't yet figure out how to make the POV point at the marker
-  var pointToLookAt = new google.maps.LatLng(lat, lng);
+  var pointToLookAt = new google.maps.LatLng(params.lat, params.lng);
   var myPano = new StreetViewPanorama(elem,
-    {position: pointToLookAt, navigationControl: false, addressControl: false, zoom: 0, scrollwheel: false, fullscreenControl: false, linksControl: false});
+    {
+      position: pointToLookAt,
+      navigationControl: false,
+      addressControl: false,
+      zoom: 0,
+      scrollwheel: false,
+      fullscreenControl: false,
+      linksControl: false
+    });
   google.maps.event.addListener(myPano, 'position_changed', function() {
     // Orient the camera to face the position we're interested in
     var angle = computeAngle(pointToLookAt, myPano.getPosition());
     myPano.setPov({heading:angle, pitch:0, zoom:1});
   });
-  var panoMarker = new Marker({position: pointToLookAt, title: address});
+  var panoMarker = new Marker({position: pointToLookAt, title: params.address});
   panoMarker.setMap(myPano);
 }
 
-async function initialiseBasicMapWithMarker2(map_div) {
+async function initialiseBasicMapWithMarker2(map_div, params) {
   const { Map } = await google.maps.importLibrary("maps");
   const { Marker } = await google.maps.importLibrary("marker");
 
-  var center = { lat: Number(map_div.dataset.lat), lng: Number(map_div.dataset.lng) };
-  var address = map_div.dataset.address;
-  var zoom = Number(map_div.dataset.zoom);
-
+  var center = { lat: params.lat, lng: params.lng };
   var map = new Map(
     map_div,
-    { zoom: zoom, center: center, fullscreenControl: false, streetViewControl: false, draggable: false, backgroundColor: "#d1e6d9" }
+    {
+      zoom: params.zoom,
+      center: center,
+      fullscreenControl: false,
+      streetViewControl: false,
+      draggable: false,
+      backgroundColor: "#d1e6d9"
+    }
   );
-  new Marker({ position: center, map: map, title: address });
+  new Marker({
+    position: center,
+    map: map,
+    title: params.address
+  });
 
   return map;
 }
 
-async function initialiseAlertMap2(map_div) {
-  var lat = Number(map_div.dataset.lat);
-  var lng = Number(map_div.dataset.lng);
-  var radius_meters = Number(map_div.dataset.radiusMeters);
-
-  var map = await initialiseBasicMapWithMarker2(map_div);
-  return drawCircleOnMap2(map, lat, lng, radius_meters);
+async function initialiseAlertMap2(map_div, params) {
+  var map = await initialiseBasicMapWithMarker2(map_div, params);
+  return drawCircleOnMap2(map, params.lat, params.lng, params.radius_meters);
 }
 
 async function drawCircleOnMap2(map, centre_lat, centre_lng, radius_in_metres) {

app/views/_tailwind/alerts_new/edit.html.erb

@@ -12,7 +12,7 @@
   <%= form_with model: [:profile, @alert], builder: FormBuilders::Tailwind, class: "mt-5" do |f| %>
     <%= f.label :radius_meters, "Alert distance" %>
     <div x-data="{radius_meters: <%= @alert.radius_meters %>, circle: null}"
-         x-init="circle = await initialiseAlertMap2($refs.map); $watch('radius_meters', value => circle.setRadius(value))">
+         x-init="circle = await initialiseAlertMap2($refs.map, <%= { lat: @alert.lat, lng: @alert.lng, address: @alert.address, zoom: 13, radius_meters: @alert.radius_meters }.to_json %>); $watch('radius_meters', value => circle.setRadius(value))">
       <%= f.select :radius_meters,
                    # Using unicode tick (rather than an image) so that we don't have to other horrible things
                    # rubocop:disable Rails/OutputSafety
@@ -22,9 +22,7 @@
                    class: "w-full text-navy text-2xl font-normal py-4 mt-2 border-light-grey2",
                    "x-model.number": "radius_meters" %>
       <%# TODO: Add a fallback for the map (probably just tell the user) if javascript is disabled %>
-      <%= tag.div class: "h-80 bg-google-maps-green mt-4",
-                  data: { lat: @alert.lat, lng: @alert.lng, address: @alert.address, zoom: 13, radius_meters: @alert.radius_meters },
-                  "x-ref" => "map" %>
+      <%= tag.div class: "h-80 bg-google-maps-green mt-4", "x-ref" => "map" %>
     </div>
     <div class="mt-6">
       <%= f.button "Update distance" %>

app/views/_tailwind/applications/_map.html.erb

@@ -3,21 +3,17 @@
 <% if application.location %>
   <div class="flex justify-between">
     <div x-data
-          x-init="initialiseBasicMapWithMarker2($refs.map)"
+          x-init="initialiseBasicMapWithMarker2($refs.map, <%= { lat: application.lat, lng: application.lng, address: application.address, zoom: 16 }.to_json %>)"
           class="w-full xl:w-[528px] sm:h-[528px] aspect-1 h-auto">
-      <%= tag.div class: "bg-google-maps-green w-full h-full",
-                  data: { lat: application.lat, lng: application.lng, address: application.address, zoom: 16 },
-                  "x-ref" => "map" do %>
+      <%= tag.div class: "bg-google-maps-green w-full h-full", "x-ref" => "map" do %>
         <noscript><%= google_static_map(application, size: "528x528") %></noscript>
       <% end %>
     </div>
     <%# TODO: Don't show pano if there's no useful streetview available %>
     <div x-data
-        x-init="initialisePano2($refs.pano)"
+        x-init="initialisePano2($refs.pano, <%= { lat: application.lat, lng: application.lng, address: application.address }.to_json %>)"
         class="hidden xl:block w-[528px] h-[528px]">
-      <%= tag.div class: "w-full h-full",
-                  data: { lat: application.lat, lng: application.lng, address: application.address },
-                  "x-ref" => "pano" do %>
+      <%= tag.div class: "w-full h-full", "x-ref" => "pano" do %>
         <%# TODO: The no javascript version of streetview isn't working for some reason %>
         <noscript><%= google_static_streetview(application, size: "528x528") %></noscript>
       <% end %>