Hillside shading, Bright Map and zoom fixes

Author: hgosalia

css/styles.css

@@ -51,7 +51,7 @@ input,textarea,select{font-family:var(--font)}
 #countries-bar{display:none;margin:0 14px 7px;padding:6px 10px;border-radius:9px;background:var(--surface2);border:1px solid var(--border);flex-shrink:0;text-align:center}
 #countries-bar .cb-label{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
 #countries-bar .cb-status{font-size:.68rem;color:var(--text);height:1.1em;margin-top:10px;transition:opacity .15s;opacity:.5}
-#countries-bar .cb-flags{font-size:.8rem;letter-spacing:2px;line-height:1.4;overflow:hidden}
+#countries-bar .cb-flags{font-size:1rem;letter-spacing:2px;line-height:1.4;overflow:hidden}
 #countries-bar .cb-flags span{cursor:default;transition:transform .1s}
 #countries-bar .cb-flags span:hover{transform:scale(1.25)}
 #countries-bar .cb-flags.collapsed{max-height:2.8em}
@@ -170,6 +170,7 @@ input,textarea,select{font-family:var(--font)}
 #esri-attribution{display:none;position:absolute;bottom:6px;left:6px;background:rgba(30,30,30,.6);color:#aaa;font-size:.55rem;padding:2px 6px;border-radius:4px;z-index:2;pointer-events:auto}
 #esri-attribution a{color:var(--accent);text-decoration:none}
 #map.sat-mode~#esri-attribution{display:block}
+.maplibregl-ctrl-bottom-right{bottom:16px!important;right:2px!important}
 .maplibregl-ctrl-group{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:10px!important;overflow:hidden;box-shadow:var(--shadow)!important}
 .maplibregl-ctrl-group button{background:var(--surface)!important;border-bottom:1px solid var(--border)!important}
 .maplibregl-ctrl-group button:hover{background:var(--surface2)!important}

index.html

@@ -123,6 +123,7 @@
       <button class="tb-btn" id="tb-style-btn" onclick="toggleStyleMenu(event)">Dark Map ▾</button>
       <div class="style-menu" id="style-menu">
         <div class="style-menu-item" data-style="light" onclick="setMapStyle('light')">Light Map</div>
+        <div class="style-menu-item" data-style="bright" onclick="setMapStyle('bright')">Bright Map</div>
         <div class="style-menu-item active" data-style="dark" onclick="setMapStyle('dark')">Dark Map</div>
         <div class="style-menu-item" data-style="enriched" onclick="setMapStyle('enriched')">Terrain</div>
         <div class="style-menu-item" data-style="terrain3d" onclick="setMapStyle('terrain3d')">3D Terrain</div>

js/demo.js

@@ -5,9 +5,24 @@
 
 // Ctrl+Shift+D — automated app walkthrough with fake cursor
 // Ctrl+Shift+G — globe rotation demo
+// L/D/T/3/S/G — map style shortcuts  F — fit all pins
 document.addEventListener('keydown', e => {
   if (e.ctrlKey && e.shiftKey && e.key === 'D') { e.preventDefault(); runDemo(); }
   if (e.ctrlKey && e.shiftKey && e.key === 'G') { e.preventDefault(); runGlobeDemo(); }
+
+  // Map style + navigation shortcuts — skip when typing in inputs or using modifier keys
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
+  if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+  switch (e.key) {
+    case 'l': case 'L': setMapStyle('light'); break;
+    case 'b': case 'B': setMapStyle('bright'); break;
+    case 'd': case 'D': setMapStyle('dark'); break;
+    case 't': case 'T': setMapStyle('enriched'); break;
+    case '3': setMapStyle('terrain3d'); break;
+    case 's': case 'S': setMapStyle('satellite'); break;
+    case 'g': case 'G': setMapStyle('globe'); break;
+    case 'f': case 'F': fitAll(); break;
+  }
 });
 
 // ═══════════════════════════════════════

js/map.js

@@ -4,9 +4,11 @@
 function _styleUrl() {
   if (_mapStyle === 'satellite') return STYLE_SAT;
   if (_mapStyle === 'dark') return STYLE_DARK;
+  if (_mapStyle === 'bright') return STYLE_BRIGHT;
   return STYLE_STREET; // light, enriched, terrain3d, globe all use Liberty as base
 }
 const STYLE_STREET = 'https://tiles.openfreemap.org/styles/liberty';
+const STYLE_BRIGHT = 'https://tiles.openfreemap.org/styles/bright';
 const STYLE_DARK = 'https://tiles.openfreemap.org/styles/dark';
 const STYLE_SAT = {
   version:8,
@@ -94,18 +96,24 @@ function _patchStyleBoundaries(styleObj) {
 // - Sets ocean fill color for light mode
 function _patchStyleWater(styleObj) {
   if (!styleObj || !styleObj.layers) return styleObj;
+  // Remove unsupported layer types that cause MapLibre v5 validation errors
+  styleObj.layers = styleObj.layers.filter(l => l.type !== 'sky');
+  if (styleObj.sky) delete styleObj.sky;
+  if (styleObj.terrain) delete styleObj.terrain;
   // Strip natural-earth terrain raster in Light Map (not enriched) to speed up rendering
   if (_mapStyle === 'light') {
     styleObj.layers = styleObj.layers.filter(l => l.id !== 'natural_earth');
     if (styleObj.sources) delete styleObj.sources['ne2_shaded'];
   }
   // Apple Maps Dark palette — neutral dark land, distinctly blue water.
   // Colors pre-compensated for canvas filter brightness(1.8) contrast(0.9).
-  if (_mapStyle === 'dark') {
+  if (_mapStyle === 'dark' || _mapStyle === 'terrain3d') {
+    // Darker water for both Dark Map and 3D Terrain modes
+    const waterColor = _mapStyle === 'terrain3d' ? '#1a2e3d' : '#131619';
     for (const layer of styleObj.layers) {
       if (!layer.paint) layer.paint = {};
       if (layer.type === 'fill' && /^water/.test(layer.id)) {
-        layer.paint['fill-color'] = '#131619';
+        layer.paint['fill-color'] = waterColor;
       }
     }
   }
@@ -299,12 +307,18 @@ function addPinLayers() {
     try { openPinPopup(lat, lng); } catch(err) { console.error(err); }
     const isEmpty = f.properties.iconId === 'pin-empty';
     if (!isEmpty) {
-      const targetZoom = Math.max(map.getZoom(), 14);
+      // Zoom in by at most 4 levels from current zoom, capped at 14
+      // Prevents a jarring jump from low zoom levels (e.g. zoom 3 → 14)
+      const targetZoom = Math.min(Math.max(map.getZoom(), map.getZoom() + 4), 14);
       const needsZoom = map.getZoom() < targetZoom;
       const dist = Math.hypot(map.getCenter().lng - lng, map.getCenter().lat - lat);
       const alreadyThere = dist < 0.005 && !needsZoom;
       if (!alreadyThere) {
+        // In 3D Terrain (pitched view), offset the focal point downward in screen space
+        // so the pin appears in the visible ground area rather than drifting off-screen
+        const pitchOffset = _mapStyle === 'terrain3d' ? [0, Math.round(map.transform?.height * 0.15 || 100)] : [0, 0];
         map.flyTo({ center: [lng, lat], zoom: targetZoom, speed: 0.8, curve: 1.0, essential: true,
+          offset: pitchOffset,
           easing: t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2 });
       }
     }
@@ -318,7 +332,7 @@ function addPinLayers() {
 // ═══════════════════════════════════════
 function initTheme() {
   const stored = localStorage.getItem('matrix-theme');
-  if (stored && ['dark', 'light', 'enriched', 'terrain3d', 'globe'].includes(stored)) {
+  if (stored && ['dark', 'light', 'bright', 'enriched', 'terrain3d', 'globe'].includes(stored)) {
     _mapStyle = stored;
   } else {
     _mapStyle = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
@@ -330,8 +344,9 @@ function applyTheme() {
   _tileTemplatesCache = null;
   // Set initial button label
   const btn = document.getElementById('tb-style-btn');
-  const labels = { light: 'Light Map', enriched: 'Terrain', dark: 'Dark Map', satellite: 'Satellite', terrain3d: '3D Terrain', globe: 'Globe' };
+  const labels = { light: 'Light Map', bright: 'Bright Map', enriched: 'Terrain', dark: 'Dark Map', satellite: 'Satellite', terrain3d: '3D Terrain', globe: 'Globe' };
   if (btn) btn.textContent = (labels[_mapStyle] || _mapStyle) + ' ▾';
+
   // Set initial active state in menu
   document.querySelectorAll('.style-menu-item').forEach(el => el.classList.toggle('active', el.dataset.style === _mapStyle));
   // Disable Export Video in Globe mode
@@ -429,7 +444,13 @@ async function initMap() {
   const otherUrl = styleUrl === STYLE_DARK ? STYLE_STREET : STYLE_DARK;
   fetch(otherUrl).then(r => r.json()).then(j => { _styleJsonCache[otherUrl] = j; }).catch(() => {});
   map = new maplibregl.Map({ container:'map', style: initStyle, center:[0,20], zoom:1.8, attributionControl:false, maxTileCacheSize:200, canvasContextAttributes:{ preserveDrawingBuffer:true } });
-  map.on('error', (e) => console.error('MapLibre error:', e.error?.message || e.message || e));
+  // Suppress non-critical style validation errors (sky/terrain-dem references in
+  // unpatched style JSON when the pre-fetch falls back to URL loading)
+  const _suppressedErrors = /sky|terrain-dem|non-existing layer|same source.*hillshade/i;
+  map.on('error', (e) => {
+    const msg = e.error?.message || e.message || '';
+    if (!_suppressedErrors.test(msg)) console.error('MapLibre error:', msg);
+  });
   map.addControl(new maplibregl.NavigationControl({showCompass:false}), 'bottom-right');
   // Recover from WebGL context loss (Safari loses context after sleep or memory pressure)
   const canvas = map.getCanvas();
@@ -464,15 +485,16 @@ async function initMap() {
     zoomEl.style.cssText = 'position:absolute;bottom:24px;left:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;z-index:10;pointer-events:none;font-family:monospace';
     document.getElementById('map').appendChild(zoomEl);
     const pitchWrap = document.createElement('div');
-    pitchWrap.style.cssText = 'position:absolute;bottom:24px;left:70px;display:none;align-items:center;gap:4px;z-index:10';
-    const pitchEl = document.createElement('div');
+    pitchWrap.id = 'pitch-wrap';
+    pitchWrap.style.cssText = 'position:absolute;bottom:24px;left:70px;display:none;align-items:center;z-index:10;background:rgba(0,0,0,.6);border-radius:4px;font-family:monospace;font-size:11px;color:#fff';
+    const pitchEl = document.createElement('span');
     pitchEl.id = 'pitch-debug';
-    pitchEl.style.cssText = 'background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;pointer-events:none;font-family:monospace';
+    pitchEl.style.cssText = 'padding:2px 6px;pointer-events:none';
     const resetViewEl = document.createElement('button');
     resetViewEl.id = 'reset-view-btn';
-    resetViewEl.title = 'Reset to top-down view';
+    resetViewEl.title = 'Reset north';
     resetViewEl.textContent = '⊙';
-    resetViewEl.style.cssText = 'background:rgba(0,0,0,.6);color:#fff;font-size:11px;border:none;border-radius:4px;cursor:pointer;padding:3px 6px;font-family:monospace;display:none;box-sizing:border-box;height:19px';
+    resetViewEl.style.cssText = 'background:none;color:#fff;font-size:15px;border:none;border-left:1px solid rgba(255,255,255,.2);cursor:pointer;padding:0 6px;font-family:monospace;display:none;line-height:1';
     resetViewEl.addEventListener('click', () => { map.easeTo({ bearing: 0, duration: 500 }); });
     pitchWrap.appendChild(pitchEl);
     pitchWrap.appendChild(resetViewEl);
@@ -487,6 +509,16 @@ async function initMap() {
       document.getElementById('exaggeration-val').textContent = val.toFixed(1) + '×';
       if (map.getTerrain()) map.setTerrain({ source: 'terrain-dem', exaggeration: val });
     });
+    // Live GPS coordinates on mouse move
+    const coordsEl = document.createElement('div');
+    coordsEl.id = 'coords-debug';
+    coordsEl.style.cssText = 'position:absolute;bottom:24px;right:50px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 6px;border-radius:4px;z-index:10;pointer-events:none;font-family:monospace;display:none';
+    document.getElementById('map').appendChild(coordsEl);
+    map.on('mousemove', (e) => {
+      coordsEl.textContent = `${e.lngLat.lat.toFixed(4)}°, ${e.lngLat.lng.toFixed(4)}°`;
+      coordsEl.style.display = '';
+    });
+    map.getCanvas().addEventListener('mouseout', () => { coordsEl.style.display = 'none'; });
     const updateZoom = () => {
       zoomEl.textContent = 'z' + map.getZoom().toFixed(2);
       const is3D = _mapStyle === 'terrain3d';
@@ -740,7 +772,7 @@ function setMapStyle(mode) {
   }
 
   // Update button label
-  const labels = { light: 'Light Map', enriched: 'Terrain', dark: 'Dark Map', satellite: 'Satellite', terrain3d: '3D Terrain', globe: 'Globe' };
+  const labels = { light: 'Light Map', bright: 'Bright Map', enriched: 'Terrain', dark: 'Dark Map', satellite: 'Satellite', terrain3d: '3D Terrain', globe: 'Globe' };
   const btn = document.getElementById('tb-style-btn');
   if (btn) btn.textContent = (labels[mode] || mode) + ' ▾';
 
@@ -778,11 +810,19 @@ function _applyTerrainAndProjection() {
 
   // Terrain — AWS Terrain Tiles (free, no API key, terrarium encoding)
   if (is3D) {
+    // Use separate sources for terrain mesh and hillshade to improve rendering quality
     if (!map.getSource('terrain-dem')) {
       map.addSource('terrain-dem', {
         type: 'raster-dem',
         tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],
-        tileSize: 512, maxzoom: 17, encoding: 'terrarium'
+        tileSize: 512, maxzoom: 15, encoding: 'terrarium'
+      });
+    }
+    if (!map.getSource('hillshade-dem')) {
+      map.addSource('hillshade-dem', {
+        type: 'raster-dem',
+        tiles: ['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],
+        tileSize: 512, maxzoom: 15, encoding: 'terrarium'
       });
     }
     const sliderEl = document.getElementById('exaggeration-slider');
@@ -799,7 +839,7 @@ function _applyTerrainAndProjection() {
       map.addLayer({
         id: 'terrain-hillshade',
         type: 'hillshade',
-        source: 'terrain-dem',
+        source: 'hillshade-dem',
         paint: {
           'hillshade-exaggeration': 1.0,
           'hillshade-illumination-direction': 270,
@@ -835,7 +875,7 @@ function _applyTerrainAndProjection() {
       map.flyTo({ center: [0, 0], zoom: 2, pitch: 0, bearing: 0, duration: 800 });
     } else {
       map.setMinZoom(-2);
-      map.easeTo({ pitch: 0, bearing: 0, duration: 600 });
+      map.jumpTo({ pitch: 0, bearing: 0 });
     }
   }
 }