diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 6053fee6..c8729b6e 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/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); diff --git a/app/javascript/maps/areas.js b/app/javascript/maps/areas.js index 4312b733..f3f5f4f7 100644 --- a/app/javascript/maps/areas.js +++ b/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);