refactor: rename MAP_STYLE to POSITRON_STYLE and add SATELLITE_STYLE constant

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

frontend/js/map.js

@@ -3,7 +3,30 @@
  * Manages the AOI definition map (Define Area page) and the results map.
  */
 
-const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+const POSITRON_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+
+const SATELLITE_STYLE = {
+  version: 8,
+  sources: {
+    'esri-satellite': {
+      type: 'raster',
+      tiles: [
+        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+      ],
+      tileSize: 256,
+      attribution: '© Esri',
+    },
+  },
+  layers: [
+    {
+      id: 'esri-satellite-layer',
+      type: 'raster',
+      source: 'esri-satellite',
+      minzoom: 0,
+      maxzoom: 19,
+    },
+  ],
+};
 
 /* ── AOI Map ─────────────────────────────────────────────── */
 
@@ -21,7 +44,7 @@ export function initAoiMap(containerId, onAoiChange) {
 
   _aoiMap = new maplibregl.Map({
     container: containerId,
-    style: MAP_STYLE,
+    style: POSITRON_STYLE,
     center: [37.0, 3.0], // East Africa default
     zoom: 4,
   });
@@ -147,7 +170,7 @@ let _resultsMap = null;
 export function initResultsMap(containerId, bbox) {
   _resultsMap = new maplibregl.Map({
     container: containerId,
-    style: MAP_STYLE,
+    style: POSITRON_STYLE,
     bounds: [[bbox[0], bbox[1]], [bbox[2], bbox[3]]],
     fitBoundsOptions: { padding: 60 },
   });