diff --git a/static/map-embed.html b/static/map-embed.html
index 60753f9..362a411 100644
--- a/static/map-embed.html
+++ b/static/map-embed.html
@@ -54,6 +54,26 @@ body { margin: 0; overflow: hidden; }
});
_ifkMap.on('load', function() {
+ // White land, gray sea
+ _ifkMap.setPaintProperty('background', 'background-color', '#ffffff');
+ try { _ifkMap.setPaintProperty('water', 'fill-color', '#c8d3df'); } catch(e) {}
+ // Clean map: white land, no roads, no city labels — only country names + borders
+ _ifkMap.getStyle().layers.forEach(function(l) {
+ if (l.id.includes('land') && l.type === 'fill') _ifkMap.setPaintProperty(l.id, 'fill-color', '#ffffff');
+ // Hide roads/transport
+ if (l.type === 'line' && (l.id.includes('road') || l.id.includes('rail') || l.id.includes('transit') || l.id.includes('tunnel') || l.id.includes('bridge') || l.id.includes('transport') || l.id.includes('highway') || l.id.includes('path') || l.id.includes('aeroway'))) {
+ try { _ifkMap.setLayoutProperty(l.id, 'visibility', 'none'); } catch(e) {}
+ }
+ // Hide all symbol layers except country labels (show at zoom 3+)
+ if (l.type === 'symbol') {
+ if (l.id.includes('country')) {
+ try { _ifkMap.setLayerZoomRange(l.id, 3, 24); } catch(e) {}
+ } else {
+ try { _ifkMap.setLayoutProperty(l.id, 'visibility', 'none'); } catch(e) {}
+ }
+ }
+ });
+
Promise.all([
fetch('/data/countries.json').then(function(r) { return r.json(); }),
fetch('/data/countries-50m.json').then(function(r) { return r.json(); })
@@ -72,46 +92,81 @@ body { margin: 0; overflow: hidden; }
f.properties.isoNum = id;
});
- // Render choropleth to a canvas, then add as single image source (NOT tiled)
- var W = 2048, H = 1024;
+ // Render choropleth as image overlay — re-renders at high res for visible area
+ var MAX_LAT = 85.051129;
var offscreen = document.createElement('canvas');
- offscreen.width = W; offscreen.height = H;
- var ctx = offscreen.getContext('2d');
+ var dpr = window.devicePixelRatio || 1;
- // Draw country fills using Equirectangular projection
- geo.features.forEach(function(f) {
- var id = String(f.id).padStart(3, '0');
- var c = byIsoNum[id];
- if (!c) return;
- ctx.fillStyle = STATUS_COLORS[c.status];
- ctx.beginPath();
- var coords = f.geometry.type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates;
- coords.forEach(function(poly) {
- poly.forEach(function(ring) {
- for (var i = 0; i < ring.length; i++) {
- var x = (ring[i][0] + 180) / 360 * W;
- var y = (90 - ring[i][1]) / 180 * H;
- if (i === 0) ctx.moveTo(x, y);
- else ctx.lineTo(x, y);
- }
- ctx.closePath();
+ function mercY(lat, north, south, H) {
+ var toMerc = function(l) { var r = l * Math.PI / 180; return Math.log(Math.tan(Math.PI/4 + r/2)); };
+ var mTop = toMerc(north), mBot = toMerc(south);
+ return (toMerc(north) - toMerc(lat)) / (mTop - mBot) * H;
+ }
+
+ function renderChoropleth() {
+ var bounds = _ifkMap.getBounds();
+ var west = Math.max(-180, bounds.getWest());
+ var east = Math.min(180, bounds.getEast());
+ var south = Math.max(-MAX_LAT, bounds.getSouth());
+ var north = Math.min(MAX_LAT, bounds.getNorth());
+ // Pad bounds slightly
+ var lonPad = (east - west) * 0.1;
+ var latPad = (north - south) * 0.1;
+ west = Math.max(-180, west - lonPad);
+ east = Math.min(180, east + lonPad);
+ south = Math.max(-MAX_LAT, south - latPad);
+ north = Math.min(MAX_LAT, north + latPad);
+
+ var container = _ifkMap.getContainer();
+ var W = Math.round(container.clientWidth * dpr);
+ var H = Math.round(container.clientHeight * dpr);
+ offscreen.width = W; offscreen.height = H;
+ var ctx = offscreen.getContext('2d');
+ ctx.clearRect(0, 0, W, H);
+
+ geo.features.forEach(function(f) {
+ var id = String(f.id).padStart(3, '0');
+ var c = byIsoNum[id];
+ if (!c) return;
+ ctx.fillStyle = STATUS_COLORS[c.status];
+ ctx.beginPath();
+ var coords = f.geometry.type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates;
+ coords.forEach(function(poly) {
+ poly.forEach(function(ring) {
+ for (var i = 0; i < ring.length; i++) {
+ var lon = ring[i][0], lat = Math.max(-MAX_LAT, Math.min(MAX_LAT, ring[i][1]));
+ var x = (lon - west) / (east - west) * W;
+ var y = mercY(lat, north, south, H);
+ if (i === 0) ctx.moveTo(x, y);
+ else ctx.lineTo(x, y);
+ }
+ ctx.closePath();
+ });
});
+ ctx.fill();
});
- ctx.fill();
- });
- // Add as image source — single image, NO tiling
- _ifkMap.addSource('choropleth-img', {
- type: 'image',
- url: offscreen.toDataURL('image/png'),
- coordinates: [[-180, 85.05], [180, 85.05], [180, -85.05], [-180, -85.05]]
- });
- _ifkMap.addLayer({
- id: 'choropleth-fill',
- type: 'raster',
- source: 'choropleth-img',
- paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 }
- });
+ var url = offscreen.toDataURL('image/png');
+ var coords = [[west, north], [east, north], [east, south], [west, south]];
+
+ if (_ifkMap.getSource('choropleth-img')) {
+ _ifkMap.getSource('choropleth-img').updateImage({ url: url, coordinates: coords });
+ } else {
+ _ifkMap.addSource('choropleth-img', { type: 'image', url: url, coordinates: coords });
+ // Find first label/symbol layer to insert choropleth below it
+ var firstLabel = null;
+ _ifkMap.getStyle().layers.forEach(function(l) {
+ if (!firstLabel && (l.type === 'symbol')) firstLabel = l.id;
+ });
+ _ifkMap.addLayer({
+ id: 'choropleth-fill', type: 'raster', source: 'choropleth-img',
+ paint: { 'raster-opacity': 0.85, 'raster-fade-duration': 0 }
+ }, firstLabel);
+ }
+ }
+
+ renderChoropleth();
+ _ifkMap.on('moveend', renderChoropleth);
// Keep GeoJSON source for hover/click interaction (invisible)
_ifkMap.addSource('countries', { type: 'geojson', data: geo });