Add padding to map bounds after loading points

rsmithlal · rsmithlal · commit c1fed4a9c19d · 2025-04-11T12:02:21.000-02:30
diff --git a/app/javascript/controllers/better_together/map_controller.js b/app/javascript/controllers/better_together/map_controller.js
@@ -88,14 +88,14 @@ export default class extends Controller {
       const popupContent = this.useLabelAsPopupValue ? label : popup_html
       const popup = marker.bindPopup(popupContent)
 
-      if (points.length == 1 && this.enablePopupsValue && popupContent) {
+      if (points.length === 1 && this.enablePopupsValue && popupContent) {
         popup.openPopup() // Automatically open the popup
       }
 
       return marker
     })
 
     const bounds = L.latLngBounds(points.map(point => [point.lat, point.lng]))
-    this.map.fitBounds(bounds)
+    this.map.fitBounds(bounds, { padding: [50, 50] }) // Add padding to ensure points are visible
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -88,14 +88,14 @@ export default class extends Controller {`
`88`	`88`	`const popupContent = this.useLabelAsPopupValue ? label : popup_html`
`89`	`89`	`const popup = marker.bindPopup(popupContent)`
`90`	`90`
`91`		`- if (points.length == 1 && this.enablePopupsValue && popupContent) {`
	`91`	`+ if (points.length === 1 && this.enablePopupsValue && popupContent) {`
`92`	`92`	`popup.openPopup() // Automatically open the popup`
`93`	`93`	`}`
`94`	`94`
`95`	`95`	`return marker`
`96`	`96`	`})`
`97`	`97`
`98`	`98`	`const bounds = L.latLngBounds(points.map(point => [point.lat, point.lng]))`
`99`		`- this.map.fitBounds(bounds)`
	`99`	`+ this.map.fitBounds(bounds, { padding: [50, 50] }) // Add padding to ensure points are visible`
`100`	`100`	`}`
`101`	`101`	`}`