Remove test circle

app/javascript/controllers/maps_controller.js

@@ -113,86 +113,6 @@ export default class extends Controller {
 
     // Initialize areasLayer as a feature group and add it to the map immediately
     this.areasLayer = new L.FeatureGroup().addTo(this.map);
-
-    // Create a custom pane for the test circle
-    this.map.createPane('testCirclePane');
-    this.map.getPane('testCirclePane').style.zIndex = 650; // Above most layers
-    this.map.getPane('testCirclePane').style.pointerEvents = 'all'; // Ensure events are received
-
-    // Add a simple test circle directly to the map
-    const testCircle = L.circle([52.514568, 13.350111], {
-      radius: 500,
-      color: 'blue',
-      fillColor: '#30f',
-      fillOpacity: 0.8,
-      weight: 3,
-      interactive: true,
-      bubblingMouseEvents: false,
-      pane: 'testCirclePane'
-    }).addTo(this.map);
-
-    // Add a popup to the test circle
-    testCircle.bindPopup("Test Circle - Berlin");
-
-    // Pan to the test circle location
-    this.map.setView([52.514568, 13.350111], 14);
-
-    // Store reference to test circle
-    this.testCircle = testCircle;
-
-    // Wait for the circle to be added to the DOM
-    setTimeout(() => {
-      // Get the circle's SVG path element
-      const circlePath = testCircle.getElement();
-      if (circlePath) {
-        console.log('Found circle element:', circlePath);
-
-        // Add CSS styles
-        circlePath.style.cursor = 'pointer';
-        circlePath.style.transition = 'all 0.3s ease';
-
-        // Add direct DOM event listeners
-        circlePath.addEventListener('click', (e) => {
-          console.log('Direct click on circle!');
-          e.stopPropagation();
-          testCircle.openPopup();
-        });
-
-        circlePath.addEventListener('mouseenter', (e) => {
-          console.log('Direct mouseenter on circle!');
-          e.stopPropagation();
-          testCircle.setStyle({
-            fillOpacity: 1,
-            weight: 4
-          });
-        });
-
-        circlePath.addEventListener('mouseleave', (e) => {
-          console.log('Direct mouseleave on circle!');
-          e.stopPropagation();
-          testCircle.setStyle({
-            fillOpacity: 0.8,
-            weight: 3
-          });
-        });
-      } else {
-        console.log('Could not find circle element');
-      }
-    }, 1000);
-
-    // Add debug click handler to map
-    this.map.on('click', (e) => {
-      console.log('Map clicked at:', e.latlng);
-      // Log all layers at click point
-      const point = this.map.latLngToContainerPoint(e.latlng);
-      const size = this.map.getSize();
-      console.log('Visible layers:', this.map._layers);
-      console.log('Map size:', size);
-      console.log('Click point:', point);
-      console.log('Test circle visible:', this.map.hasLayer(testCircle));
-      console.log('Test circle bounds:', testCircle.getBounds());
-    });
-
     this.photoMarkers = L.layerGroup();
 
     this.setupScratchLayer(this.countryCodesMap);

app/javascript/maps/areas.js

@@ -187,15 +187,11 @@ export function fetchAndDrawAreas(areasLayer, apiKey) {
     return response.json();
   })
   .then(data => {
-    console.log('Received areas:', data);
-
     // Clear existing areas
     areasLayer.clearLayers();
 
     data.forEach(area => {
       if (area.latitude && area.longitude && area.radius && area.name && area.id) {
-        console.log('Creating circle for area:', area);
-
         // Convert string coordinates to numbers
         const lat = parseFloat(area.latitude);
         const lng = parseFloat(area.longitude);
@@ -255,13 +251,11 @@ export function fetchAndDrawAreas(areasLayer, apiKey) {
 
             // Add direct DOM event listeners
             circlePath.addEventListener('click', (e) => {
-              console.log('Area circle clicked:', area.name);
               e.stopPropagation();
               circle.openPopup();
             });
 
             circlePath.addEventListener('mouseenter', (e) => {
-              console.log('Mouse entered area:', area.name);
               e.stopPropagation();
               circle.setStyle({
                 fillOpacity: 0.8,
@@ -270,7 +264,6 @@ export function fetchAndDrawAreas(areasLayer, apiKey) {
             });
 
             circlePath.addEventListener('mouseleave', (e) => {
-              console.log('Mouse left area:', area.name);
               e.stopPropagation();
               circle.setStyle({
                 fillOpacity: 0.5,
@@ -279,12 +272,8 @@ export function fetchAndDrawAreas(areasLayer, apiKey) {
             });
           }
         }, 100);
-
-        console.log('Adding circle to areasLayer');
       }
     });
-
-    console.log('All circles added to areasLayer');
   })
   .catch(error => {
     console.error('There was a problem with the fetch request:', error);