mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-10 17:21:38 -05:00
Implement area clicks
This commit is contained in:
Eugene Burmakin
parent
fea87b85bb
commit
dd48ef4177
2 changed files with 164 additions and 37 deletions
|
|
@ -106,7 +106,92 @@ export default class extends Controller {
|
|||
// Create a proper Leaflet layer for fog
|
||||
this.fogOverlay = createFogOverlay();
|
||||
|
||||
this.areasLayer = L.layerGroup(); // Initialize areasLayer
|
||||
// Create custom pane for areas
|
||||
this.map.createPane('areasPane');
|
||||
this.map.getPane('areasPane').style.zIndex = 650;
|
||||
this.map.getPane('areasPane').style.pointerEvents = 'all';
|
||||
|
||||
// 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();
|
||||
|
||||
|
|
@ -166,20 +251,6 @@ export default class extends Controller {
|
|||
// Fetch and draw areas when the map is loaded
|
||||
fetchAndDrawAreas(this.areasLayer, this.apiKey);
|
||||
|
||||
// Add a simple test circle to the map
|
||||
const testCircle = L.circle([52.514568, 13.350111], {
|
||||
radius: 100,
|
||||
color: 'blue',
|
||||
fillColor: '#30f',
|
||||
fillOpacity: 0.5,
|
||||
interactive: true,
|
||||
zIndexOffset: 1000
|
||||
}).addTo(this.map);
|
||||
|
||||
testCircle.on('mouseover', () => {
|
||||
console.log('Mouse over test circle');
|
||||
});
|
||||
|
||||
let fogEnabled = false;
|
||||
|
||||
// Hide fog by default
|
||||
|
|
|
|||
|
|
@ -169,6 +169,7 @@ export function deleteArea(id, areasLayer, layer, apiKey) {
|
|||
}
|
||||
|
||||
export function fetchAndDrawAreas(areasLayer, apiKey) {
|
||||
console.log('Fetching areas...');
|
||||
fetch(`/api/v1/areas?api_key=${apiKey}`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
|
|
@ -182,35 +183,90 @@ export function fetchAndDrawAreas(areasLayer, apiKey) {
|
|||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Received areas:', data);
|
||||
|
||||
// Clear existing areas
|
||||
areasLayer.clearLayers();
|
||||
|
||||
data.forEach(area => {
|
||||
// Check if necessary fields are present
|
||||
if (area.latitude && area.longitude && area.radius && area.name && area.id) {
|
||||
const layer = L.circle([area.latitude, area.longitude], {
|
||||
radius: area.radius,
|
||||
console.log('Creating circle for area:', area);
|
||||
|
||||
// Convert string coordinates to numbers
|
||||
const lat = parseFloat(area.latitude);
|
||||
const lng = parseFloat(area.longitude);
|
||||
const radius = parseFloat(area.radius);
|
||||
|
||||
// Create circle with custom pane
|
||||
const circle = L.circle([lat, lng], {
|
||||
radius: radius,
|
||||
color: 'red',
|
||||
fillColor: '#f03',
|
||||
fillOpacity: 0.5
|
||||
}).bindPopup(`
|
||||
Name: ${area.name}<br>
|
||||
Radius: ${Math.round(area.radius)} meters<br>
|
||||
<a href="#" data-id="${area.id}" class="delete-area">[Delete]</a>
|
||||
`);
|
||||
|
||||
areasLayer.addLayer(layer); // Add to areas layer group
|
||||
|
||||
// Add event listener for the delete button
|
||||
layer.on('popupopen', () => {
|
||||
document.querySelector('.delete-area').addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (confirm('Are you sure you want to delete this area?')) {
|
||||
deleteArea(area.id, areasLayer, layer, apiKey);
|
||||
}
|
||||
});
|
||||
fillOpacity: 0.5,
|
||||
weight: 2,
|
||||
interactive: true,
|
||||
bubblingMouseEvents: false,
|
||||
pane: 'areasPane'
|
||||
});
|
||||
} else {
|
||||
console.error('Area missing required fields:', area);
|
||||
|
||||
// Bind popup content
|
||||
const popupContent = `
|
||||
<div class="card w-96 bg-base-100">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">${area.name}</h2>
|
||||
<p>Radius: ${Math.round(radius)} meters</p>
|
||||
<p>Center: [${lat.toFixed(4)}, ${lng.toFixed(4)}]</p>
|
||||
<div class="flex justify-end mt-4">
|
||||
<button class="btn btn-error delete-area" data-id="${area.id}">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
circle.bindPopup(popupContent);
|
||||
|
||||
// Add to layer group
|
||||
areasLayer.addLayer(circle);
|
||||
|
||||
// Wait for the circle to be added to the DOM
|
||||
setTimeout(() => {
|
||||
const circlePath = circle.getElement();
|
||||
if (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('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,
|
||||
weight: 3
|
||||
});
|
||||
});
|
||||
|
||||
circlePath.addEventListener('mouseleave', (e) => {
|
||||
console.log('Mouse left area:', area.name);
|
||||
e.stopPropagation();
|
||||
circle.setStyle({
|
||||
fillOpacity: 0.5,
|
||||
weight: 2
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue