style: white land, gray sea, no roads/cities, country names zoom 3+

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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,13 +92,38 @@ 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');
+    var dpr = window.devicePixelRatio || 1;
+
+    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);
 
-    // Draw country fills using Equirectangular projection
       geo.features.forEach(function(f) {
         var id = String(f.id).padStart(3, '0');
         var c = byIsoNum[id];
@@ -89,8 +134,9 @@ body { margin: 0; overflow: hidden; }
         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;
+              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);
             }
@@ -100,18 +146,27 @@ body { margin: 0; overflow: hidden; }
         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]]
+      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',
+          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 });