kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-10 17:21:38 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove test circle

Browse source
This commit is contained in:
Eugene Burmakin 2025-02-07 21:19:34 +01:00
parent ffee59b7c3
commit 51724db874
2 changed files with 0 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
app/javascript/controllers/maps_controller.js
View file

@ -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);

11
app/javascript/maps/areas.js
View file

@ -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);