140 lines
4.6 KiB
HTML
140 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Simple Globe Test</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js'></script>
|
|
<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
|
|
<style>
|
|
body { margin: 0; padding: 0; }
|
|
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
|
#info {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(0,0,0,0.8);
|
|
color: #0f0;
|
|
padding: 15px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
max-width: 400px;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div id="info">Loading...</div>
|
|
|
|
<script type="module">
|
|
import { generateVaccineData } from './shared/data-generator.js';
|
|
import { MAPBOX_CONFIG } from './shared/mapbox-config.js';
|
|
|
|
const info = document.getElementById('info');
|
|
|
|
function log(msg) {
|
|
info.innerHTML += msg + '<br>';
|
|
console.log(msg);
|
|
}
|
|
|
|
log('🔬 Testing Simple Globe with Generated Data');
|
|
|
|
// Apply token
|
|
MAPBOX_CONFIG.applyToken();
|
|
log('✅ Token applied');
|
|
|
|
// Generate data
|
|
const polioData = generateVaccineData('polio');
|
|
log(`✅ Generated ${polioData.features.length} features`);
|
|
log(`First feature: ${polioData.features[0].properties.name}`);
|
|
log(`First coverage_1980: ${polioData.features[0].properties.coverage_1980}`);
|
|
log(`Geometry type: ${polioData.features[0].geometry.type}`);
|
|
log(`Coordinates: [${polioData.features[0].geometry.coordinates}]`);
|
|
|
|
// Create map
|
|
const map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/dark-v11',
|
|
projection: 'globe',
|
|
center: [20, 20],
|
|
zoom: 1.5
|
|
});
|
|
|
|
log('✅ Map created');
|
|
|
|
map.on('load', () => {
|
|
log('✅ Map loaded');
|
|
|
|
// Add source
|
|
map.addSource('test-data', {
|
|
type: 'geojson',
|
|
data: polioData
|
|
});
|
|
log('✅ Source added');
|
|
|
|
// Add simple circle layer with FIXED color (no expression)
|
|
map.addLayer({
|
|
id: 'test-circles',
|
|
type: 'circle',
|
|
source: 'test-data',
|
|
paint: {
|
|
'circle-radius': 10,
|
|
'circle-color': '#ff0000', // Bright red - should be very visible
|
|
'circle-opacity': 0.8,
|
|
'circle-stroke-width': 2,
|
|
'circle-stroke-color': '#ffffff'
|
|
}
|
|
});
|
|
log('✅ Circle layer added with FIXED red color');
|
|
|
|
// Check if layer exists
|
|
const layer = map.getLayer('test-circles');
|
|
if (layer) {
|
|
log(`✅ Layer exists: ${layer.id}, type: ${layer.type}`);
|
|
} else {
|
|
log('❌ Layer NOT found!');
|
|
}
|
|
|
|
// Query features
|
|
setTimeout(() => {
|
|
const features = map.querySourceFeatures('test-data');
|
|
log(`✅ Queried features: ${features.length} found`);
|
|
|
|
if (features.length > 0) {
|
|
log(`Sample feature properties: ${Object.keys(features[0].properties).join(', ')}`);
|
|
} else {
|
|
log('⚠️ No features returned from query!');
|
|
}
|
|
|
|
// Now try with data-driven expression
|
|
log('--- Testing data-driven color ---');
|
|
map.setPaintProperty('test-circles', 'circle-color', [
|
|
'interpolate',
|
|
['linear'],
|
|
['get', 'coverage_1980'],
|
|
0, '#ff0000', // Red for 0%
|
|
50, '#ffff00', // Yellow for 50%
|
|
100, '#00ff00' // Green for 100%
|
|
]);
|
|
log('✅ Applied data-driven color expression');
|
|
|
|
// Log what values we're seeing
|
|
const sample = features.slice(0, 5);
|
|
sample.forEach(f => {
|
|
log(`${f.properties.name}: coverage_1980=${f.properties.coverage_1980}`);
|
|
});
|
|
|
|
}, 2000);
|
|
});
|
|
|
|
map.on('error', (e) => {
|
|
log(`❌ Map error: ${e.error.message}`);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|