feat: rewrite map.js with click-to-place AOI (no MapboxDraw)

frontend/js/map.js

@@ -1,6 +1,6 @@
 /**
- * Aperture — MapLibre GL + Mapbox GL Draw tools
- * Manages the AOI definition map (Define Area page) and the results map.
+ * Aperture — MapLibre GL map tools
+ * AOI click-to-place on the Define Area map + results map rendering.
  */
 
 const POSITRON_STYLE = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
@@ -58,11 +58,14 @@ class BasemapToggle {
     const isSatellite = _currentStyle === 'satellite';
     const newStyle = isSatellite ? POSITRON_STYLE : SATELLITE_STYLE;
 
-    // Just swap style — Draw handles its own re-initialization internally
-    // via its own style.load listener. Features persist in Draw's internal store.
     _aoiMap.setStyle(newStyle);
 
-    // Update state and button
+    // Re-add AOI layer after style change
+    _aoiMap.once('style.load', () => {
+      _addAoiSource();
+      if (_currentBbox) _updateAoiLayer(_currentBbox);
+    });
+
     _currentStyle = isSatellite ? 'positron' : 'satellite';
     const nextLabel = _currentStyle === 'positron' ? 'Switch to Satellite' : 'Switch to Map';
     this._btn.title = nextLabel;
@@ -92,193 +95,125 @@ class BasemapToggle {
 /* ── AOI Map ─────────────────────────────────────────────── */
 
 let _aoiMap = null;
-let _draw = null;
-let _onAoiChange = null; // callback(bbox | null)
-let _rectFirstCorner = null; // [lon, lat] or null — for two-tap rectangle
+let _onAoiChange = null;   // callback(bbox | null)
+let _currentBbox = null;   // [minLon, minLat, maxLon, maxLat]
+let _currentCenter = null;  // [lng, lat] — last click/geocode center
+let _selectedKm2 = 500;    // active preset size
+
+const AOI_SOURCE_ID = 'aoi-draw';
+const AOI_FILL_LAYER = 'aoi-draw-fill';
+const AOI_OUTLINE_LAYER = 'aoi-draw-outline';
 
 /**
- * Initialise the AOI draw map inside containerId.
- * @param {string} containerId  - DOM id for the map container
- * @param {function} onAoiChange - called with [minLon,minLat,maxLon,maxLat] or null
+ * Compute a square bbox centered on [lng, lat] for targetKm2.
  */
-export function initAoiMap(containerId, onAoiChange) {
-  _onAoiChange = onAoiChange;
-  _currentStyle = 'positron';
-
-  _aoiMap = new maplibregl.Map({
-    container: containerId,
-    style: POSITRON_STYLE,
-    center: [37.0, 3.0], // East Africa default
-    zoom: 4,
-  });
-
-  // Add draw control
-  _draw = new MapboxDraw({
-    displayControlsDefault: false,
-    controls: {},
-    styles: drawStyles(),
-  });
-
-  _aoiMap.addControl(_draw);
-
-  // Basemap layer toggle
-  _aoiMap.addControl(new BasemapToggle(), 'top-right');
+function computeBbox(centerLng, centerLat, targetKm2) {
+  const sideKm = Math.sqrt(targetKm2);
+  const dLat = sideKm / 111.32;
+  const dLon = sideKm / (111.32 * Math.cos(centerLat * Math.PI / 180));
+  return [
+    centerLng - dLon / 2,
+    centerLat - dLat / 2,
+    centerLng + dLon / 2,
+    centerLat + dLat / 2,
+  ];
+}
 
-  // Propagate geometry changes
-  _aoiMap.on('draw.create', _onDrawUpdate);
-  _aoiMap.on('draw.update', _onDrawUpdate);
-  _aoiMap.on('draw.delete', () => _onAoiChange && _onAoiChange(null));
+function _bboxToGeoJSON(bbox) {
+  const [minLon, minLat, maxLon, maxLat] = bbox;
+  return {
+    type: 'FeatureCollection',
+    features: [{
+      type: 'Feature',
+      geometry: {
+        type: 'Polygon',
+        coordinates: [[
+          [minLon, minLat],
+          [maxLon, minLat],
+          [maxLon, maxLat],
+          [minLon, maxLat],
+          [minLon, minLat],
+        ]],
+      },
+      properties: {},
+    }],
+  };
 }
 
-function _onDrawUpdate() {
-  const data = _draw.getAll();
-  if (!data.features.length) {
-    _onAoiChange && _onAoiChange(null);
-    return;
-  }
-  const bbox = turf_bbox(data.features[0]);
-  _onAoiChange && _onAoiChange(bbox);
+const _emptyGeoJSON = { type: 'FeatureCollection', features: [] };
+
+function _addAoiSource() {
+  if (_aoiMap.getSource(AOI_SOURCE_ID)) return;
+  _aoiMap.addSource(AOI_SOURCE_ID, { type: 'geojson', data: _emptyGeoJSON });
+  _aoiMap.addLayer({
+    id: AOI_FILL_LAYER,
+    type: 'fill',
+    source: AOI_SOURCE_ID,
+    paint: { 'fill-color': '#1A3A34', 'fill-opacity': 0.10 },
+  });
+  _aoiMap.addLayer({
+    id: AOI_OUTLINE_LAYER,
+    type: 'line',
+    source: AOI_SOURCE_ID,
+    paint: { 'line-color': '#1A3A34', 'line-width': 2 },
+  });
 }
 
-// Simple bbox calculation without turf dependency
-function turf_bbox(feature) {
-  const coords = getAllCoords(feature.geometry);
-  let minLon = Infinity, minLat = Infinity, maxLon = -Infinity, maxLat = -Infinity;
-  for (const [lon, lat] of coords) {
-    if (lon < minLon) minLon = lon;
-    if (lat < minLat) minLat = lat;
-    if (lon > maxLon) maxLon = lon;
-    if (lat > maxLat) maxLat = lat;
-  }
-  return [minLon, minLat, maxLon, maxLat];
+function _updateAoiLayer(bbox) {
+  const source = _aoiMap.getSource(AOI_SOURCE_ID);
+  if (source) source.setData(_bboxToGeoJSON(bbox));
 }
 
-function getAllCoords(geometry) {
-  if (geometry.type === 'Point') return [geometry.coordinates];
-  if (geometry.type === 'Polygon') return geometry.coordinates.flat();
-  if (geometry.type === 'MultiPolygon') return geometry.coordinates.flat(2);
-  return [];
+function _placeAoi(lng, lat) {
+  _currentCenter = [lng, lat];
+  _currentBbox = computeBbox(lng, lat, _selectedKm2);
+  _updateAoiLayer(_currentBbox);
+  if (_onAoiChange) _onAoiChange(_currentBbox);
 }
 
 /**
- * Activate two-tap rectangle mode.
- * First tap sets one corner, second tap sets the opposite corner.
- * Works on both touch (mobile) and click (desktop).
+ * Initialise the AOI map inside containerId.
+ * @param {string} containerId
+ * @param {function} onAoiChange - called with [minLon,minLat,maxLon,maxLat] or null
  */
-let _firstCornerMarker = null;
-
-export function activateDrawRect() {
-  if (!_aoiMap) return;
-  // Temporarily remove Draw so it doesn't intercept taps
-  if (_draw) {
-    _draw.deleteAll();
-    _aoiMap.removeControl(_draw);
-  }
-  _rectFirstCorner = null;
-  if (_firstCornerMarker) {
-    _firstCornerMarker.remove();
-    _firstCornerMarker = null;
-  }
-  _aoiMap.getCanvas().style.cursor = 'crosshair';
-  // Remove previous listener if any, then add fresh
-  _aoiMap.off('click', _onRectClick);
-  _aoiMap.on('click', _onRectClick);
-}
-
-function _onRectClick(e) {
-  const { lng, lat } = e.lngLat;
-
-  if (!_rectFirstCorner) {
-    // First tap — store corner and show marker
-    _rectFirstCorner = [lng, lat];
-    const el = document.createElement('div');
-    el.style.cssText = 'width:12px;height:12px;border-radius:50%;background:#1A3A34;border:2px solid white;';
-    _firstCornerMarker = new maplibregl.Marker({ element: el })
-      .setLngLat([lng, lat])
-      .addTo(_aoiMap);
-    return;
-  }
+export function initAoiMap(containerId, onAoiChange) {
+  _onAoiChange = onAoiChange;
+  _currentStyle = 'positron';
 
-  // Second tap — build rectangle from two corners
-  const [lon1, lat1] = _rectFirstCorner;
-  const lon2 = lng;
-  const lat2 = lat;
-  _rectFirstCorner = null;
-  _aoiMap.getCanvas().style.cursor = '';
-  _aoiMap.off('click', _onRectClick);
-
-  // Remove corner marker
-  if (_firstCornerMarker) {
-    _firstCornerMarker.remove();
-    _firstCornerMarker = null;
-  }
+  _aoiMap = new maplibregl.Map({
+    container: containerId,
+    style: POSITRON_STYLE,
+    center: [37.0, 3.0],
+    zoom: 4,
+  });
 
-  const minLon = Math.min(lon1, lon2);
-  const maxLon = Math.max(lon1, lon2);
-  const minLat = Math.min(lat1, lat2);
-  const maxLat = Math.max(lat1, lat2);
-
-  const feature = {
-    type: 'Feature',
-    geometry: {
-      type: 'Polygon',
-      coordinates: [[
-        [minLon, minLat],
-        [maxLon, minLat],
-        [maxLon, maxLat],
-        [minLon, maxLat],
-        [minLon, minLat],
-      ]],
-    },
-    properties: {},
-  };
+  _aoiMap.addControl(new BasemapToggle(), 'top-right');
+  _aoiMap.getCanvas().style.cursor = 'crosshair';
 
-  if (_draw) {
-    // Re-add Draw control, insert the rectangle, and trigger update
-    _aoiMap.addControl(_draw);
-    _draw.add(feature);
-    _onDrawUpdate();
-  }
-}
+  _aoiMap.on('load', () => {
+    _addAoiSource();
+  });
 
-/**
- * Activate polygon draw mode.
- */
-export function activateDrawPolygon() {
-  if (!_draw) return;
-  _draw.deleteAll();
-  _draw.changeMode('draw_polygon');
+  _aoiMap.on('click', (e) => {
+    _placeAoi(e.lngLat.lng, e.lngLat.lat);
+  });
 }
 
 /**
- * Load a GeoJSON feature (polygon) as the AOI.
- * @param {object} geojson - GeoJSON FeatureCollection or Feature
+ * Change the AOI preset size. If an AOI is already placed, resize it.
+ * @param {number} km2 - target area in km²
  */
-export function loadGeoJSON(geojson) {
-  if (!_draw) return;
-  _draw.deleteAll();
-
-  const feature = geojson.type === 'FeatureCollection'
-    ? geojson.features[0]
-    : geojson;
-
-  if (!feature) return;
-
-  const id = _draw.add(feature);
-  if (id && id.length) {
-    _onDrawUpdate();
+export function setAoiSize(km2) {
+  _selectedKm2 = km2;
+  if (_currentCenter) {
+    _currentBbox = computeBbox(_currentCenter[0], _currentCenter[1], km2);
+    _updateAoiLayer(_currentBbox);
+    if (_onAoiChange) _onAoiChange(_currentBbox);
   }
-
-  // Fly to bounds
-  const bbox = turf_bbox(feature);
-  _aoiMap.fitBounds(
-    [[bbox[0], bbox[1]], [bbox[2], bbox[3]]],
-    { padding: 40, duration: 600 }
-  );
 }
 
 /**
- * Search for a location via Nominatim and fly the map there.
+ * Search for a location via Nominatim, fly there, and auto-place the AOI.
  * @param {string} query
  */
 export async function geocode(query) {
@@ -286,14 +221,17 @@ export async function geocode(query) {
   const res = await fetch(url, { headers: { 'Accept-Language': 'en' } });
   const results = await res.json();
   if (!results.length) throw new Error('Location not found');
-  const { lon, lat, boundingbox } = results[0];
-  if (boundingbox) {
-    // boundingbox: [minLat, maxLat, minLon, maxLon]
-    const [minLat, maxLat, minLon, maxLon] = boundingbox.map(Number);
-    _aoiMap.fitBounds([[minLon, minLat], [maxLon, maxLat]], { padding: 60, duration: 800 });
-  } else {
-    _aoiMap.flyTo({ center: [parseFloat(lon), parseFloat(lat)], zoom: 10 });
-  }
+  const { lon, lat } = results[0];
+  const lng = parseFloat(lon);
+  const latNum = parseFloat(lat);
+
+  _placeAoi(lng, latNum);
+
+  // Fly to fit the placed bbox
+  _aoiMap.fitBounds(
+    [[_currentBbox[0], _currentBbox[1]], [_currentBbox[2], _currentBbox[3]]],
+    { padding: 60, duration: 800 }
+  );
 }
 
 /* ── Results Map ─────────────────────────────────────────── */
@@ -316,48 +254,28 @@ export function initResultsMap(containerId, bbox) {
   _resultsMap.on('load', () => {
     _resultsMap.addSource('aoi', {
       type: 'geojson',
-      data: bboxToPolygon(bbox),
+      data: _bboxToGeoJSON(bbox),
     });
 
     _resultsMap.addLayer({
       id: 'aoi-fill',
       type: 'fill',
       source: 'aoi',
-      paint: {
-        'fill-color': '#1A3A34',
-        'fill-opacity': 0.08,
-      },
+      paint: { 'fill-color': '#1A3A34', 'fill-opacity': 0.08 },
     });
 
     _resultsMap.addLayer({
       id: 'aoi-outline',
       type: 'line',
       source: 'aoi',
-      paint: {
-        'line-color': '#1A3A34',
-        'line-width': 2,
-        'line-opacity': 0.7,
-      },
+      paint: { 'line-color': '#1A3A34', 'line-width': 2, 'line-opacity': 0.7 },
     });
   });
 }
 
-const STATUS_COLORS = {
-  green: '#3BAA7F',
-  amber: '#CA5D0F',
-  red: '#B83A2A',
-};
+const STATUS_COLORS = { green: '#3BAA7F', amber: '#CA5D0F', red: '#B83A2A' };
+const CONFIDENCE_COLORS = { high: '#B83A2A', nominal: '#CA5D0F', low: '#E8C547' };
 
-const CONFIDENCE_COLORS = {
-  high: '#B83A2A',
-  nominal: '#CA5D0F',
-  low: '#E8C547',
-};
-
-/**
- * Render spatial data on the results map based on type.
- * @param {object} spatialData - Parsed JSON from /spatial/ endpoint
- */
 export function renderSpatialOverlay(spatialData) {
   clearSpatialOverlay();
   if (!_resultsMap) return;
@@ -376,16 +294,12 @@ export function renderSpatialOverlay(spatialData) {
   }
 }
 
-/**
- * Remove any spatial overlay from the results map.
- */
 export function clearSpatialOverlay() {
   if (!_resultsMap) return;
   for (const id of ['spatial-points', 'spatial-choropleth', 'spatial-grid']) {
     if (_resultsMap.getLayer(id)) _resultsMap.removeLayer(id);
     if (_resultsMap.getSource(id)) _resultsMap.removeSource(id);
   }
-  // Reset AOI fill to default
   if (_resultsMap.getLayer('aoi-fill')) {
     _resultsMap.setPaintProperty('aoi-fill', 'fill-color', '#1A3A34');
     _resultsMap.setPaintProperty('aoi-fill', 'fill-opacity', 0.08);
@@ -419,12 +333,10 @@ function _renderPoints(geojson) {
 
 function _renderChoropleth(geojson, colormap) {
   _resultsMap.addSource('spatial-choropleth', { type: 'geojson', data: geojson });
-
   const values = geojson.features.map(f => f.properties.value || 0);
   const vmin = Math.min(...values);
   const vmax = Math.max(...values);
   const mid = (vmin + vmax) / 2;
-
   _resultsMap.addLayer({
     id: 'spatial-choropleth',
     type: 'fill',
@@ -465,14 +377,11 @@ function _renderGrid(spatialData) {
     }
   }
   const geojson = { type: 'FeatureCollection', features };
-
   const values = features.map(f => f.properties.value);
   const vmin = Math.min(...values);
   const vmax = Math.max(...values);
   const mid = (vmin + vmax) / 2;
-
   const isTemp = spatialData.colormap === 'coolwarm';
-
   _resultsMap.addSource('spatial-grid', { type: 'geojson', data: geojson });
   _resultsMap.addLayer({
     id: 'spatial-grid',
@@ -500,68 +409,3 @@ function _renderStatusOverlay(status) {
     _resultsMap.setPaintProperty('aoi-outline', 'line-color', color);
   }
 }
-
-function bboxToPolygon(bbox) {
-  const [minLon, minLat, maxLon, maxLat] = bbox;
-  return {
-    type: 'FeatureCollection',
-    features: [{
-      type: 'Feature',
-      geometry: {
-        type: 'Polygon',
-        coordinates: [[
-          [minLon, minLat],
-          [maxLon, minLat],
-          [maxLon, maxLat],
-          [minLon, maxLat],
-          [minLon, minLat],
-        ]],
-      },
-      properties: {},
-    }],
-  };
-}
-
-/* ── Draw Styles ─────────────────────────────────────────── */
-
-function drawStyles() {
-  return [
-    {
-      id: 'gl-draw-polygon-fill',
-      type: 'fill',
-      filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-      paint: {
-        'fill-color': '#1A3A34',
-        'fill-opacity': 0.10,
-      },
-    },
-    {
-      id: 'gl-draw-polygon-stroke',
-      type: 'line',
-      filter: ['all', ['==', '$type', 'Polygon'], ['!=', 'mode', 'static']],
-      paint: {
-        'line-color': '#1A3A34',
-        'line-width': 2,
-      },
-    },
-    {
-      id: 'gl-draw-polygon-vertex',
-      type: 'circle',
-      filter: ['all', ['==', 'meta', 'vertex'], ['==', '$type', 'Point']],
-      paint: {
-        'circle-radius': 4,
-        'circle-color': '#1A3A34',
-      },
-    },
-    {
-      id: 'gl-draw-line',
-      type: 'line',
-      filter: ['all', ['==', '$type', 'LineString'], ['!=', 'mode', 'static']],
-      paint: {
-        'line-color': '#8071BC',
-        'line-width': 2,
-        'line-dasharray': [2, 2],
-      },
-    },
-  ];
-}