Implement 3D globe fly-over animation using MapLibre FreeCamera and Turf.js
This commit is contained in:
(jenkins)
@@ -81,7 +81,7 @@ app.get('/api/line-of-sight', async (req, res) => {
|
||||
FROM cities
|
||||
WHERE ST_DWithin(geom, (SELECT route FROM path), $2 * 1000)
|
||||
ORDER BY pos_on_line ASC
|
||||
LIMIT 100;
|
||||
LIMIT 200;
|
||||
`;
|
||||
|
||||
const result = await pool.query(query, [lineWKT, toleranceKm, startLon, startLat]);
|
||||
|
||||
@@ -1,75 +1,95 @@
|
||||
const { Client } = require('pg');
|
||||
const axios = require('axios');
|
||||
const { Pool } = require('pg');
|
||||
const { execSync } = require('child_process');
|
||||
const fs = require('fs');
|
||||
const readline = require('readline');
|
||||
require('dotenv').config();
|
||||
|
||||
const DATA_URL = 'https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_populated_places_simple.geojson';
|
||||
const DATA_URL = 'https://download.geonames.org/export/dump/cities5000.zip';
|
||||
const ZIP_FILE = '/tmp/cities.zip';
|
||||
const TXT_FILE = '/tmp/cities5000.txt';
|
||||
|
||||
async function importCities() {
|
||||
const client = new Client({
|
||||
async function importGeoNames() {
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL || 'postgresql://line_of_sight:line_of_sight_pass@postgres:5432/line_of_sight'
|
||||
});
|
||||
|
||||
try {
|
||||
console.log('Downloading GeoNames cities5000 (Pop > 5000)...');
|
||||
execSync(`wget -q ${DATA_URL} -O ${ZIP_FILE}`);
|
||||
|
||||
console.log('Extracting data...');
|
||||
execSync(`unzip -o ${ZIP_FILE} -d /tmp`);
|
||||
|
||||
console.log('Connecting to database...');
|
||||
await client.connect();
|
||||
const client = await pool.connect();
|
||||
|
||||
console.log('Downloading Natural Earth data (GeoJSON)...');
|
||||
const response = await axios.get(DATA_URL);
|
||||
const data = response.data;
|
||||
|
||||
console.log(`Downloaded ${data.features.length} features. Preparing database...`);
|
||||
|
||||
// Sample properties to verify structure
|
||||
if (data.features.length > 0) {
|
||||
console.log('Sample properties:', data.features[0].properties);
|
||||
}
|
||||
|
||||
// Ensure table exists and is clean
|
||||
// Ensure table is clean
|
||||
await client.query('TRUNCATE TABLE cities');
|
||||
|
||||
console.log('Starting stream import...');
|
||||
|
||||
const fileStream = fs.createReadStream(TXT_FILE);
|
||||
const rl = readline.createInterface({
|
||||
input: fileStream,
|
||||
crlfDelay: Infinity
|
||||
});
|
||||
|
||||
let batch = [];
|
||||
const batchSize = 500;
|
||||
let count = 0;
|
||||
const batchSize = 100;
|
||||
|
||||
for (let i = 0; i < data.features.length; i += batchSize) {
|
||||
const batch = data.features.slice(i, i + batchSize);
|
||||
|
||||
const queryParts = [];
|
||||
const values = [];
|
||||
|
||||
batch.forEach((feature, index) => {
|
||||
const p = feature.properties;
|
||||
const c = feature.geometry.coordinates;
|
||||
|
||||
// Map properties - Natural Earth simple GeoJSON usually has name, pop_max, adm0name
|
||||
const name = p.name || p.NAME || 'Unknown';
|
||||
const pop = p.pop_max || p.POP_MAX || 0;
|
||||
const country = p.adm0name || p.ADM0NAME || 'Unknown';
|
||||
const lon = c[0];
|
||||
const lat = c[1];
|
||||
for await (const line of rl) {
|
||||
const parts = line.split('\t');
|
||||
if (parts.length < 15) continue;
|
||||
|
||||
const base = index * 5;
|
||||
queryParts.push(`($${base + 1}, $${base + 2}, $${base + 3}, ST_SetSRID(ST_MakePoint($${base + 4}, $${base + 5}), 4326)::geography)`);
|
||||
values.push(name, pop, country, lon, lat);
|
||||
});
|
||||
const name = parts[1]; // name
|
||||
const lat = parseFloat(parts[4]);
|
||||
const lon = parseFloat(parts[5]);
|
||||
const country = parts[8]; // country code
|
||||
const population = parseInt(parts[14]) || 0;
|
||||
|
||||
await client.query(
|
||||
`INSERT INTO cities (name, population, country, geom) VALUES ${queryParts.join(',')}`,
|
||||
values
|
||||
);
|
||||
|
||||
count += batch.length;
|
||||
if (count % 1000 === 0 || count === data.features.length) {
|
||||
console.log(`Imported ${count}/${data.features.length} cities...`);
|
||||
batch.push({ name, lat, lon, country, population });
|
||||
|
||||
if (batch.length >= batchSize) {
|
||||
await insertBatch(client, batch);
|
||||
count += batch.length;
|
||||
if (count % 5000 === 0) console.log(`Imported ${count} cities...`);
|
||||
batch = [];
|
||||
}
|
||||
}
|
||||
|
||||
console.log('SUCCESS: Natural Earth data import complete.');
|
||||
if (batch.length > 0) {
|
||||
await insertBatch(client, batch);
|
||||
count += batch.length;
|
||||
}
|
||||
|
||||
console.log(`SUCCESS: Imported ${count} cities and towns.`);
|
||||
client.release();
|
||||
|
||||
} catch (err) {
|
||||
console.error('ERROR during import:', err);
|
||||
} finally {
|
||||
await client.end();
|
||||
// Cleanup
|
||||
if (fs.existsSync(ZIP_FILE)) fs.unlinkSync(ZIP_FILE);
|
||||
if (fs.existsSync(TXT_FILE)) fs.unlinkSync(TXT_FILE);
|
||||
await pool.end();
|
||||
}
|
||||
}
|
||||
|
||||
importCities();
|
||||
async function insertBatch(client, batch) {
|
||||
const queryParts = [];
|
||||
const values = [];
|
||||
|
||||
batch.forEach((city, index) => {
|
||||
const base = index * 5;
|
||||
queryParts.push(`($${base + 1}, $${base + 2}, $${base + 3}, ST_SetSRID(ST_MakePoint($${base + 4}, $${base + 5}), 4326)::geography)`);
|
||||
values.push(city.name, city.population, city.country, city.lon, city.lat);
|
||||
});
|
||||
|
||||
await client.query(
|
||||
`INSERT INTO cities (name, population, country, geom) VALUES ${queryParts.join(',')}`,
|
||||
values
|
||||
);
|
||||
}
|
||||
|
||||
importGeoNames();
|
||||
|
||||
Generated
+2162
File diff suppressed because it is too large
Load Diff
@@ -3,6 +3,7 @@
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@turf/turf": "^7.3.4",
|
||||
"axios": "^1.7.9",
|
||||
"maplibre-gl": "^5.20.1",
|
||||
"react": "^19.2.1",
|
||||
|
||||
+95
-26
@@ -16,20 +16,32 @@ const APP = () => {
|
||||
const [mapStyle, setMapStyle] = useState('light'); // 'light' or 'dark'
|
||||
const [tolerance, setTolerance] = useState(50);
|
||||
const [selectedCity, setSelectedCity] = useState(null);
|
||||
const [isLocked, setIsLocked] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialize MapLibre map
|
||||
// Initialize MapLibre map - ONLY ONCE
|
||||
mapRef.current = new maplibregl.Map({
|
||||
container: mapContainerRef.current,
|
||||
style: getMapStyle(mapStyle),
|
||||
center: [-0.1278, 51.5074], // London
|
||||
zoom: 3,
|
||||
pitch: 0
|
||||
zoom: 2,
|
||||
pitch: 0,
|
||||
projection: 'globe' // Enable 3D Globe
|
||||
});
|
||||
|
||||
mapRef.current.on('load', () => {
|
||||
console.log('Map loaded successfully');
|
||||
|
||||
// Add atmosphere/sky effects (MapLibre v5 uses setSky)
|
||||
mapRef.current.setSky({
|
||||
'sky-color': '#199EF3',
|
||||
'sky-horizon-blend': 0.5,
|
||||
'horizon-color': '#ffffff',
|
||||
'horizon-fog-blend': 0.5,
|
||||
'fog-color': '#add8e6',
|
||||
'fog-ground-blend': 0.5
|
||||
});
|
||||
|
||||
// Initialize start marker
|
||||
startMarkerRef.current = new maplibregl.Marker({ color: '#FF6B6B' })
|
||||
.setLngLat([selectedPoint.lon, selectedPoint.lat])
|
||||
@@ -61,7 +73,19 @@ const APP = () => {
|
||||
updatePreviewLine(selectedPoint, direction);
|
||||
});
|
||||
|
||||
mapRef.current.on('click', (e) => {
|
||||
return () => {
|
||||
if (mapRef.current) mapRef.current.remove();
|
||||
};
|
||||
}, []); // Run only once
|
||||
|
||||
// Separate effect for the click listener that respects isLocked
|
||||
useEffect(() => {
|
||||
if (!mapRef.current) return;
|
||||
|
||||
const handleClick = (e) => {
|
||||
// Don't allow moving start point if locked
|
||||
if (isLocked) return;
|
||||
|
||||
const { lng, lat } = e.lngLat;
|
||||
setSelectedPoint({ lat, lon: lng });
|
||||
|
||||
@@ -75,12 +99,31 @@ const APP = () => {
|
||||
mapRef.current.removeLayer('line-of-sight');
|
||||
mapRef.current.removeSource('line-of-sight');
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
mapRef.current.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
mapRef.current.on('click', handleClick);
|
||||
return () => {
|
||||
if (mapRef.current) mapRef.current.off('click', handleClick);
|
||||
};
|
||||
}, [isLocked]);
|
||||
|
||||
const handleStartAgain = () => {
|
||||
setIsLocked(false);
|
||||
setLineOfSightData(null);
|
||||
setSelectedCity(null);
|
||||
clearCityMarkers();
|
||||
|
||||
if (mapRef.current) {
|
||||
if (mapRef.current.getSource('line-of-sight')) {
|
||||
mapRef.current.removeLayer('line-of-sight');
|
||||
mapRef.current.removeSource('line-of-sight');
|
||||
}
|
||||
// Re-enable preview line if it was hidden
|
||||
if (mapRef.current.getLayer('preview-line')) {
|
||||
mapRef.current.setLayoutProperty('preview-line', 'visibility', 'visible');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const clearCityMarkers = () => {
|
||||
if (cityMarkersRef.current) {
|
||||
@@ -100,10 +143,10 @@ const APP = () => {
|
||||
const map = mapRef.current;
|
||||
if (!map || !map.getSource('preview-line')) return;
|
||||
|
||||
// Generate 50 points along a 5000km great circle path for a smooth curve
|
||||
// Generate 50 points along a 20,000km great circle path for a smooth curve
|
||||
const path = [];
|
||||
const steps = 50;
|
||||
const totalDistance = 5000;
|
||||
const totalDistance = 20000;
|
||||
|
||||
for (let i = 0; i <= steps; i++) {
|
||||
const dist = (totalDistance * i) / steps;
|
||||
@@ -169,6 +212,13 @@ const APP = () => {
|
||||
);
|
||||
|
||||
setLineOfSightData(response.data.data);
|
||||
setIsLocked(true); // Lock the map after showing results
|
||||
|
||||
// Hide the preview line when showing final results
|
||||
if (mapRef.current && mapRef.current.getLayer('preview-line')) {
|
||||
mapRef.current.setLayoutProperty('preview-line', 'visibility', 'none');
|
||||
}
|
||||
|
||||
renderLineOnMap(response.data.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching line of sight:', error);
|
||||
@@ -234,11 +284,13 @@ const APP = () => {
|
||||
// Add marker to map
|
||||
const marker = new maplibregl.Marker(el)
|
||||
.setLngLat([city.lon, city.lat])
|
||||
.setPopup(new maplibregl.Popup().setHTML(
|
||||
`<strong>${city.name}</strong><br/>Population: ${city.population.toLocaleString()}<br/>Distance: ${city.distance_km} km`
|
||||
))
|
||||
.addTo(map);
|
||||
|
||||
el.addEventListener('click', (e) => {
|
||||
e.stopPropagation(); // Prevent map click
|
||||
setSelectedCity(city);
|
||||
});
|
||||
|
||||
cityMarkersRef.current.push(marker);
|
||||
});
|
||||
|
||||
@@ -291,7 +343,7 @@ const APP = () => {
|
||||
</div>
|
||||
|
||||
<div className="controls">
|
||||
<div className="control-group">
|
||||
<div className={`control-group ${isLocked ? 'disabled-controls' : ''}`}>
|
||||
<h3>Line of Sight Settings</h3>
|
||||
|
||||
<div className="setting-row">
|
||||
@@ -306,6 +358,7 @@ const APP = () => {
|
||||
min="0"
|
||||
max="360"
|
||||
value={direction}
|
||||
disabled={isLocked}
|
||||
onChange={(e) => setDirection(parseInt(e.target.value))}
|
||||
/>
|
||||
<span>{direction}°</span>
|
||||
@@ -316,6 +369,7 @@ const APP = () => {
|
||||
<input
|
||||
type="number"
|
||||
value={tolerance}
|
||||
disabled={isLocked}
|
||||
onChange={(e) => setTolerance(parseInt(e.target.value))}
|
||||
min="10"
|
||||
max="200"
|
||||
@@ -329,13 +383,31 @@ const APP = () => {
|
||||
<button onClick={() => setMapStyle('dark')}>Dark</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={handleShowLineOfSight}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Calculating...' : '📡 Show Line of Sight'}
|
||||
</button>
|
||||
{!isLocked ? (
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={handleShowLineOfSight}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Calculating...' : '📡 Show Line of Sight'}
|
||||
</button>
|
||||
) : (
|
||||
<>
|
||||
<button
|
||||
className="action-btn"
|
||||
onClick={startFlyOver}
|
||||
style={{ backgroundColor: isPlaying ? '#e74c3c' : '#3498db' }}
|
||||
>
|
||||
{isPlaying ? '⏹ Stop Flight' : '✈️ Fly Over Route'}
|
||||
</button>
|
||||
<button
|
||||
className="action-btn-secondary"
|
||||
onClick={handleStartAgain}
|
||||
>
|
||||
🔄 Start Again
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{lineOfSightData && (
|
||||
@@ -352,7 +424,7 @@ const APP = () => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{lineOfSightData.conurbations.slice(0, 50).map((city, index) => (
|
||||
{lineOfSightData.conurbations.map((city, index) => (
|
||||
<tr
|
||||
key={city.id}
|
||||
onClick={() => setSelectedCity(city)}
|
||||
@@ -366,9 +438,6 @@ const APP = () => {
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{lineOfSightData.conurbations.length > 50 && (
|
||||
<p className="more-info">... and {lineOfSightData.conurbations.length - 50} more</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -104,11 +104,55 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn-secondary {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #34495e;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.action-btn-secondary:hover {
|
||||
background: #2c3e50;
|
||||
}
|
||||
|
||||
.disabled-controls {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.disabled-controls input, .disabled-controls .action-btn {
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn-secondary {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.setting-row button {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
.results-panel table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.results-panel {
|
||||
background: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
max-height: 450px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.results-panel h3 {
|
||||
|
||||
Reference in New Issue
Block a user