From 5f259a5bccaf83b0f5322894ff92d272ee7ac919 Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Tue, 29 Jul 2025 21:40:49 +0200
Subject: [PATCH] Fix missing areas button

---
 CHANGELOG.md                                  |  3 ++-
 app/javascript/controllers/maps_controller.js | 10 ++++++++++
 app/javascript/maps/areas.js                  | 13 +++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5adffd3c..434cb80e 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 1efff1e7..984ea671 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/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);
+        }
       }
     });
   }
diff --git a/app/javascript/maps/areas.js b/app/javascript/maps/areas.js
index 481f0ba4..69bd7a52 100644
--- a/app/javascript/maps/areas.js
+++ b/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">