Allow map to be configured to show popups or not and to use label for the popup value

Author: rsmithlal

app/javascript/controllers/better_together/map_controller.js

@@ -7,7 +7,9 @@ export default class extends Controller {
     center: String,
     spaces: Array,
     zoom: Number,
-    extent: String
+    extent: String,
+    enablePopups: { type: Boolean, default: true }, // Default to enabling popups
+    useLabelAsPopup: { type: Boolean, default: false } // Default to using popup_html
   }
 
   connect() {
@@ -80,11 +82,16 @@ export default class extends Controller {
     }
 
     const markers = points.map(point => {
-      const { lat, lng, label } = point
+      const { lat, lng, label, popup_html } = point
       const marker = L.marker([lat, lng]).addTo(this.map)
-      if (label) {
-        marker.bindPopup(label).openPopup() // Automatically open the popup
+
+      if (this.enablePopupsValue) {
+        const popupContent = this.useLabelAsPopupValue ? label : popup_html
+        if (popupContent) {
+          marker.bindPopup(popupContent).openPopup() // Automatically open the popup
+        }
       }
+
       return marker
     })
 

app/views/better_together/shared/_map.html.erb

@@ -1,13 +1,14 @@
-
-<%# locals: (map:)%>
+<%# locals: (map:, enable_popups: true, use_label_as_popup: false) %>
 
 <% if map %>
   <div class="map" id="<%= dom_id(map) %>"
       data-controller="better_together--map"
       data-better_together--map-center-value="<%= map.center_for_leaflet %>"
-      data-better_together--map-spaces-value="<%= map.leaflet_points %>"
+      data-better_together--map-spaces-value="<%= map.leaflet_points.to_json %>"
       data-better_together--map-zoom-value="<%= map.zoom %>"
-      data-better_together--map-extent-value="<%= map.viewport %>">
+      data-better_together--map-extent-value="<%= map.viewport %>"
+      data-better_together--map-enable-popups-value="<%= enable_popups %>"
+      data-better_together--map-use-label-as-popup-value="<%= use_label_as_popup %>">
     <div class="map-controls">
       <button class="btn btn-secondary" data-action="better_together--map#switchToOSM">Map</button>
       <button class="btn btn-secondary" data-action="better_together--map#switchToSatellite">Satellite</button>