Spaces:
Sleeping
Sleeping
File size: 4,662 Bytes
cac9601 1122928 345286e 1122928 cac9601 1122928 cac9601 1122928 cac9601 345286e cac9601 345286e cac9601 1122928 345286e 1122928 cac9601 1122928 cac9601 1122928 cac9601 345286e cac9601 345286e cac9601 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
// Initialize map for index.html
function initializeMap(reports = []) {
// Define bounds to lock the map to one world instance
const bounds = L.latLngBounds(
L.latLng(-85, -180), // Southwest corner
L.latLng(85, 180) // Northeast corner
);
// Initialize map with USA centered (~39°N, -100°W)
const map = L.map('map', {
maxBounds: bounds,
maxBoundsViscosity: 1.0, // Prevents panning outside bounds
worldCopyJump: false // Disables jumping to world copies
}).setView([39, -100], 2); // Center on USA, zoom level 4
// Add tile layer with noWrap to prevent tiling beyond -180/180
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 18,
minZoom: 2, // Prevent zooming out too far
noWrap: true // Disable horizontal wrapping
}).addTo(map);
// Custom arrow icon
const ArrowIcon = L.divIcon({
className: 'arrow-icon',
html: '<div style="transform: rotate({angle}deg); font-size: 30px;">⇧</div>',
iconSize: [20, 20],
iconAnchor: [10, 10]
});
// Add markers from reports
reports.forEach(report => {
const icon = L.divIcon({
className: 'arrow-icon',
html: `<div style="transform: rotate(${report.direction}deg); font-size: 30px;">⇧</div>`,
iconSize: [20, 20],
iconAnchor: [10, 10]
});
L.marker([report.latitude, report.longitude], { icon })
.addTo(map)
.bindPopup(`
<b>Anomaly Report</b><br>
Observer: ${report.observer_name || 'Anonymous'}<br>
Description: ${report.description || 'No description'}<br>
Timestamp: ${report.timestamp || 'N/A'}
`);
});
}
// Initialize map for add_report.html
function initializeAddReportMap() {
// Define bounds to lock the map
const bounds = L.latLngBounds(
L.latLng(-85, -180),
L.latLng(85, 180)
);
// Initialize map with USA centered
const map = L.map('map', {
maxBounds: bounds,
maxBoundsViscosity: 1.0,
worldCopyJump: false
}).setView([39, -100], 2);
// Add tile layer with noWrap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 18,
minZoom: 2,
noWrap: true
}).addTo(map);
let marker = null;
let direction = 0;
// Handle map click to place marker
map.on('click', function(e) {
if (marker) {
map.removeLayer(marker);
}
const icon = L.divIcon({
className: 'arrow-icon',
html: `<div style="transform: rotate(${direction}deg); font-size: 30px;">⇧</div>`,
iconSize: [20, 20],
iconAnchor: [10, 10]
});
marker = L.marker(e.latlng, { icon }).addTo(map);
document.getElementById('latitude').value = e.latlng.lat.toFixed(6);
document.getElementById('longitude').value = e.latlng.lng.toFixed(6);
document.getElementById('direction').value = direction;
});
// Handle direction input
document.getElementById('direction').addEventListener('input', function(e) {
direction = parseFloat(e.target.value) || 0;
if (marker) {
const icon = L.divIcon({
className: 'arrow-icon',
html: `<div style="transform: rotate(${direction}deg); font-size: 30px;">⇧</div>`,
iconSize: [20, 20],
iconAnchor: [10, 10]
});
map.removeLayer(marker);
marker = L.marker([parseFloat(document.getElementById('latitude').value), parseFloat(document.getElementById('longitude').value)], { icon }).addTo(map);
document.getElementById('direction').value = direction;
}
});
// Handle form submission
document.getElementById('report-form').addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch('/add_report', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
alert(data.message);
if (data.status === 'success') {
window.location.href = '/';
}
})
.catch(error => {
alert('Error: ' + error.message);
});
});
} |