Fix missing areas button

CHANGELOG.md

@@ -19,7 +19,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## Fixed
 
-- Fixed a bug where import or notification could have been deleted by a different user.
+- Fixed a bug where import or notification could have been accessed by a different user.
+- Fixed a bug where draw control was not being added to the map when areas layer was enabled. #1583
 
 
 # [0.30.5] - 2025-07-26

app/javascript/controllers/maps_controller.js

@@ -509,6 +509,11 @@ export default class extends BaseController {
         }
       } else if (event.name === 'Tracks') {
         this.handleRouteLayerToggle('tracks');
+      } else if (event.name === 'Areas') {
+        // Show draw control when Areas layer is enabled
+        if (this.drawControl && !this.map.hasControl && !this.map._controlCorners.topleft.querySelector('.leaflet-draw')) {
+          this.map.addControl(this.drawControl);
+        }
       }
 
       // Manage pane visibility when layers are manually toggled
@@ -523,6 +528,11 @@ export default class extends BaseController {
 
         // Manage pane visibility when layers are manually toggled
         this.updatePaneVisibilityAfterLayerChange();
+      } else if (event.name === 'Areas') {
+        // Hide draw control when Areas layer is disabled
+        if (this.drawControl && this.map._controlCorners.topleft.querySelector('.leaflet-draw')) {
+          this.map.removeControl(this.drawControl);
+        }
       }
     });
   }

app/javascript/maps/areas.js

@@ -81,6 +81,19 @@ export function handleAreaCreated(areasLayer, layer, apiKey) {
   const radius = layer.getRadius();
   const center = layer.getLatLng();
 
+  // Configure the layer with the same settings as existing areas
+  layer.setStyle({
+    color: 'red',
+    fillColor: '#f03',
+    fillOpacity: 0.5,
+    weight: 2,
+    interactive: true,
+    bubblingMouseEvents: false
+  });
+  
+  // Set the pane to match existing areas
+  layer.options.pane = 'areasPane';
+
   const formHtml = `
     <div class="card w-96 bg-base-100 border border-base-300 shadow-xl">
       <div class="card-body">