From 102cf4297c73b874d39c0fef6349ef7e54af44e0 Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 13:41:00 +0300
Subject: [PATCH 01/10] Migrate map from Leaflet to MapLibre GL JS with PMTiles

Replace Leaflet + OSM raster tiles with MapLibre GL JS using self-hosted
PMTiles (Middle East extract on R2) and a warm Protomaps basemap flavor.
Alert polygons are now a GeoJSON source with fill/stroke/hit layers.
Popups replaced by a slide-in location panel (bottom-sheet on mobile,
sidebar on desktop). Prediction mode migrated off Leaflet overlays to
a MapLibre GeoJSON source. ensureOrefPoints consolidated into AppState.
---
 web/index.html         | 757 +++++++++++++++++++++++++++--------------
 web/prediction-mode.js | 200 ++++++-----
 2 files changed, 614 insertions(+), 343 deletions(-)

diff --git a/web/index.html b/web/index.html
index 705494b..b9b4247 100644
--- a/web/index.html
+++ b/web/index.html
@@ -26,18 +26,21 @@
 <meta name="twitter:title" content="מפת העורף">
 <meta name="twitter:description" content="מפת התרעות פיקוד העורף בזמן אמת">
 <meta name="twitter:image" content="https://oref-map.org/og-image.jpg">
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.css">
+<script src="https://unpkg.com/maplibre-gl@4/dist/maplibre-gl.js"></script>
+<script src="https://unpkg.com/pmtiles@3/dist/pmtiles.js"></script>
+<script src="https://unpkg.com/@protomaps/basemaps@5.7.2/dist/basemaps.js"></script>
 <style>
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html, body { height: 100%; font-family: Arial, sans-serif; }
 #map { width: 100%; height: 100%; direction: ltr; }
-.leaflet-interactive:focus { outline: none; }
-.leaflet-control-zoom { border-radius: 6px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; border: none !important; }
-.leaflet-control-zoom a { border: none !important; }
-.leaflet-control-zoom a:first-child { border-radius: 6px 6px 0 0 !important; }
-.leaflet-control-zoom a:last-child { border-radius: 0 0 6px 6px !important; }
-body.has-overlay .leaflet-interactive { pointer-events: none !important; }
+.maplibregl-canvas:focus { outline: none; }
+.maplibregl-ctrl-zoom { border-radius: 6px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; border: none !important; }
+.maplibregl-ctrl-group { border-radius: 6px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important; border: none !important; }
+.maplibregl-ctrl-group button { border: none !important; }
+.maplibregl-ctrl-group button:first-child { border-radius: 6px 6px 0 0 !important; }
+.maplibregl-ctrl-group button:last-child { border-radius: 0 0 6px 6px !important; }
+body.has-overlay .maplibregl-canvas-container.maplibregl-interactive { pointer-events: none !important; }
 
 #site-logo {
   position: fixed;
@@ -136,10 +139,36 @@
 
 
 
-.leaflet-popup-close-button {
-  right: auto !important;
-  left: 5px !important;
+/* Location panel (replaces Leaflet popups) */
+#location-panel {
+  position: fixed;
+  z-index: 1000;
+  background: #fff;
+  box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
+  transition: transform 0.28s ease;
+  direction: rtl;
+  bottom: 0; left: 0; right: 0;
+  max-height: 60vh;
+  border-radius: 12px 12px 0 0;
+  padding: 16px 16px 24px;
+  transform: translateY(110%);
+  overflow-y: auto;
 }
+#location-panel.open { transform: translateY(0); }
+@media (min-width: 600px) {
+  #location-panel {
+    top: 0; right: 0; bottom: 0; left: auto; width: 280px;
+    border-radius: 0; padding: 20px 16px;
+    transform: translateX(110%); max-height: none;
+  }
+  #location-panel.open { transform: translateX(0); }
+}
+#location-panel-close {
+  position: absolute; top: 10px; left: 12px;
+  background: none; border: none; cursor: pointer;
+  font-size: 20px; color: #888; line-height: 1; padding: 4px;
+}
+#location-panel-close:hover { color: #333; }
 
 .modal-backdrop {
   display: none;
@@ -385,7 +414,9 @@
   cursor: default;
   border-radius: 12px;
   background: rgba(255,255,255,0.97);
+  pointer-events: none;
 }
+#timeline-btn.open * { pointer-events: auto; }
 #timeline-btn-row {
   display: flex;
   align-items: center;
@@ -614,6 +645,10 @@ <h1 style="margin:0;font-size:0">מפת העורף</h1>
 </div>
 
 <div id="map"></div>
+<div id="location-panel">
+  <button id="location-panel-close" aria-label="סגור">&times;</button>
+  <div id="location-panel-content"></div>
+</div>
 
 <button id="menu-btn" type="button" title="תפריט" aria-label="תפריט" aria-expanded="false">
   <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
@@ -982,11 +1017,197 @@ <h2>אודות מפת העורף</h2>
 
   // --- Map setup ---
   var DEFAULT_CENTER = [31.6, 34.8], DEFAULT_ZOOM = 8;
-  var map = L.map('map', { preferCanvas: true }).setView(DEFAULT_CENTER, DEFAULT_ZOOM);
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; OpenStreetMap contributors',
-    maxZoom: 18
-  }).addTo(map);
+  // --- MapLibre GL JS setup ---
+  var pmtilesProtocol = new pmtiles.Protocol();
+  maplibregl.addProtocol('pmtiles', pmtilesProtocol.tile);
+
+  maplibregl.setRTLTextPlugin(
+    'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
+    null, true
+  );
+
+  var PMTILES_URL = 'pmtiles://https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/middle-east.pmtiles';
+
+  // Warm MapTiler-like flavor (Protomaps LIGHT with warmer, more colorful tones)
+  var WARM_FLAVOR = Object.assign({}, basemaps.LIGHT, {
+    background:            '#f5f0e8',
+    earth:                 '#f5f0e8',
+    park_a:                '#d1e8c8',
+    park_b:                '#a8d890',
+    hospital:              '#f0e0e0',
+    industrial:            '#e0e8ec',
+    school:                '#f0e8d8',
+    wood_a:                '#c8d8b0',
+    wood_b:                '#8cc880',
+    pedestrian:            '#f0ebe0',
+    scrub_a:               '#d8e8d0',
+    scrub_b:               '#a0d090',
+    sand:                  '#f0e8c0',
+    beach:                 '#f0e8c0',
+    aerodrome:             '#e8e8f0',
+    runway:                '#f0f0f8',
+    water:                 '#aad3df',
+    buildings:             '#e8dfd6',
+    minor_service_casing:  '#e4ddd4',
+    minor_casing:          '#e4ddd4',
+    link_casing:           '#e0c840',
+    major_casing_early:    '#e0c840',
+    major_casing_late:     '#e0c840',
+    highway_casing_early:  '#e0a820',
+    highway_casing_late:   '#e0a820',
+    other:                 '#f5f0ea',
+    minor_service:         '#fafafa',
+    minor_a:               '#fafafa',
+    minor_b:               '#ffffff',
+    link:                  '#fde090',
+    major:                 '#fde090',
+    highway:               '#f8c840',
+    city_label:            '#333333',
+    city_label_halo:       '#ffffff',
+    subplace_label:        '#666666',
+    subplace_label_halo:   '#f5f0e8',
+    state_label:           '#888888',
+    state_label_halo:      '#f5f0e8',
+    boundaries:            '#555555',
+    country_label:         '#888888',
+    landcover: {
+      grassland: 'rgba(195, 235, 180, 1)',
+      barren:    'rgba(245, 235, 200, 1)',
+      urban_area:'rgba(228, 222, 212, 1)',
+      farmland:  'rgba(215, 235, 200, 1)',
+      glacier:   'rgba(255, 255, 255, 1)',
+      scrub:     'rgba(220, 235, 200, 1)',
+      forest:    'rgba(185, 225, 190, 1)'
+    }
+  });
+
+  var MAP_STYLE = {
+    version: 8,
+    glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
+    sprite: 'https://protomaps.github.io/basemaps-assets/sprites/v4/light',
+    sources: {
+      protomaps: {
+        type: 'vector',
+        url: PMTILES_URL,
+        attribution: '<a href="https://protomaps.com">Protomaps</a> \u00a9 <a href="https://openstreetmap.org">OpenStreetMap</a>'
+      }
+    },
+    layers: basemaps.layers('protomaps', WARM_FLAVOR, { lang: 'he' })
+  };
+
+  var map = new maplibregl.Map({
+    container: 'map',
+    style: MAP_STYLE,
+    center: [DEFAULT_CENTER[1], DEFAULT_CENTER[0]], // MapLibre uses [lng, lat]
+    zoom: DEFAULT_ZOOM,
+    maxBounds: [[32.0, 24.0], [65.0, 42.0]]
+  });
+
+  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
+
+  var mapLoaded = false;
+  var polygonsGeoJSON = { type: 'FeatureCollection', features: [] };
+  var featureMap = {}; // name → GeoJSON feature object
+  var pendingPolygonData = null; // set if geo data loads before map
+
+  function updateMapLibreSource() {
+    if (!mapLoaded) return;
+    var src = map.getSource('alerts-source');
+    if (src) src.setData(polygonsGeoJSON);
+  }
+
+  map.on('load', function() {
+    mapLoaded = true;
+
+    // Narrow all roads to 65% of their default width
+    // MapLibre doesn't support ['*', scalar, interpolate_expr], so scale stop values directly
+    function scaleWidthExpr(expr, factor) {
+      if (typeof expr === 'number') return expr * factor;
+      if (!Array.isArray(expr) || expr[0] !== 'interpolate') return expr;
+      // ['interpolate', interp, input, zoom1, val1, zoom2, val2, ...]
+      var scaled = [expr[0], expr[1], expr[2]];
+      for (var i = 3; i < expr.length; i += 2) {
+        scaled.push(expr[i]);              // zoom stop — unchanged
+        scaled.push(expr[i + 1] * factor); // width value — scaled
+      }
+      return scaled;
+    }
+    map.getStyle().layers.forEach(function(l) {
+      if (l['source-layer'] === 'roads' && l.paint && l.paint['line-width']) {
+        map.setPaintProperty(l.id, 'line-width', scaleWidthExpr(l.paint['line-width'], 0.4));
+      }
+    });
+
+    // Thicker real country borders, exclude disputed
+    map.setFilter('boundaries_country', ['all', ['<=', 'kind_detail', 2], ['!=', 'disputed', true]]);
+    map.setPaintProperty('boundaries_country', 'line-width', 2);
+    // Disputed country borders (West Bank/Gaza outline, Lebanon, Golan): visible but dashed
+    map.addLayer({
+      id: 'boundaries_disputed',
+      type: 'line',
+      source: 'protomaps',
+      'source-layer': 'boundaries',
+      filter: ['all', ['<=', 'kind_detail', 2], ['==', 'disputed', true]],
+      paint: {
+        'line-color': '#777',
+        'line-width': 1.5,
+        'line-dasharray': [4, 3]
+      }
+    }, 'boundaries_country');
+    // Sub-regional boundaries (districts): only show when zoomed in
+    map.setFilter('boundaries', ['>', 'kind_detail', 2]);
+    map.setPaintProperty('boundaries', 'line-width', 0.8);
+    map.setPaintProperty('boundaries', 'line-opacity', ['step', ['zoom'], 0, 9, 1]);
+
+    map.addSource('alerts-source', { type: 'geojson', data: polygonsGeoJSON });
+
+    map.addLayer({
+      id: 'alerts-fill',
+      type: 'fill',
+      source: 'alerts-source',
+      paint: {
+        'fill-color': ['get', 'fillColor'],
+        'fill-opacity': ['get', 'fillOpacity']
+      }
+    });
+
+    // Invisible hit layer so ALL polygons are clickable regardless of opacity
+    map.addLayer({
+      id: 'alerts-hit',
+      type: 'fill',
+      source: 'alerts-source',
+      paint: { 'fill-opacity': 0, 'fill-color': 'transparent' }
+    });
+
+    map.addLayer({
+      id: 'alerts-stroke',
+      type: 'line',
+      source: 'alerts-source',
+      paint: {
+        'line-color': ['get', 'lineColor'],
+        'line-opacity': ['get', 'lineOpacity'],
+        'line-width': ['get', 'lineWidth']
+      }
+    });
+
+    map.on('click', 'alerts-hit', function(e) {
+      if (document.body.classList.contains('has-overlay')) return;
+      e.originalEvent.stopPropagation(); // prevent document handler from closing panel immediately
+      var name = e.features[0].properties.name;
+      openLocationPanel(name);
+    });
+    map.on('mouseenter', 'alerts-hit', function() {
+      if (!document.body.classList.contains('has-overlay'))
+        map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', 'alerts-hit', function() { map.getCanvas().style.cursor = ''; });
+
+    // If geo data already fetched, build polygons now
+    if (pendingPolygonData) {
+      buildPolygons(pendingPolygonData);
+      pendingPolygonData = null;
+    }
+  });
 
   // --- Toast ---
   function showToast(msg) {
@@ -1044,28 +1265,32 @@ <h2>אודות מפת העורף</h2>
     var LOCATION_PREF_KEY = 'oref-show-user-location';
     var LOCATION_HIDDEN_KEY = 'oref-location-hidden';
 
-    var userLocationDotIcon = L.divIcon({
-      html: '<span style="display:block;width:14px;height:14px;background:#4285F4;border:3px solid #fff;border-radius:50%;box-shadow:0 0 6px rgba(66,133,244,0.6);"></span>',
-      className: '',
-      iconSize: [20, 20],
-      iconAnchor: [10, 10]
-    });
-    var userLocationCarIcon = L.divIcon({
-      html: '<span style="display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35));">🚗</span>',
-      className: '',
-      iconSize: [28, 28],
-      iconAnchor: [14, 14]
-    });
+    function makeUserLocationDotEl() {
+      var el = document.createElement('div');
+      el.style.cssText = 'width:20px;height:20px;display:flex;align-items:center;justify-content:center;';
+      el.innerHTML = '<span style="display:block;width:14px;height:14px;background:#4285F4;border:3px solid #fff;border-radius:50%;box-shadow:0 0 6px rgba(66,133,244,0.6);"></span>';
+      return el;
+    }
+    function makeUserLocationCarEl() {
+      var el = document.createElement('div');
+      el.style.cssText = 'width:28px;height:28px;';
+      el.innerHTML = '<span style="display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-size:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.35));">🚗</span>';
+      return el;
+    }
 
     var watchId = null;
     var transientTimeout = null;
 
-    function getUserLocationIcon() {
-      return drivingModeFeatureEnabled ? userLocationCarIcon : userLocationDotIcon;
+    function makeUserLocationEl() {
+      return drivingModeFeatureEnabled ? makeUserLocationCarEl() : makeUserLocationDotEl();
     }
 
     function refreshUserLocationMarkerIcon() {
-      if (userLocationMarker) userLocationMarker.setIcon(getUserLocationIcon());
+      if (!userLocationMarker) return;
+      var el = userLocationMarker.getElement();
+      var newEl = makeUserLocationEl();
+      el.innerHTML = newEl.innerHTML;
+      el.style.cssText = newEl.style.cssText;
     }
 
     function shouldRestoreUserLocation() {
@@ -1106,7 +1331,7 @@ <h2>אודות מפת העורף</h2>
 
     function stopWatching() {
       if (watchId !== null) { navigator.geolocation.clearWatch(watchId); watchId = null; }
-      if (userLocationMarker) { map.removeLayer(userLocationMarker); userLocationMarker = null; }
+      if (userLocationMarker) { userLocationMarker.remove(); userLocationMarker = null; }
       currentUserLatLng = null;
       document.dispatchEvent(new CustomEvent('app:locationChanged'));
     }
@@ -1117,14 +1342,12 @@ <h2>אודות מפת העורף</h2>
         return false;
       }
       if (!userLocationMarker) {
-        userLocationMarker = L.marker(latlng, {
-          icon: getUserLocationIcon(),
-          interactive: false,
-          zIndexOffset: 1000
-        }).addTo(map);
+        userLocationMarker = new maplibregl.Marker({ element: makeUserLocationEl(), anchor: 'center' })
+          .setLngLat([latlng[1], latlng[0]])
+          .addTo(map);
         showToast('מראה מיקום על המפה');
       } else {
-        userLocationMarker.setLatLng(latlng);
+        userLocationMarker.setLngLat([latlng[1], latlng[0]]);
         refreshUserLocationMarkerIcon();
       }
       currentUserLatLng = { lat: latlng[0], lng: latlng[1] };
@@ -1345,24 +1568,27 @@ <h2>אודות מפת העורף</h2>
     if (menuDrivingModeFeatureEl) menuDrivingModeFeatureEl.classList.toggle('active', drivingModeFeatureEnabled);
   }
 
-  function getUserViewportDriftRatio(latlng) {
-    var point = map.latLngToContainerPoint(latlng);
-    var centerPoint = map.latLngToContainerPoint(map.getCenter());
-    var size = map.getSize();
-    if (!size.x || !size.y) return 0;
-    return Math.max(Math.abs(point.x - centerPoint.x) / size.x, Math.abs(point.y - centerPoint.y) / size.y);
+  function getUserViewportDriftRatio(lnglat) {
+    // lnglat = [lng, lat] (MapLibre order)
+    var point = map.project(lnglat);
+    var center = map.getCenter();
+    var centerPoint = map.project([center.lng, center.lat]);
+    var canvas = map.getCanvas();
+    var w = canvas.offsetWidth, h = canvas.offsetHeight;
+    if (!w || !h) return 0;
+    return Math.max(Math.abs(point.x - centerPoint.x) / w, Math.abs(point.y - centerPoint.y) / h);
   }
 
   function maybeFollowUserLocation(force) {
     if (!isFollowModeActive()) return false;
     var pos = getCurrentUserPosition();
     if (!pos) return false;
-    var latlng = L.latLng(pos.lat, pos.lng);
-    if (!force && map.getZoom() === FOLLOW_ZOOM && getUserViewportDriftRatio(latlng) <= FOLLOW_DRIFT_RATIO) {
+    var lnglat = [pos.lng, pos.lat];
+    if (!force && map.getZoom() === FOLLOW_ZOOM && getUserViewportDriftRatio(lnglat) <= FOLLOW_DRIFT_RATIO) {
       return false;
     }
     isZoomingProgrammatically = true;
-    map.flyTo(latlng, FOLLOW_ZOOM, { duration: 0.7 });
+    map.flyTo({ center: lnglat, zoom: FOLLOW_ZOOM });
     return true;
   }
 
@@ -1395,7 +1621,7 @@ <h2>אודות מפת העורף</h2>
     }
     if (!drivingModeFeatureEnabled && getEffectiveZoomMode() === 'manual') {
       isZoomingProgrammatically = true;
-      map.flyTo(DEFAULT_CENTER, DEFAULT_ZOOM, { duration: 0.7 });
+      map.flyTo({ center: [DEFAULT_CENTER[1], DEFAULT_CENTER[0]], zoom: DEFAULT_ZOOM });
     }
   }
 
@@ -1479,7 +1705,7 @@ <h2>אודות מפת העורף</h2>
       } else {
         showToast('זום אוטומטי כובה');
         isZoomingProgrammatically = true;
-        map.flyTo(DEFAULT_CENTER, DEFAULT_ZOOM, { duration: 0.7 });
+        map.flyTo({ center: [DEFAULT_CENTER[1], DEFAULT_CENTER[0]], zoom: DEFAULT_ZOOM });
       }
       return;
     }
@@ -1526,8 +1752,7 @@ <h2>אודות מפת העורף</h2>
   var locationStates = {};       // {name: {state, since, marker}}
   var locationHistory = {};      // {name: [{title, alertDate, state}, ...]}
   var favorites = {};            // {name: {lat, lng}}
-  var favoriteMarkers = {};      // {name: L.marker}
-  var openPopupLatlng = null;    // latlng of the click that opened the current popup
+  var favoriteMarkers = {};      // {name: maplibregl.Marker}
   var lastHistoryDate = null;    // track newest history entry
   var liveErrors = 0;
   var historyErrors = 0;
@@ -1656,7 +1881,7 @@ <h2>אודות מפת העורף</h2>
       popPanelHistory();
     } else {
       closeTimelinePanel();
-      map.closePopup();
+      closeLocationPanel();
       openMenu();
     }
   }
@@ -1666,15 +1891,32 @@ <h2>אודות מפת העורף</h2>
     toggleMenu();
   });
 
-  // --- Polygon state ---
-  var locationPolygons = {};  // name → L.polygon
+  // --- Shared oref_points.json loader (used by extension modules) ---
+  var _orefPoints = null;
+  var _orefPointsPromise = null;
+  function _ensureOrefPoints() {
+    if (_orefPoints) return Promise.resolve(_orefPoints);
+    if (_orefPointsPromise) return _orefPointsPromise;
+    _orefPointsPromise = fetch('oref_points.json')
+      .then(function(resp) {
+        if (!resp.ok) throw new Error('HTTP ' + resp.status);
+        return resp.json();
+      })
+      .then(function(data) {
+        _orefPoints = data || {};
+        return _orefPoints;
+      })
+      .finally(function() { _orefPointsPromise = null; });
+    return _orefPointsPromise;
+  }
 
   // --- Extension state API ---
   window.AppState = {
     map: map,
     get locationStates() { return locationStates; },
     get locationHistory() { return locationHistory; },
-    get locationPolygons() { return locationPolygons; },
+    get featureMap() { return featureMap; },
+    ensureOrefPoints: _ensureOrefPoints,
     get userPosition() { return currentUserLatLng || null; },
     get isLiveMode() { return isLiveMode; },
     get viewTime() { return currentViewTime; },
@@ -1683,8 +1925,6 @@ <h2>אודות מפת העורף</h2>
 
   // --- Colors ---
   var COLORS = { red: '#ff0000', purple: '#9922cc', yellow: '#ffcc00', green: '#00cc00' };
-  var BASE_STYLE = { fillColor: '#888', fillOpacity: 0.01, color: '#888', opacity: 0 };
-
   // --- Sound ---
   function getAudioContext() {
     if (!audioCtx) {
@@ -1816,48 +2056,33 @@ <h2>אודות מפת העורף</h2>
   }
 
   // --- Build pre-computed polygons from locations_polygons.json ---
+  // Coordinates in locations_polygons.json are already [lng, lat] — GeoJSON order
   function buildPolygons(data) {
+    if (!mapLoaded) { pendingPolygonData = data; return; }
+    var features = [];
     for (var name in data) {
       var coords = data[name];
       if (!Array.isArray(coords)) continue;
       var isNested = Array.isArray(coords[0][0]);
-      var latlngs;
-      if (isNested) {
-        // Polygon with holes: [[[outer]], [[hole1]], ...]
-        latlngs = coords.map(function(ring) {
-          return ring.map(function(c) { return [c[1], c[0]]; });
-        });
-      } else {
-        // Simple polygon: [[lng,lat], ...]
-        latlngs = coords.map(function(c) { return [c[1], c[0]]; });
-      }
-      var polygon = L.polygon(latlngs, {
-        fillColor: '#888',
-        fillOpacity: 0.01,
-        color: '#888',
-        opacity: 0,
-        weight: 1,
-        interactive: true
-      }).addTo(map);
-      polygon.bindTooltip(name, { direction: 'top', offset: [0, -20] });
-      (function(n, poly) {
-        poly.on('click', function(e) {
-          if (document.body.classList.contains('has-overlay')) return;
-          showPopup(n, poly, e.latlng);
-        });
-        poly.on('mouseover', function() {
-          if (document.body.classList.contains('has-overlay')) return;
-          poly.setStyle(ACTIVE_STYLE);
-        });
-        poly.on('mouseout', function() {
-          if (openPopupName === n) return;
-          poly.setStyle(currentLocationStyle(n));
-        });
-      })(name, polygon);
-      locationPolygons[name] = polygon;
-    }
-
-    console.log('Loaded pre-computed polygons for', Object.keys(locationPolygons).length, 'locations');
+      var polygonCoords = isNested ? coords : [coords];
+      var feature = {
+        type: 'Feature',
+        properties: {
+          name: name,
+          fillColor: '#888888',
+          fillOpacity: 0.01,
+          lineColor: '#888888',
+          lineOpacity: 0,
+          lineWidth: 1
+        },
+        geometry: { type: 'Polygon', coordinates: polygonCoords }
+      };
+      features.push(feature);
+      featureMap[name] = feature;
+    }
+    polygonsGeoJSON.features = features;
+    updateMapLibreSource();
+    console.log('Loaded GeoJSON polygons for', features.length, 'locations');
   }
 
   // --- Title classification ---
@@ -1902,6 +2127,24 @@ <h2>אודות מפת העורף</h2>
   }
 
   // --- Marker management ---
+  function applyFeatureStyle(feature, state, opacity) {
+    if (!feature) return;
+    feature.properties.fillColor = COLORS[state];
+    feature.properties.fillOpacity = opacity;
+    feature.properties.lineColor = COLORS[state];
+    feature.properties.lineOpacity = opacity + 0.15;
+    feature.properties.lineWidth = state === 'red' ? 0.5 : 1;
+  }
+
+  function resetFeatureStyle(feature) {
+    if (!feature) return;
+    feature.properties.fillColor = '#888888';
+    feature.properties.fillOpacity = 0.01;
+    feature.properties.lineColor = '#888888';
+    feature.properties.lineOpacity = 0;
+    feature.properties.lineWidth = 1;
+  }
+
   function setLocationState(name, state, since) {
     var existing = locationStates[name];
 
@@ -1916,47 +2159,37 @@ <h2>אודות מפת העורף</h2>
       }
     }
 
-    var polygon = locationPolygons[name] || null;
-    if (!polygon) return;
+    var feature = featureMap[name] || null;
+    if (!feature) return;
 
     var now = Date.now();
     var opacity = state === 'green'
       ? 0.5 * Math.max(0, 1 - ((now - (since || now)) / GREEN_FADE_MS))
       : 0.3;
-    polygon.setStyle({
-      color: COLORS[state],
-      fillColor: COLORS[state],
-      fillOpacity: opacity,
-      opacity: opacity + 0.15,
-      weight: state === 'red' ? 0.5 : 1
-    });
-    locationStates[name] = {
-      state: state,
-      since: since || Date.now(),
-      marker: polygon
-    };
-
+    applyFeatureStyle(feature, state, opacity);
+    locationStates[name] = { state: state, since: since || Date.now(), marker: feature };
+    updateMapLibreSource();
     playSoundForState(state, name);
   }
 
   function removeLocation(name) {
     var entry = locationStates[name];
     if (entry && entry.marker) {
-      entry.marker.setStyle(BASE_STYLE);
-      entry.marker.closePopup();
+      resetFeatureStyle(entry.marker);
+      updateMapLibreSource();
     }
+    if (openPanelName === name) closeLocationPanel();
     delete locationStates[name];
   }
 
   // --- Alert history per location ---
-  var openPopupName = null;
-  var openPopupMarker = null;
+  var openPanelName = null;
 
   function updateOverlay() {
     var tlBtn = document.getElementById('timeline-btn');
     var panelOpen = menuOpen ||
       (tlBtn && tlBtn.classList.contains('open'));
-    var popupOpen = openPopupName !== null;
+    var popupOpen = openPanelName !== null;
     document.body.classList.toggle('has-overlay', panelOpen || popupOpen);
   }
 
@@ -1975,9 +2208,9 @@ <h2>אודות מפת העורף</h2>
       }
     }
     arr.push({ title: title, alertDate: alertDate, state: state });
-    // Refresh popup if it's open for this location
-    if (openPopupName === name && openPopupMarker) {
-      openPopupMarker.getPopup().setContent(buildPopupHtml(name));
+    // Refresh panel if open for this location
+    if (openPanelName === name) {
+      document.getElementById('location-panel-content').innerHTML = buildPanelHtml(name);
     }
   }
 
@@ -2011,25 +2244,84 @@ <h2>אודות מפת העורף</h2>
     return '\u26A0 ' + norm;
   }
 
-  // --- Favorites ---
-  var favoriteIcon = L.divIcon({
-    html: '<span style="display:flex;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,0.3);align-items:center;justify-content:center"><svg width="10" height="10" viewBox="0 0 24 24" fill="#f5a623" stroke="#c88a1a" stroke-width="1"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg></span>',
-    className: '',
-    iconSize: [14, 14],
-    iconAnchor: [7, 7]
-  });
+  // --- Location panel (replaces popups) ---
+  function buildPanelHtml(name) {
+    var entries = (locationHistory[name] || []).slice()
+      .sort(function(a, b) { return (b.alertDate || '').replace('T', ' ').localeCompare((a.alertDate || '').replace('T', ' ')); });
+    var rows = entries.map(function(e, i) {
+      var color = COLORS[e.state] || '#888';
+      var label = displayLabel(e.title);
+      var time = e.alertDate ? e.alertDate.slice(11, 16) : '';
+      var nextEntry = entries[i + 1];
+      var border = (nextEntry && nextEntry.state === 'green') ? 'border-bottom:1px solid #ccc;padding-bottom:4px;margin-bottom:4px;' : '';
+      return '<div style="padding:1px 0;' + border + 'display:flex;align-items:baseline;gap:8px;direction:rtl">' +
+        (time ? '<span style="color:' + color + ';font-size:12px;white-space:nowrap;font-weight:bold">' + time + '</span>' : '') +
+        '<span style="color:#444;font-size:13px;flex:1;text-align:right">' + label + '</span>' +
+      '</div>';
+    }).join('');
+    var isFav = !!favorites[name];
+    var starColor = isFav ? '#f5a623' : '#ccc';
+    var starChar = isFav ? '\u2605' : '\u2606';
+    var starBtn = '<span class="fav-star" onclick="window._toggleFav()" ' +
+      'style="cursor:pointer;font-size:18px;color:' + starColor + ';margin-inline-start:6px;vertical-align:middle" ' +
+      'title="' + (isFav ? 'הסר ממועדפים' : 'הוסף למועדפים') + '">' + starChar + '</span>';
+    return '<div style="direction:rtl;text-align:right"><b>' + name + '</b>' + starBtn +
+      (rows ? '<div style="margin-top:6px">' + rows + '</div>' : '<p style="color:#888;margin-top:6px">אין אירועים לאחרונה</p>') +
+      '</div>';
+  }
+
+  function openLocationPanel(name) {
+    openPanelName = name;
+    document.getElementById('location-panel-content').innerHTML = buildPanelHtml(name);
+    document.getElementById('location-panel').classList.add('open');
+    updateOverlay();
+  }
+
+  function closeLocationPanel() {
+    openPanelName = null;
+    document.getElementById('location-panel').classList.remove('open');
+    updateOverlay();
+  }
 
+  document.getElementById('location-panel-close').addEventListener('click', closeLocationPanel);
+
+
+  // Expose for panel onclick — uses openPanelName so no name is embedded in HTML
+  window._toggleFav = function() {
+    var name = openPanelName;
+    if (!name) return;
+    var latlng = favorites[name];
+    if (!latlng) {
+      // Compute centroid from feature
+      var feature = featureMap[name];
+      if (feature) {
+        var outer = feature.geometry.coordinates[0];
+        var sumLat = 0, sumLng = 0;
+        for (var i = 0; i < outer.length; i++) { sumLng += outer[i][0]; sumLat += outer[i][1]; }
+        latlng = { lat: sumLat / outer.length, lng: sumLng / outer.length };
+      }
+    }
+    if (!latlng) return;
+    toggleFavorite(name, latlng);
+  };
+
+  // --- Favorites ---
   function saveFavorites() {
     try { localStorage.setItem('oref-favorites', JSON.stringify(favorites)); } catch(e) {}
   }
 
+  function makeFavoriteMarkerEl() {
+    var el = document.createElement('span');
+    el.style.cssText = 'display:flex;width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,0.3);align-items:center;justify-content:center';
+    el.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="#f5a623" stroke="#c88a1a" stroke-width="1"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>';
+    return el;
+  }
+
   function addFavoriteMarker(name, latlng) {
     if (favoriteMarkers[name]) favoriteMarkers[name].remove();
-    favoriteMarkers[name] = L.marker([latlng.lat, latlng.lng], {
-      icon: favoriteIcon,
-      interactive: false,
-      zIndexOffset: 900
-    }).addTo(map);
+    favoriteMarkers[name] = new maplibregl.Marker({ element: makeFavoriteMarkerEl(), anchor: 'center' })
+      .setLngLat([latlng.lng, latlng.lat])
+      .addTo(map);
   }
 
   function removeFavoriteMarker(name) {
@@ -2048,91 +2340,29 @@ <h2>אודות מפת העורף</h2>
       addFavoriteMarker(name, latlng);
     }
     saveFavorites();
-    // Refresh popup if open
-    if (openPopupName === name && openPopupMarker) {
-      openPopupMarker.getPopup().setContent(buildPopupHtml(name));
+    // Refresh panel if open
+    if (openPanelName === name) {
+      document.getElementById('location-panel-content').innerHTML = buildPanelHtml(name);
     }
   }
 
-  // Expose for popup onclick — uses openPopupName so no name is embedded in HTML
-  window._toggleFav = function() {
-    var name = openPopupName;
-    if (!name) return;
-    var polygon = locationPolygons[name];
-    var latlng = openPopupLatlng || favorites[name] || (polygon && polygon.getBounds().getCenter());
-    if (!latlng) return;
-    toggleFavorite(name, latlng);
-  };
-
-  function buildPopupHtml(name) {
-    var entries = (locationHistory[name] || []).slice()
-      .sort(function(a, b) { return (b.alertDate || '').replace('T', ' ').localeCompare((a.alertDate || '').replace('T', ' ')); });
-    var rows = entries.map(function(e, i) {
-      var color = COLORS[e.state] || '#888';
-      var label = displayLabel(e.title);
-      var time = e.alertDate ? e.alertDate.slice(11, 16) : '';
-      var nextEntry = entries[i + 1];
-      var border = (nextEntry && nextEntry.state === 'green') ? 'border-bottom:1px solid #ccc;padding-bottom:4px;margin-bottom:4px;' : '';
-      return '<div style="padding:1px 0;' + border + 'display:flex;align-items:baseline;gap:8px;direction:rtl">' +
-        (time ? '<span style="color:' + color + ';font-size:12px;white-space:nowrap;font-weight:bold">' + time + '</span>' : '') +
-        '<span style="color:#444;font-size:13px;flex:1;text-align:right">' + label + '</span>' +
-      '</div>';
-    }).join('');
-    var isFav = !!favorites[name];
-    var starColor = isFav ? '#f5a623' : '#ccc';
-    var starChar = isFav ? '\u2605' : '\u2606';
-    var starBtn = '<span class="fav-star" onclick="window._toggleFav()" ' +
-      'style="cursor:pointer;font-size:18px;color:' + starColor + ';margin-inline-start:6px;vertical-align:middle" ' +
-      'title="' + (isFav ? 'הסר ממועדפים' : 'הוסף למועדפים') + '">' + starChar + '</span>';
-    return '<div style="direction:rtl;width:min(170px,85vw);text-align:right"><b>' + name + '</b>' + starBtn +
-      (rows ? '<div style="margin-top:6px">' + rows + '</div>' : '<p style="color:#888;margin-top:6px">אין אירועים לאחרונה</p>') +
-      '</div>';
-  }
-
-  var ACTIVE_STYLE = { fillOpacity: 0.5, opacity: 0.8, weight: 3 };
-
-  function currentLocationStyle(name) {
-    var entry = locationStates[name];
-    if (!entry) return BASE_STYLE;
-    if (entry.state === 'green') {
-      var opacity = 0.5 * Math.max(0, 1 - ((Date.now() - entry.since) / GREEN_FADE_MS));
-      return { color: COLORS.green, fillColor: COLORS.green, fillOpacity: opacity, opacity: opacity + 0.15, weight: 1 };
-    }
-    return { color: COLORS[entry.state], fillColor: COLORS[entry.state], fillOpacity: 0.3, opacity: 0.45, weight: entry.state === 'red' ? 0.5 : 1 };
-  }
-
-  function showPopup(name, marker, latlng) {
-    openPopupName = name;
-    openPopupMarker = marker;
-    openPopupLatlng = latlng || null;
-    marker.setStyle(ACTIVE_STYLE);
-    marker.bindPopup(buildPopupHtml(name), { maxWidth: 180 })
-      .openPopup()
-      .on('popupclose', function() {
-        openPopupName = null; openPopupMarker = null;
-        openPopupLatlng = null;
-        marker.setStyle(currentLocationStyle(name));
-        updateOverlay();
-      });
-    updateOverlay();
-  }
-
   // --- Polygon pulse hint (mobile) ---
   function showPolygonHint() {
     // Collect all currently colored polygons and those with recent history
-    var targets = []; // [{polygon, name, color, origStyle}]
+    var targets = []; // [{feature, color, origProps}]
 
     for (var name in locationStates) {
       var entry = locationStates[name];
-      var polygon = locationPolygons[name];
-      if (!polygon) continue;
+      var feature = featureMap[name];
+      if (!feature) continue;
       var op = entry.state === 'green'
         ? 0.5 * Math.max(0, 1 - ((Date.now() - entry.since) / GREEN_FADE_MS))
         : 0.3;
+      var p = feature.properties;
       targets.push({
-        polygon: polygon,
+        feature: feature,
         color: COLORS[entry.state],
-        origStyle: { color: COLORS[entry.state], fillColor: COLORS[entry.state], fillOpacity: op, opacity: op + 0.15, weight: entry.state === 'red' ? 0.5 : 1 }
+        origProps: { fillColor: p.fillColor, fillOpacity: p.fillOpacity, lineColor: p.lineColor, lineOpacity: p.lineOpacity, lineWidth: p.lineWidth }
       });
     }
 
@@ -2140,9 +2370,10 @@ <h2>אודות מפת העורף</h2>
     if (targets.length === 0) {
       for (var hName in locationHistory) {
         if (locationHistory[hName].length > 0 && !locationStates[hName]) {
-          var hPoly = locationPolygons[hName];
-          if (hPoly) {
-            targets.push({ polygon: hPoly, color: COLORS.green, origStyle: BASE_STYLE });
+          var hFeature = featureMap[hName];
+          if (hFeature) {
+            var hp = hFeature.properties;
+            targets.push({ feature: hFeature, color: COLORS.green, origProps: { fillColor: hp.fillColor, fillOpacity: hp.fillOpacity, lineColor: hp.lineColor, lineOpacity: hp.lineOpacity, lineWidth: hp.lineWidth } });
           }
         }
       }
@@ -2156,18 +2387,20 @@ <h2>אודות מפת העורף</h2>
       var t = (step % 10) / 10;
       var opacity = 0.05 + 0.15 * Math.sin(t * Math.PI);
       for (var i = 0; i < targets.length; i++) {
-        targets[i].polygon.setStyle({
-          fillColor: targets[i].color, fillOpacity: opacity,
-          color: targets[i].color, opacity: Math.min(opacity + 0.15, 0.8), weight: 2
-        });
+        var fp = targets[i].feature.properties;
+        fp.fillColor = targets[i].color; fp.fillOpacity = opacity;
+        fp.lineColor = targets[i].color; fp.lineOpacity = Math.min(opacity + 0.15, 0.8); fp.lineWidth = 2;
       }
+      updateMapLibreSource();
       step++;
       if (step >= totalSteps) {
         clearInterval(polygonHintInterval);
         polygonHintInterval = null;
         for (var j = 0; j < targets.length; j++) {
-          targets[j].polygon.setStyle(targets[j].origStyle);
+          var rp = targets[j].origProps;
+          Object.assign(targets[j].feature.properties, rp);
         }
+        updateMapLibreSource();
         polygonHintTargets = null;
       }
     }, 100);
@@ -2180,8 +2413,9 @@ <h2>אודות מפת העורף</h2>
     }
     if (polygonHintTargets) {
       for (var i = 0; i < polygonHintTargets.length; i++) {
-        polygonHintTargets[i].polygon.setStyle(BASE_STYLE);
+        resetFeatureStyle(polygonHintTargets[i].feature);
       }
+      updateMapLibreSource();
       polygonHintTargets = null;
     }
   }
@@ -2208,7 +2442,7 @@ <h2>אודות מפת העורף</h2>
         updateShadowState(loc, state);
       }
     }
-    if (shouldAutoZoomToEvents() && isLiveMode && isNewAlert && !openPopupName) {
+    if (shouldAutoZoomToEvents() && isLiveMode && isNewAlert && !openPanelName) {
       maybeZoomToEvent();
     }
     document.dispatchEvent(new CustomEvent('app:stateChanged'));
@@ -2303,12 +2537,17 @@ <h2>אודות מפת העורף</h2>
         toRemove.push(name);
       } else {
         var opacity = 0.5 * (1 - elapsed / GREEN_FADE_MS);
-        entry.marker.setStyle({ fillOpacity: opacity, opacity: opacity + 0.15 });
+        if (entry.marker) {
+          entry.marker.properties.fillOpacity = opacity;
+          entry.marker.properties.lineOpacity = opacity + 0.15;
+        }
       }
     }
     for (var i = 0; i < toRemove.length; i++) {
       removeLocation(toRemove[i]);
     }
+    // Always push opacity updates to the source (even without removals)
+    updateMapLibreSource();
     if (toRemove.length > 0) {
       updateLiveStatus();
       document.dispatchEvent(new CustomEvent('app:stateChanged'));
@@ -2327,17 +2566,25 @@ <h2>אודות מפת העורף</h2>
     return '';
   }
 
+  // Returns a maplibregl.LngLatBounds for the given feature (GeoJSON polygon)
+  function featureBounds(feature) {
+    var bounds = new maplibregl.LngLatBounds();
+    var coords = feature.geometry.coordinates;
+    // outer ring only (index 0)
+    var outer = coords[0];
+    for (var i = 0; i < outer.length; i++) bounds.extend(outer[i]);
+    return bounds;
+  }
+
   function getActiveEventBounds() {
     var allBounds = null;
     for (var name in locationStates) {
       if (locationStates[name].state === 'green') continue;
-      var polygon = locationPolygons[name];
-      if (!polygon) continue;
-      if (!allBounds) {
-        allBounds = L.latLngBounds(polygon.getBounds());
-      } else {
-        allBounds.extend(polygon.getBounds());
-      }
+      var feature = featureMap[name];
+      if (!feature) continue;
+      var b = featureBounds(feature);
+      if (!allBounds) allBounds = b;
+      else allBounds.extend(b);
     }
     return allBounds;
   }
@@ -2346,7 +2593,7 @@ <h2>אודות מפת העורף</h2>
     var bounds = getActiveEventBounds();
     if (!bounds) return;
     isZoomingProgrammatically = true;
-    map.flyToBounds(bounds, { padding: [80, 80], maxZoom: 10, duration: 0.7 });
+    map.fitBounds(bounds, { padding: 80, maxZoom: 10 });
   }
 
 
@@ -2619,10 +2866,10 @@ <h2>אודות מפת העורף</h2>
     for (var name in locationStates) {
       var entry = locationStates[name];
       if (entry && entry.marker) {
-        entry.marker.setStyle(BASE_STYLE);
-        entry.marker.closePopup();
+        resetFeatureStyle(entry.marker);
       }
     }
+    closeLocationPanel();
     locationStates = {};
 
     // Replay history up to targetTime
@@ -2647,31 +2894,23 @@ <h2>אודות מפת העורף</h2>
     for (var loc in accumulated) {
       var s = accumulated[loc].state;
       var sinceTime = accumulated[loc].since;
-      var polygon = locationPolygons[loc] || null;
-      if (!polygon) continue;
+      var feature = featureMap[loc] || null;
+      if (!feature) continue;
+      var fp = feature.properties;
       if (s === 'green') {
         var elapsed = targetTime - sinceTime;
         if (elapsed >= GREEN_FADE_MS) continue; // already faded
         var opacity = 0.5 * (1 - elapsed / GREEN_FADE_MS);
-        polygon.setStyle({
-          color: COLORS.green,
-          fillColor: COLORS.green,
-          fillOpacity: opacity,
-          opacity: opacity + 0.15,
-          weight: 1
-        });
+        fp.lineColor = COLORS.green; fp.fillColor = COLORS.green;
+        fp.fillOpacity = opacity; fp.lineOpacity = opacity + 0.15; fp.lineWidth = 1;
       } else {
         if (targetTime - sinceTime >= ALERT_MAX_AGE_MS) continue; // stale alert
-        polygon.setStyle({
-          color: COLORS[s],
-          fillColor: COLORS[s],
-          fillOpacity: 0.3,
-          opacity: 0.45,
-          weight: s === 'red' ? 0.5 : 1
-        });
+        fp.lineColor = COLORS[s]; fp.fillColor = COLORS[s];
+        fp.fillOpacity = 0.3; fp.lineOpacity = 0.45; fp.lineWidth = s === 'red' ? 0.5 : 1;
       }
-      locationStates[loc] = { state: s, since: sinceTime, marker: polygon };
+      locationStates[loc] = { state: s, since: sinceTime, marker: feature };
     }
+    updateMapLibreSource();
     document.dispatchEvent(new CustomEvent('app:stateChanged'));
   }
 
@@ -2863,7 +3102,7 @@ <h2>אודות מפת העורף</h2>
 
     function openTimeline() {
       if (menuOpen) { closeMenu(); }
-      map.closePopup();
+      closeLocationPanel();
       container.classList.add('open');
       pushPanelHistory();
       updateDateNav();
@@ -2923,7 +3162,7 @@ <h2>אודות מפת העורף</h2>
         maybeZoomToEvent();
       } else if (!drivingModeFeatureEnabled && getEffectiveZoomMode() === 'manual') {
         isZoomingProgrammatically = true;
-        map.flyTo(DEFAULT_CENTER, DEFAULT_ZOOM, { duration: 0.7 });
+        map.flyTo({ center: [DEFAULT_CENTER[1], DEFAULT_CENTER[0]], zoom: DEFAULT_ZOOM });
       } else {
         applySelectedZoomMode(true);
       }
@@ -3142,10 +3381,11 @@ <h2>אודות מפת העורף</h2>
       if (!locs) return null;
       var bounds = null;
       locs.forEach(function(loc) {
-        var polygon = locationPolygons[loc];
-        if (!polygon) return;
-        if (!bounds) bounds = L.latLngBounds(polygon.getBounds());
-        else bounds.extend(polygon.getBounds());
+        var feature = featureMap[loc];
+        if (!feature) return;
+        var b = featureBounds(feature);
+        if (!bounds) bounds = b;
+        else bounds.extend(b);
       });
       return bounds;
     }
@@ -3342,7 +3582,7 @@ <h2>אודות מפת העורף</h2>
               }
             };
             map.on('moveend', playFlyHandler);
-            map.flyToBounds(bounds, { padding: [80, 80], maxZoom: 10, duration: 0.7 });
+            map.fitBounds(bounds, { padding: 80, maxZoom: 10 });
             return;
           }
         }
@@ -3476,7 +3716,7 @@ <h2>אודות מפת העורף</h2>
         }
       }
       document.dispatchEvent(new CustomEvent('app:escape'));
-      map.closePopup();
+      closeLocationPanel();
       document.getElementById('errorDetail').style.display = 'none';
     }
   });
@@ -3538,7 +3778,7 @@ <h2>אודות מפת העורף</h2>
       soundResults.innerHTML = '';
       return;
     }
-    var matches = Object.keys(locationPolygons).filter(function(name) {
+    var matches = Object.keys(featureMap).filter(function(name) {
       return name.includes(q);
     }).slice(0, 20);
 
@@ -3561,7 +3801,7 @@ <h2>אודות מפת העורף</h2>
       searchResults.innerHTML = '';
       return;
     }
-    var matches = Object.keys(locationPolygons).filter(function(name) {
+    var matches = Object.keys(featureMap).filter(function(name) {
       return name.includes(q);
     }).slice(0, 20);
 
@@ -3574,19 +3814,19 @@ <h2>אודות מפת העורף</h2>
     var item = e.target.closest('.location-item');
     if (!item) return;
     var name = item.getAttribute('data-name');
-    var polygon = locationPolygons[name];
-    if (!polygon) return;
+    var feature = featureMap[name];
+    if (!feature) return;
 
     closeMenu();
     popPanelHistory();
 
-    var bounds = polygon.getBounds();
+    var bounds = featureBounds(feature);
     isZoomingProgrammatically = true;
-    map.flyToBounds(bounds, { padding: [80, 80], maxZoom: 12, duration: 0.7 });
+    map.fitBounds(bounds, { padding: 80, maxZoom: 12 });
 
     map.once('moveend', function() {
       isZoomingProgrammatically = false;
-      showPopup(name, polygon);
+      openLocationPanel(name);
     });
   });
 
@@ -3595,7 +3835,7 @@ <h2>אודות מפת העורף</h2>
     panelHistoryPushed = false;
     closeMenu();
     closeTimelinePanel();
-    map.closePopup();
+    closeLocationPanel();
   });
 
   // --- Click outside to close panels ---
@@ -3606,11 +3846,10 @@ <h2>אודות מפת העורף</h2>
       closed = true;
     }
     if (closed) popPanelHistory();
-    if (openPopupName) {
-      var mapContainer = document.getElementById('map');
-      var popupEl = document.querySelector('.leaflet-popup');
-      if (!mapContainer.contains(e.target) && (!popupEl || !popupEl.contains(e.target))) {
-        map.closePopup();
+    if (openPanelName) {
+      var locationPanel = document.getElementById('location-panel');
+      if (locationPanel && !locationPanel.contains(e.target)) {
+        closeLocationPanel();
       }
     }
   });
diff --git a/web/prediction-mode.js b/web/prediction-mode.js
index c776509..a6187d9 100644
--- a/web/prediction-mode.js
+++ b/web/prediction-mode.js
@@ -6,9 +6,7 @@
     var map = A.map;
     var showToast = A.showToast;
 
-    var orefPoints = null;
-    var orefPointsPromise = null;
-    var predictionLines = [];
+    var predictionFeatures = [];
     var enabled = localStorage.getItem('oref-predict') === 'true';
     var predictionUpdateScheduled = false;
 
@@ -16,47 +14,25 @@
     var PREDICTION_MIN_SPAN = 0.1;
     var ISRAEL_CENTER = [31.5, 34.8];
 
-    function ensureOrefPoints() {
-      if (orefPoints) return Promise.resolve(orefPoints);
-      if (orefPointsPromise) return orefPointsPromise;
-
-      orefPointsPromise = fetch('oref_points.json')
-        .then(function(resp) {
-          if (!resp.ok) throw new Error('HTTP ' + resp.status);
-          return resp.json();
-        })
-        .then(function(data) {
-          orefPoints = data || {};
-          return orefPoints;
-        })
-        .finally(function() {
-          orefPointsPromise = null;
-        });
-
-      return orefPointsPromise;
-    }
-
-    function polygonCentroid(poly) {
-      var rings = poly.getLatLngs();
-      if (!rings || rings.length === 0) return null;
-      var outer = Array.isArray(rings[0]) && rings[0].length && rings[0][0].lat !== undefined ? rings[0] : rings;
-      if (outer.length === 0 || typeof outer[0].lat !== 'number') return null;
+    // GeoJSON feature → [lat, lng] centroid of outer ring
+    function polygonCentroid(feature) {
+      var outer = feature.geometry.coordinates[0];
+      if (!outer || outer.length === 0) return null;
       var sumLat = 0, sumLng = 0;
       for (var i = 0; i < outer.length; i++) {
-        sumLat += outer[i].lat;
-        sumLng += outer[i].lng;
+        sumLat += outer[i][1];
+        sumLng += outer[i][0];
       }
       return [sumLat / outer.length, sumLng / outer.length];
     }
 
-    function polygonArea(poly) {
-      var rings = poly.getLatLngs();
-      if (!rings || rings.length === 0) return 0;
-      var outer = Array.isArray(rings[0]) && rings[0].length && rings[0][0].lat !== undefined ? rings[0] : rings;
-      if (outer.length < 3) return 0;
+    // GeoJSON feature → approximate polygon area (degrees²)
+    function polygonArea(feature) {
+      var outer = feature.geometry.coordinates[0];
+      if (!outer || outer.length < 3) return 0;
       var area = 0;
       for (var i = 0, j = outer.length - 1; i < outer.length; j = i++) {
-        area += (outer[j].lng + outer[i].lng) * (outer[j].lat - outer[i].lat);
+        area += (outer[j][0] + outer[i][0]) * (outer[j][1] - outer[i][1]);
       }
       return Math.abs(area / 2);
     }
@@ -176,27 +152,29 @@
     }
 
     function clearPredictionLines() {
-      for (var i = 0; i < predictionLines.length; i++) {
-        map.removeLayer(predictionLines[i]);
-      }
-      predictionLines = [];
+      if (predictionFeatures.length === 0) return;
+      predictionFeatures = [];
+      updatePredictionSource();
+    }
+
+    function updatePredictionSource() {
+      var src = map.getSource('prediction-source');
+      if (src) src.setData({ type: 'FeatureCollection', features: predictionFeatures });
     }
 
     // Cluster alerted locations by polygon adjacency.
-    // Two alerted locations are in the same cluster if their Voronoi polygons
-    // share a vertex (i.e., are touching). Connected components via union-find.
-    function clusterByAdjacency(locPoints, locationPolygons) {
+    // Two alerted locations are in the same cluster if their polygons share a vertex.
+    function clusterByAdjacency(locPoints, featureMap) {
       var n = locPoints.length;
       if (n === 0) return [];
       // Collect polygon vertices for each location
       var locVerts = [];
       for (var i = 0; i < n; i++) {
-        var poly = locationPolygons[locPoints[i][3]];
+        var feature = featureMap[locPoints[i][3]];
         var verts = [];
-        if (poly) {
-          var rings = poly.getLatLngs();
-          var outer = Array.isArray(rings[0]) && rings[0].length && rings[0][0].lat !== undefined ? rings[0] : rings;
-          for (var j = 0; j < outer.length; j++) verts.push([outer[j].lat, outer[j].lng]);
+        if (feature) {
+          var outer = feature.geometry.coordinates[0];
+          for (var j = 0; j < outer.length; j++) verts.push([outer[j][1], outer[j][0]]);
         }
         locVerts.push(verts);
       }
@@ -240,22 +218,26 @@
         return;
       }
 
-      ensureOrefPoints().then(function(orefPts) {
-        clearPredictionLines();
+      A.ensureOrefPoints().then(function(orefPts) {
         var locationStates = A.locationStates;
-        var locationPolygons = A.locationPolygons;
+        var featureMap = A.featureMap;
 
         var locPoints = [];
         for (var name in locationStates) {
           var entry = locationStates[name];
           if (!entry || entry.state !== 'red') continue;
           var pt = orefPts[name];
-          if (!pt) { var poly = locationPolygons[name]; if (poly) pt = polygonCentroid(poly); }
+          if (!pt) { var feature = featureMap[name]; if (feature) pt = polygonCentroid(feature); }
           if (pt) locPoints.push([pt[0], pt[1], 1, name]);
         }
-        if (locPoints.length < 3) return;
+        if (locPoints.length < 3) {
+          clearPredictionLines();
+          return;
+        }
+
+        var clusters = clusterByAdjacency(locPoints, featureMap);
+        var newFeatures = [];
 
-        var clusters = clusterByAdjacency(locPoints, locationPolygons);
         for (var ci = 0; ci < clusters.length; ci++) {
           var cluster = clusters[ci];
           if (cluster.length < 3) continue;
@@ -263,25 +245,24 @@
           var VERTS_PER_POLY = 12;
           var vertices = [];
           for (var i = 0; i < cluster.length; i++) {
-            var poly = locationPolygons[cluster[i][3]];
-            if (!poly) continue;
-            var rings = poly.getLatLngs();
-            var outer = Array.isArray(rings[0]) && rings[0].length && rings[0][0].lat !== undefined ? rings[0] : rings;
+            var feature = featureMap[cluster[i][3]];
+            if (!feature) continue;
+            var outer = feature.geometry.coordinates[0];
             var step = Math.max(1, Math.floor(outer.length / VERTS_PER_POLY));
-            for (var j = 0; j < outer.length; j += step) vertices.push([outer[j].lat, outer[j].lng, 1]);
+            for (var j = 0; j < outer.length; j += step) vertices.push([outer[j][1], outer[j][0], 1]);
           }
           if (vertices.length < 6) continue;
 
           var line = fitLine(vertices);
           if (!line) continue;
 
-          // Area-weighted centroid using polygon vertex mean (visual center of the blob).
+          // Area-weighted centroid
           var awLat = 0, awLng = 0, awTotal = 0;
           for (var i = 0; i < cluster.length; i++) {
             var locName = cluster[i][3];
-            var polyForArea = locationPolygons[locName];
-            var a = polyForArea ? Math.max(polygonArea(polyForArea), 1e-6) : 1e-6;
-            var pc = polyForArea ? polygonCentroid(polyForArea) : null;
+            var polyFeature = featureMap[locName];
+            var a = polyFeature ? Math.max(polygonArea(polyFeature), 1e-6) : 1e-6;
+            var pc = polyFeature ? polygonCentroid(polyFeature) : null;
             if (pc) { awLat += pc[0] * a; awLng += pc[1] * a; awTotal += a; }
           }
           if (awTotal < 1e-12) continue;
@@ -342,7 +323,7 @@
 
           var totalArc = arcSource - arcInward;
           var numSeg = Math.max(20, Math.round(totalArc * 5));
-          var lineCoords = [];
+          var lineCoords = []; // [lat, lng] pairs
           for (var si = 0; si <= numSeg; si++) {
             var d = arcInward + (si / numSeg) * totalArc;
             if (d >= 0) {
@@ -354,22 +335,33 @@
           lineCoords = clipAtCoast(lineCoords);
           if (lineCoords.length < 2) continue;
 
-          var polyline = L.polyline(lineCoords, {
-            color: '#ff4444', weight: 2.5, opacity: 0.7, dashArray: '10, 8', interactive: false
-          }).addTo(map);
-          predictionLines.push(polyline);
-
+          // Main dashed line — convert [lat, lng] → [lng, lat] for GeoJSON
+          newFeatures.push({
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates: lineCoords.map(function(c) { return [c[1], c[0]]; })
+            },
+            properties: { kind: 'line' }
+          });
+
+          // Arrowhead
           var arrowSize = 0.08;
           var tipPt = lineCoords[lineCoords.length - 1];
           var px = -sourceDy, py = sourceDx;
-          var tip = [tipPt[0] + sourceDx * arrowSize, tipPt[1] + sourceDy * arrowSize];
-          var left = [tipPt[0] + px * arrowSize * 0.5, tipPt[1] + py * arrowSize * 0.5];
-          var right = [tipPt[0] - px * arrowSize * 0.5, tipPt[1] - py * arrowSize * 0.5];
-          var arrow = L.polyline([left, tip, right], {
-            color: '#ff4444', weight: 2.5, opacity: 0.7, interactive: false
-          }).addTo(map);
-          predictionLines.push(arrow);
-
+          var tip   = [tipPt[0] + sourceDx * arrowSize, tipPt[1] + sourceDy * arrowSize];
+          var left  = [tipPt[0] + px * arrowSize * 0.5,  tipPt[1] + py * arrowSize * 0.5];
+          var right = [tipPt[0] - px * arrowSize * 0.5,  tipPt[1] - py * arrowSize * 0.5];
+          newFeatures.push({
+            type: 'Feature',
+            geometry: {
+              type: 'LineString',
+              coordinates: [[left[1], left[0]], [tip[1], tip[0]], [right[1], right[0]]]
+            },
+            properties: { kind: 'arrow' }
+          });
+
+          // Uncertainty band
           var sigmaPerp = Math.sqrt(Math.max(0, line.lambda2) / line.totalWeight);
           var lambda1Safe = Math.max(line.lambda1, 1e-6);
           if (sigmaPerp > 0.001) {
@@ -379,17 +371,22 @@
               var pt = lineCoords[bi];
               var dMain = (pt[0] - cx) * sourceDx + (pt[1] - cy) * sourceDy;
               var w = sigmaPerp * Math.sqrt(1 + dMain * dMain / lambda1Safe);
-              bandLeft.push([pt[0] + perpDx * w, pt[1] + perpDy * w]);
-              bandRight.push([pt[0] - perpDx * w, pt[1] - perpDy * w]);
+              bandLeft.push([pt[1] + perpDy * w, pt[0] + perpDx * w]); // [lng, lat]
+              bandRight.push([pt[1] - perpDy * w, pt[0] - perpDx * w]);
             }
             bandRight.reverse();
-            var band = L.polygon(bandLeft.concat(bandRight), {
-              color: '#ff4444', fillColor: '#ff4444', fillOpacity: 0.1,
-              opacity: 0.2, weight: 1, interactive: false
-            }).addTo(map);
-            predictionLines.push(band);
+            var ring = bandLeft.concat(bandRight);
+            ring.push(ring[0]); // close GeoJSON ring
+            newFeatures.push({
+              type: 'Feature',
+              geometry: { type: 'Polygon', coordinates: [ring] },
+              properties: { kind: 'band' }
+            });
           }
         }
+
+        predictionFeatures = newFeatures;
+        updatePredictionSource();
       });
     }
 
@@ -420,6 +417,41 @@
       }
     }
 
+    // Add MapLibre source and layers for prediction overlays
+    function setupLayers() {
+      map.addSource('prediction-source', {
+        type: 'geojson',
+        data: { type: 'FeatureCollection', features: [] }
+      });
+      map.addLayer({
+        id: 'prediction-band',
+        type: 'fill',
+        source: 'prediction-source',
+        filter: ['==', ['get', 'kind'], 'band'],
+        paint: { 'fill-color': '#ff4444', 'fill-opacity': 0.1 }
+      });
+      map.addLayer({
+        id: 'prediction-line',
+        type: 'line',
+        source: 'prediction-source',
+        filter: ['==', ['get', 'kind'], 'line'],
+        paint: { 'line-color': '#ff4444', 'line-width': 2.5, 'line-opacity': 0.7, 'line-dasharray': [10, 8] }
+      });
+      map.addLayer({
+        id: 'prediction-arrow',
+        type: 'line',
+        source: 'prediction-source',
+        filter: ['==', ['get', 'kind'], 'arrow'],
+        paint: { 'line-color': '#ff4444', 'line-width': 2.5, 'line-opacity': 0.7 }
+      });
+    }
+
+    if (map.loaded()) {
+      setupLayers();
+    } else {
+      map.once('load', setupLayers);
+    }
+
     // Wire up menu toggle in #ext-menu
     var menuItem = document.getElementById('menu-predict');
     if (menuItem) {

From f5aea31a73e350a630d32748dbf74ddbfa5cf147 Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 14:41:27 +0300
Subject: [PATCH 02/10] Migrate ellipse-mode.js from Leaflet to MapLibre GL JS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace Leaflet layers/markers with maplibregl.Marker and GeoJSON sources
- Add 4 GeoJSON sources (ellipse-overlays, ellipse-visual, ellipse-editing, algc-overlay) via setupLayers()
- Replace map.distance() calls with haversineMeters() helper
- Replace CRS project/unproject with Web Mercator math
- Replace L.DomEvent.* with native event listeners
- Replace map interaction handlers (dragging/scrollWheelZoom/...) with MapLibre equivalents
- Replace getLocationPolygons with getFeatureMap (GeoJSON feature objects)
- Replace polygonRings() to work with GeoJSON coordinates instead of Leaflet getLatLngs()
- Add featureBbox() for bbox intersection check replacing getBounds().intersects()
- Delegate ensureOrefPoints to window.AppState
- Register dblclick handlers for cluster overlay (→ algC) and algC overlay (→ clear) via setupEventHandlers()
- Add openLocationPanel to AppState for pin click callbacks
---
 web/ellipse-mode.js | 647 ++++++++++++++++++++++++++++----------------
 web/index.html      |   3 +-
 2 files changed, 417 insertions(+), 233 deletions(-)

diff --git a/web/ellipse-mode.js b/web/ellipse-mode.js
index f90fba9..64123d1 100644
--- a/web/ellipse-mode.js
+++ b/web/ellipse-mode.js
@@ -5,7 +5,7 @@
   var map = null;
   var getLocationStates = function() { return {}; };
   var getLocationHistory = function() { return {}; };
-  var getLocationPolygons = function() { return {}; };
+  var getFeatureMap = function() { return {}; };
   var getCurrentUserPosition = function() { return null; };
   var getIsLiveMode = function() { return true; };
   var getCurrentViewTime = function() { return 0; };
@@ -14,8 +14,6 @@
   function createController() {
     var MIN_ELLIPSE_CLUSTER_SIZE = 20;
 
-    var orefPoints = null;
-    var orefPointsPromise = null;
     var ellipseMarkers = [];
     var ellipseOverlays = [];
     var ellipseVisualLayers = [];
@@ -38,6 +36,29 @@
     var editingSelectionState = null;
     var MIN_EDIT_SEMI_AXIS_METERS = 120;
 
+    function haversineMeters(lat1, lng1, lat2, lng2) {
+      var R = 6371008.8;
+      var dLat = (lat2 - lat1) * Math.PI / 180;
+      var dLng = (lng2 - lng1) * Math.PI / 180;
+      var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+        Math.sin(dLng / 2) * Math.sin(dLng / 2);
+      return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    }
+
+    function featureBbox(feat) {
+      var outer = feat.geometry.coordinates[0];
+      var minLng = Infinity, maxLng = -Infinity, minLat = Infinity, maxLat = -Infinity;
+      for (var ci = 0; ci < outer.length; ci++) {
+        var pt = outer[ci];
+        if (pt[0] < minLng) minLng = pt[0];
+        if (pt[0] > maxLng) maxLng = pt[0];
+        if (pt[1] < minLat) minLat = pt[1];
+        if (pt[1] > maxLat) maxLat = pt[1];
+      }
+      return { minLng: minLng, maxLng: maxLng, minLat: minLat, maxLat: maxLat };
+    }
+
     function getDisplayedRedAlerts() {
       var locationStates = getLocationStates();
       var locationHistory = getLocationHistory();
@@ -59,37 +80,25 @@
     }
 
     function ensureOrefPoints() {
-      if (orefPoints) return Promise.resolve(orefPoints);
-      if (orefPointsPromise) return orefPointsPromise;
-
-      orefPointsPromise = fetch('oref_points.json')
-        .then(function(resp) {
-          if (!resp.ok) throw new Error('HTTP ' + resp.status);
-          return resp.json();
-        })
-        .then(function(data) {
-          orefPoints = data || {};
-          return orefPoints;
-        })
-        .finally(function() {
-          orefPointsPromise = null;
-        });
-
-      return orefPointsPromise;
+      return window.AppState.ensureOrefPoints();
     }
 
     function clear() {
       for (var i = 0; i < ellipseMarkers.length; i++) {
-        map.removeLayer(ellipseMarkers[i]);
+        ellipseMarkers[i].remove();
       }
       ellipseMarkers = [];
-      for (var j = 0; j < ellipseOverlays.length; j++) {
-        map.removeLayer(ellipseOverlays[j]);
-      }
       ellipseOverlays = [];
+      var overlaySrc = map.getSource('ellipse-overlays');
+      if (overlaySrc) overlaySrc.setData({ type: 'FeatureCollection', features: [] });
       clearExtendedVisual();
     }
 
+    function flushOverlaySource() {
+      var src = map.getSource('ellipse-overlays');
+      if (src) src.setData({ type: 'FeatureCollection', features: ellipseOverlays });
+    }
+
     function formatPercent(ratio) {
       if (ratio === null || !Number.isFinite(ratio)) return 'N/A';
       return Math.round(ratio * 100) + '%';
@@ -117,28 +126,26 @@
       return mantissa + 'E' + exponentSign + exponentDigits;
     }
 
-    function escapeHtml(str) {
-      return String(str).replace(/[&<>"']/g, function(ch) {
-        return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[ch];
-      });
-    }
-
     function clearExtendedVisual() {
       for (var i = 0; i < ellipseVisualLayers.length; i++) {
-        map.removeLayer(ellipseVisualLayers[i]);
+        if (ellipseVisualLayers[i] && typeof ellipseVisualLayers[i].remove === 'function') {
+          ellipseVisualLayers[i].remove();
+        }
       }
       ellipseVisualLayers = [];
+      var src = map.getSource('ellipse-visual');
+      if (src) src.setData({ type: 'FeatureCollection', features: [] });
     }
 
     function clearEditingLayers() {
       for (var i = 0; i < editingLayers.length; i++) {
         if (editingLayers[i] && typeof editingLayers[i].remove === 'function') {
           editingLayers[i].remove();
-        } else {
-          map.removeLayer(editingLayers[i]);
         }
       }
       editingLayers = [];
+      var src = map.getSource('ellipse-editing');
+      if (src) src.setData({ type: 'FeatureCollection', features: [] });
     }
 
     function removeEditingControl() {
@@ -181,32 +188,29 @@
     function suspendMapInteractions() {
       if (!map || suspendedMapInteractions) return;
       suspendedMapInteractions = {
-        dragging: !!(map.dragging && map.dragging.enabled()),
-        touchZoom: !!(map.touchZoom && map.touchZoom.enabled()),
-        scrollWheelZoom: !!(map.scrollWheelZoom && map.scrollWheelZoom.enabled()),
-        doubleClickZoom: !!(map.doubleClickZoom && map.doubleClickZoom.enabled()),
-        boxZoom: !!(map.boxZoom && map.boxZoom.enabled()),
-        keyboard: !!(map.keyboard && map.keyboard.enabled()),
-        tap: !!(map.tap && map.tap.enabled && map.tap.enabled())
+        dragPan:         map.dragPan         && map.dragPan.isEnabled(),
+        scrollZoom:      map.scrollZoom      && map.scrollZoom.isEnabled(),
+        touchZoomRotate: map.touchZoomRotate && map.touchZoomRotate.isEnabled(),
+        doubleClickZoom: map.doubleClickZoom && map.doubleClickZoom.isEnabled(),
+        boxZoom:         map.boxZoom         && map.boxZoom.isEnabled(),
+        keyboard:        map.keyboard        && map.keyboard.isEnabled()
       };
-      if (suspendedMapInteractions.dragging && map.dragging) map.dragging.disable();
-      if (suspendedMapInteractions.touchZoom && map.touchZoom) map.touchZoom.disable();
-      if (suspendedMapInteractions.scrollWheelZoom && map.scrollWheelZoom) map.scrollWheelZoom.disable();
-      if (suspendedMapInteractions.doubleClickZoom && map.doubleClickZoom) map.doubleClickZoom.disable();
-      if (suspendedMapInteractions.boxZoom && map.boxZoom) map.boxZoom.disable();
-      if (suspendedMapInteractions.keyboard && map.keyboard) map.keyboard.disable();
-      if (suspendedMapInteractions.tap && map.tap) map.tap.disable();
+      if (suspendedMapInteractions.dragPan)         map.dragPan.disable();
+      if (suspendedMapInteractions.scrollZoom)      map.scrollZoom.disable();
+      if (suspendedMapInteractions.touchZoomRotate) map.touchZoomRotate.disable();
+      if (suspendedMapInteractions.doubleClickZoom) map.doubleClickZoom.disable();
+      if (suspendedMapInteractions.boxZoom)         map.boxZoom.disable();
+      if (suspendedMapInteractions.keyboard)        map.keyboard.disable();
     }
 
     function resumeMapInteractions() {
       if (!map || !suspendedMapInteractions) return;
-      if (suspendedMapInteractions.dragging && map.dragging) map.dragging.enable();
-      if (suspendedMapInteractions.touchZoom && map.touchZoom) map.touchZoom.enable();
-      if (suspendedMapInteractions.scrollWheelZoom && map.scrollWheelZoom) map.scrollWheelZoom.enable();
-      if (suspendedMapInteractions.doubleClickZoom && map.doubleClickZoom) map.doubleClickZoom.enable();
-      if (suspendedMapInteractions.boxZoom && map.boxZoom) map.boxZoom.enable();
-      if (suspendedMapInteractions.keyboard && map.keyboard) map.keyboard.enable();
-      if (suspendedMapInteractions.tap && map.tap) map.tap.enable();
+      if (suspendedMapInteractions.dragPan)         map.dragPan.enable();
+      if (suspendedMapInteractions.scrollZoom)      map.scrollZoom.enable();
+      if (suspendedMapInteractions.touchZoomRotate) map.touchZoomRotate.enable();
+      if (suspendedMapInteractions.doubleClickZoom) map.doubleClickZoom.enable();
+      if (suspendedMapInteractions.boxZoom)         map.boxZoom.enable();
+      if (suspendedMapInteractions.keyboard)        map.keyboard.enable();
       suspendedMapInteractions = null;
     }
 
@@ -214,40 +218,39 @@
       if (!cluster || !cluster.geometry || !userPos) return;
       clearExtendedVisual();
 
-      var centerLatLng = [cluster.geometry.center.lat, cluster.geometry.center.lng];
-      var userLatLng = [userPos.lat, userPos.lng];
-      var midLatLng = [
-        (centerLatLng[0] + userLatLng[0]) / 2,
-        (centerLatLng[1] + userLatLng[1]) / 2
-      ];
-
-      var centerMarker = L.circleMarker(centerLatLng, {
-        radius: 6,
-        color: '#1d4ed8',
-        weight: 2,
-        fillColor: '#ffffff',
-        fillOpacity: 1
-      }).addTo(map);
+      var centerLat = cluster.geometry.center.lat;
+      var centerLng = cluster.geometry.center.lng;
+      var userLat = userPos.lat;
+      var userLng = userPos.lng;
+      var midLat = (centerLat + userLat) / 2;
+      var midLng = (centerLng + userLng) / 2;
 
-      var connectionLine = L.polyline([centerLatLng, userLatLng], {
-        color: '#1d4ed8',
-        weight: 2,
-        opacity: 0.9,
-        dashArray: '6 6'
-      }).addTo(map);
-
-      var ratioLabel = L.marker(midLatLng, {
-        interactive: false,
-        icon: L.divIcon({
-          className: '',
-          html: '<div style="background:rgba(255,255,255,0.96);border:1px solid #93c5fd;border-radius:12px;padding:4px 8px;color:#1d4ed8;font:12px Arial,sans-serif;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.15);">' +
-            escapeHtml(formatPercent(cluster.normalizedDistanceRatio)) + '</div>',
-          iconSize: null
-        })
-      }).addTo(map);
+      var features = [
+        {
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: [centerLng, centerLat] },
+          properties: { kind: 'center' }
+        },
+        {
+          type: 'Feature',
+          geometry: {
+            type: 'LineString',
+            coordinates: [[centerLng, centerLat], [userLng, userLat]]
+          },
+          properties: { kind: 'line' }
+        }
+      ];
+      var src = map.getSource('ellipse-visual');
+      if (src) src.setData({ type: 'FeatureCollection', features: features });
 
-      ellipseVisualLayers.push(centerMarker, connectionLine, ratioLabel);
+      var labelEl = document.createElement('div');
+      labelEl.style.cssText = 'background:rgba(255,255,255,0.96);border:1px solid #93c5fd;border-radius:12px;padding:4px 8px;color:#1d4ed8;font:12px Arial,sans-serif;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,0.15);pointer-events:none;';
+      labelEl.textContent = formatPercent(cluster.normalizedDistanceRatio);
+      var ratioMarker = new maplibregl.Marker({ element: labelEl, anchor: 'center' })
+        .setLngLat([midLng, midLat])
+        .addTo(map);
 
+      ellipseVisualLayers.push(ratioMarker);
     }
 
     function isClusterEligibleForExtendedVisual(cluster) {
@@ -358,12 +361,16 @@
     }
 
     function projectEllipsePoint(point) {
-      var projected = map.options.crs.project(L.latLng(point.lat, point.lng));
-      return { x: projected.x, y: projected.y, lat: point.lat, lng: point.lng };
+      var x = point.lng * 20037508.34 / 180;
+      var y = Math.log(Math.tan((90 + point.lat) * Math.PI / 360)) / (Math.PI / 180) * 20037508.34 / 180;
+      return { x: x, y: y, lat: point.lat, lng: point.lng };
     }
 
     function unprojectEllipsePoint(point) {
-      return map.options.crs.unproject(L.point(point.x, point.y));
+      return {
+        lng: point.x * 180 / 20037508.34,
+        lat: Math.atan(Math.exp(point.y * Math.PI / 20037508.34)) * 360 / Math.PI - 90
+      };
     }
 
     function normalizeVector(vector, fallback) {
@@ -409,9 +416,9 @@
         y: geometry.centerProjected.y + direction.y * boundaryScale
       };
       var boundaryLatLng = unprojectEllipsePoint(boundaryPoint);
-      return map.distance(
-        [geometry.center.lat, geometry.center.lng],
-        [boundaryLatLng.lat, boundaryLatLng.lng]
+      return haversineMeters(
+        geometry.center.lat, geometry.center.lng,
+        boundaryLatLng.lat, boundaryLatLng.lng
       );
     }
 
@@ -564,44 +571,51 @@
       return ellipseOverridesByClusterKey[summary.clusterKey] || summary.sourceGeometry;
     }
 
-    function addGeometryOverlay(geometry, style, popupHtml) {
-      if (!geometry) return null;
-
-      var overlay;
+    function buildGeometryGeoJsonFeature(geometry, style) {
+      var coords;
       if (geometry.type === 'circle') {
-        overlay = L.circle([geometry.center.lat, geometry.center.lng], {
-          radius: geometry.radiusMeters,
-          color: style.color,
-          weight: style.weight,
-          opacity: style.opacity,
-          fillColor: style.fillColor,
-          fillOpacity: style.fillOpacity,
-          dashArray: style.dashArray || null
-        });
+        var ring = [];
+        var cp = projectEllipsePoint(geometry.center);
+        for (var i = 0; i < 72; i++) {
+          var theta = (Math.PI * 2 * i) / 72;
+          var x = cp.x + Math.cos(theta) * geometry.radiusMeters;
+          var y = cp.y + Math.sin(theta) * geometry.radiusMeters;
+          var ll = unprojectEllipsePoint({ x: x, y: y });
+          ring.push([ll.lng, ll.lat]);
+        }
+        ring.push(ring[0]);
+        coords = [ring];
       } else {
-        overlay = L.polygon(buildEllipseLatLngs(geometry), {
-          color: style.color,
-          weight: style.weight,
-          opacity: style.opacity,
+        var pts = buildEllipseLatLngs(geometry);
+        var poly = pts.map(function(ll) { return [ll.lng, ll.lat]; });
+        poly.push(poly[0]);
+        coords = [poly];
+      }
+      return {
+        type: 'Feature',
+        geometry: { type: 'Polygon', coordinates: coords },
+        properties: {
+          strokeColor: style.color,
+          strokeWidth: style.weight,
+          strokeOpacity: style.opacity,
           fillColor: style.fillColor,
           fillOpacity: style.fillOpacity,
           dashArray: style.dashArray || null
-        });
-      }
+        }
+      };
+    }
 
-      if (popupHtml) {
-        overlay.bindPopup(popupHtml, { maxWidth: 260 });
-      }
-      overlay.addTo(map);
-      return overlay;
+    function addGeometryOverlay(geometry, style) {
+      if (!geometry) return null;
+      return buildGeometryGeoJsonFeature(geometry, style);
     }
 
     function geometryContainsLatLng(geometry, latlng) {
       if (!geometry || !latlng) return false;
       if (geometry.type === 'circle') {
-        return map.distance(
-          [geometry.center.lat, geometry.center.lng],
-          [latlng.lat, latlng.lng]
+        return haversineMeters(
+          geometry.center.lat, geometry.center.lng,
+          latlng.lat, latlng.lng
         ) <= geometry.radiusMeters;
       }
 
@@ -619,9 +633,9 @@
     function getGeometryPositionMetrics(geometry, latlng) {
       if (!geometry || !latlng) return null;
       if (geometry.type === 'circle') {
-        var distanceMeters = map.distance(
-          [geometry.center.lat, geometry.center.lng],
-          [latlng.lat, latlng.lng]
+        var distanceMeters = haversineMeters(
+          geometry.center.lat, geometry.center.lng,
+          latlng.lat, latlng.lng
         );
         return {
           centerDistanceMeters: distanceMeters,
@@ -640,9 +654,9 @@
       );
 
       return {
-        centerDistanceMeters: map.distance(
-          [geometry.center.lat, geometry.center.lng],
-          [latlng.lat, latlng.lng]
+        centerDistanceMeters: haversineMeters(
+          geometry.center.lat, geometry.center.lng,
+          latlng.lat, latlng.lng
         ),
         normalizedDistanceRatio: normalizedDistanceRatio
       };
@@ -661,31 +675,26 @@
     function addClusterGeometryOverlay(geometry, summary) {
       if (!geometry) return null;
 
-      var overlay = addGeometryOverlay(geometry, {
+      var feature = addGeometryOverlay(geometry, {
         color: '#951111',
         weight: 2,
         opacity: 0.95,
         fillColor: '#951111',
         fillOpacity: 0.08
       });
-      if (overlay && summary && Array.isArray(summary.locations) && summary.locations.length) {
-        overlay.on('dblclick', function(event) {
-          L.DomEvent.stop(event);
-          window.calcEllipseAlgC({ locations: summary.locations }).catch(function(error) {
-            console.error(error);
-            showToast('Failed to calculate server ellipse');
-          });
-        });
+      if (feature && summary && Array.isArray(summary.locations) && summary.locations.length) {
+        feature.properties.clusterKey = summary.clusterKey || '';
+        feature.properties.locations = summary.locations.join('||');
       }
-      if (overlay) ellipseOverlays.push(overlay);
-      return overlay;
+      if (feature) ellipseOverlays.push(feature);
+      return feature;
     }
 
-    function polygonRings(polygon) {
-      var latlngs = polygon.getLatLngs();
-      if (!latlngs || !latlngs.length) return [];
-      if (Array.isArray(latlngs[0])) return latlngs;
-      return [latlngs];
+    function polygonRings(feature) {
+      if (!feature || !feature.geometry || !feature.geometry.coordinates) return [];
+      return feature.geometry.coordinates.map(function(ring) {
+        return ring.map(function(c) { return { lat: c[1], lng: c[0] }; });
+      });
     }
 
     function latLngsAlmostEqual(a, b) {
@@ -745,14 +754,17 @@
         return polygonTouchCache[cacheKey];
       }
 
-      var locationPolygons = getLocationPolygons();
-      var polyA = locationPolygons[nameA];
-      var polyB = locationPolygons[nameB];
+      var featureMap = getFeatureMap();
+      var polyA = featureMap[nameA];
+      var polyB = featureMap[nameB];
       if (!polyA || !polyB) {
         polygonTouchCache[cacheKey] = false;
         return false;
       }
-      if (!polyA.getBounds().intersects(polyB.getBounds())) {
+      var bboxA = featureBbox(polyA);
+      var bboxB = featureBbox(polyB);
+      if (bboxA.maxLng < bboxB.minLng || bboxB.maxLng < bboxA.minLng ||
+          bboxA.maxLat < bboxB.minLat || bboxB.maxLat < bboxA.minLat) {
         polygonTouchCache[cacheKey] = false;
         return false;
       }
@@ -915,19 +927,10 @@
     function drawEllipseOverlays(redAlerts, pointsMap) {
       clear();
 
-      var alertDateByLocation = {};
-      for (var a = 0; a < redAlerts.length; a++) {
-        alertDateByLocation[redAlerts[a].location] = redAlerts[a].alertDate || '';
-      }
       var missing = [];
       var summaries = buildBaseClusterGeometrySummaries(redAlerts, pointsMap);
       var renderedClusterCount = 0;
-      var icon = L.divIcon({
-        className: 'ellipse-pin',
-        html: '<div style="width:9px;height:9px;background:transparent;border:1px solid #fff;border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,0.4);box-sizing:border-box;"></div>',
-        iconSize: [16, 16],
-        iconAnchor: [8, 8]
-      });
+      var pinHtml = '<div style="width:9px;height:9px;background:transparent;border:1px solid #fff;border-radius:50%;box-shadow:0 1px 6px rgba(0,0,0,0.4);box-sizing:border-box;"></div>';
 
       for (var c = 0; c < summaries.length; c++) {
         var summary = summaries[c];
@@ -939,12 +942,22 @@
             continue;
           }
 
-          var marker = L.marker([point[0], point[1]], {
-            icon: icon,
-            keyboard: false
-          });
-          marker.bindPopup(location + (alertDateByLocation[location] ? '<br>' + alertDateByLocation[location] : ''));
-          marker.addTo(map);
+          var pinEl = document.createElement('div');
+          pinEl.className = 'ellipse-pin';
+          pinEl.innerHTML = pinHtml;
+          pinEl.style.cursor = 'pointer';
+          pinEl.addEventListener('click', (function(loc) {
+            return function(event) {
+              event.stopPropagation();
+              if (window.AppState && typeof window.AppState.openLocationPanel === 'function') {
+                window.AppState.openLocationPanel(loc);
+              }
+            };
+          })(location));
+
+          var marker = new maplibregl.Marker({ element: pinEl, anchor: 'center' })
+            .setLngLat([point[1], point[0]])
+            .addTo(map);
           ellipseMarkers.push(marker);
         }
         if (!getEffectiveGeometry(summary)) {
@@ -956,6 +969,7 @@
         }
         addClusterGeometryOverlay(getEffectiveGeometry(summary), summary);
       }
+      flushOverlaySource();
       return { missing: missing, clusterCount: renderedClusterCount };
     }
 
@@ -974,9 +988,9 @@
           for (var i = 0; i < summary.locations.length; i++) {
             var point = pointsMap[summary.locations[i]];
             if (!point || point.length < 2) continue;
-            var distanceMeters = map.distance(
-              [userLatLng.lat, userLatLng.lng],
-              [point[0], point[1]]
+            var distanceMeters = haversineMeters(
+              userLatLng.lat, userLatLng.lng,
+              point[0], point[1]
             );
             if (distanceMeters < minDistanceMeters) minDistanceMeters = distanceMeters;
           }
@@ -1106,8 +1120,18 @@
 
       var geometry = editingSession.draftGeometry;
       if (editingSession.overlay) {
-        editingSession.overlay.setLatLngs(buildEllipseLatLngs(geometry));
-        if (editingSession.overlay.redraw) editingSession.overlay.redraw();
+        var lls = buildEllipseLatLngs(geometry);
+        var coords = lls.map(function(ll) { return [ll.lng, ll.lat]; });
+        coords.push(coords[0]);
+        var editingSrc = map.getSource('ellipse-editing');
+        if (editingSrc) editingSrc.setData({
+          type: 'FeatureCollection',
+          features: [{
+            type: 'Feature',
+            geometry: { type: 'Polygon', coordinates: [coords] },
+            properties: {}
+          }]
+        });
       }
       if (editingSession.centerMarker && activeAnchorName !== 'center') {
         editingSession.centerMarker.setLatLng([geometry.center.lat, geometry.center.lng]);
@@ -1165,21 +1189,15 @@
     }
 
     function createEditAnchorIcon(fillColor, borderColor, size) {
-      return L.divIcon({
-        className: '',
-        html:
-          '<div style="' +
-          'width:' + size + 'px;' +
-          'height:' + size + 'px;' +
-          'border-radius:50%;' +
-          'background:' + fillColor + ';' +
-          'border:2px solid ' + borderColor + ';' +
-          'box-shadow:0 1px 6px rgba(0,0,0,0.25);' +
-          'box-sizing:border-box;' +
-          '"></div>',
-        iconSize: [size, size],
-        iconAnchor: [size / 2, size / 2]
-      });
+      return '<div style="' +
+        'width:' + size + 'px;' +
+        'height:' + size + 'px;' +
+        'border-radius:50%;' +
+        'background:' + fillColor + ';' +
+        'border:2px solid ' + borderColor + ';' +
+        'box-shadow:0 1px 6px rgba(0,0,0,0.25);' +
+        'box-sizing:border-box;' +
+        '"></div>';
     }
 
     function normalizeHandleLatLng(latlng) {
@@ -1209,7 +1227,7 @@
           var normalized = normalizeHandleLatLng(nextLatLng);
           if (!normalized) return;
           this._latlng = normalized;
-          var point = map.latLngToContainerPoint([normalized.lat, normalized.lng]);
+          var point = map.project([normalized.lng, normalized.lat]);
           element.style.left = point.x + 'px';
           element.style.top = point.y + 'px';
           element.style.transform = 'translate(-50%, -50%)';
@@ -1219,7 +1237,9 @@
         },
         remove: function() {
           endActiveHandleDrag();
-          map.off('zoom move resize', syncPosition);
+          map.off('zoom', syncPosition);
+          map.off('move', syncPosition);
+          map.off('resize', syncPosition);
           element.removeEventListener('mousedown', beginHandleDrag, true);
           element.removeEventListener('touchstart', beginHandleDrag, true);
           if (element.parentNode) element.parentNode.removeChild(element);
@@ -1229,8 +1249,9 @@
       function pointEventToLatLng(event) {
         var source = event.touches && event.touches.length ? event.touches[0] : event;
         var rect = mapContainer.getBoundingClientRect();
-        var point = L.point(source.clientX - rect.left, source.clientY - rect.top);
-        return map.containerPointToLatLng(point);
+        var px = source.clientX - rect.left;
+        var py = source.clientY - rect.top;
+        return map.unproject([px, py]);
       }
 
       function syncPosition() {
@@ -1274,11 +1295,13 @@
         event.stopPropagation();
       }
 
-      L.DomEvent.disableClickPropagation(element);
-      L.DomEvent.disableScrollPropagation(element);
+      element.addEventListener('click', function(e) { e.stopPropagation(); });
+      element.addEventListener('wheel', function(e) { e.stopPropagation(); });
       element.addEventListener('mousedown', beginHandleDrag, true);
       element.addEventListener('touchstart', beginHandleDrag, { capture: true, passive: false });
-      map.on('zoom move resize', syncPosition);
+      map.on('zoom', syncPosition);
+      map.on('move', syncPosition);
+      map.on('resize', syncPosition);
       syncPosition();
       return handle;
     }
@@ -1286,7 +1309,7 @@
     function createEditingMarker(latlng, icon, onDrag) {
       var marker = createEditableHandle(
         latlng,
-        icon && icon.options && icon.options.html ? icon.options.html : '',
+        typeof icon === 'string' ? icon : (icon && icon.options && icon.options.html ? icon.options.html : ''),
         onDrag
       );
       editingLayers.push(marker);
@@ -1356,8 +1379,8 @@
         sync(true);
       });
 
-      L.DomEvent.disableClickPropagation(control);
-      L.DomEvent.disableScrollPropagation(control);
+      control.addEventListener('click', function(e) { e.stopPropagation(); });
+      control.addEventListener('wheel', function(e) { e.stopPropagation(); });
       map.getContainer().appendChild(control);
       editingControl = control;
     }
@@ -1368,15 +1391,20 @@
 
       if (!editingSession || !editingSession.draftGeometry || editingSession.draftGeometry.type !== 'ellipse') return;
 
-      editingSession.overlay = addGeometryOverlay(editingSession.draftGeometry, {
-        color: '#1d4ed8',
-        weight: 2,
-        opacity: 1,
-        fillColor: '#93c5fd',
-        fillOpacity: 0.08,
-        dashArray: '8 6'
+      var geometry = editingSession.draftGeometry;
+      var lls = buildEllipseLatLngs(geometry);
+      var coords = lls.map(function(ll) { return [ll.lng, ll.lat]; });
+      coords.push(coords[0]);
+      var editingSrc = map.getSource('ellipse-editing');
+      if (editingSrc) editingSrc.setData({
+        type: 'FeatureCollection',
+        features: [{
+          type: 'Feature',
+          geometry: { type: 'Polygon', coordinates: [coords] },
+          properties: {}
+        }]
       });
-      if (editingSession.overlay) editingLayers.push(editingSession.overlay);
+      editingSession.overlay = true; // sentinel for syncEditingMarkersFromDraft
 
       editingSession.centerMarker = createEditingMarker(
         editingSession.draftGeometry.center,
@@ -1680,7 +1708,7 @@
     map = AS.map;
     getLocationStates      = function() { return AS.locationStates; };
     getLocationHistory     = function() { return AS.locationHistory; };
-    getLocationPolygons    = function() { return AS.locationPolygons; };
+    getFeatureMap          = function() { return AS.featureMap; };
     getCurrentUserPosition = function() { return AS.userPosition; };
     getIsLiveMode          = function() { return AS.isLiveMode; };
     getCurrentViewTime     = function() { return AS.viewTime; };
@@ -1688,6 +1716,141 @@
 
     var controller = createController();
 
+    function setupLayers() {
+      if (!map.getSource('ellipse-overlays')) {
+        map.addSource('ellipse-overlays', {
+          type: 'geojson',
+          data: { type: 'FeatureCollection', features: [] }
+        });
+        map.addLayer({
+          id: 'ellipse-overlays-fill',
+          type: 'fill',
+          source: 'ellipse-overlays',
+          paint: {
+            'fill-color': ['coalesce', ['get', 'fillColor'], '#951111'],
+            'fill-opacity': ['coalesce', ['get', 'fillOpacity'], 0.08]
+          }
+        });
+        map.addLayer({
+          id: 'ellipse-overlays-stroke',
+          type: 'line',
+          source: 'ellipse-overlays',
+          paint: {
+            'line-color': ['coalesce', ['get', 'strokeColor'], '#951111'],
+            'line-width': ['coalesce', ['get', 'strokeWidth'], 2],
+            'line-opacity': ['coalesce', ['get', 'strokeOpacity'], 0.95]
+          }
+        });
+      }
+
+      if (!map.getSource('ellipse-visual')) {
+        map.addSource('ellipse-visual', {
+          type: 'geojson',
+          data: { type: 'FeatureCollection', features: [] }
+        });
+        map.addLayer({
+          id: 'ellipse-visual-line',
+          type: 'line',
+          source: 'ellipse-visual',
+          filter: ['==', ['get', 'kind'], 'line'],
+          paint: {
+            'line-color': '#1d4ed8',
+            'line-width': 2,
+            'line-opacity': 0.9,
+            'line-dasharray': [3, 3]
+          }
+        });
+        map.addLayer({
+          id: 'ellipse-visual-circle',
+          type: 'circle',
+          source: 'ellipse-visual',
+          filter: ['==', ['get', 'kind'], 'center'],
+          paint: {
+            'circle-radius': 6,
+            'circle-color': '#ffffff',
+            'circle-stroke-color': '#1d4ed8',
+            'circle-stroke-width': 2
+          }
+        });
+      }
+
+      if (!map.getSource('ellipse-editing')) {
+        map.addSource('ellipse-editing', {
+          type: 'geojson',
+          data: { type: 'FeatureCollection', features: [] }
+        });
+        map.addLayer({
+          id: 'ellipse-editing-fill',
+          type: 'fill',
+          source: 'ellipse-editing',
+          paint: { 'fill-color': '#93c5fd', 'fill-opacity': 0.08 }
+        });
+        map.addLayer({
+          id: 'ellipse-editing-stroke',
+          type: 'line',
+          source: 'ellipse-editing',
+          paint: {
+            'line-color': '#1d4ed8',
+            'line-width': 2,
+            'line-opacity': 1,
+            'line-dasharray': [4, 3]
+          }
+        });
+      }
+
+      if (!map.getSource('algc-overlay')) {
+        map.addSource('algc-overlay', {
+          type: 'geojson',
+          data: { type: 'FeatureCollection', features: [] }
+        });
+        map.addLayer({
+          id: 'algc-overlay-fill',
+          type: 'fill',
+          source: 'algc-overlay',
+          paint: { 'fill-color': '#60a5fa', 'fill-opacity': 0.12 }
+        });
+        map.addLayer({
+          id: 'algc-overlay-stroke',
+          type: 'line',
+          source: 'algc-overlay',
+          paint: {
+            'line-color': '#1d4ed8',
+            'line-width': 2,
+            'line-opacity': 0.95
+          }
+        });
+      }
+    }
+
+    function setupEventHandlers() {
+      map.on('dblclick', 'ellipse-overlays-fill', function(event) {
+        if (!event.features || !event.features.length) return;
+        event.preventDefault();
+        var props = event.features[0].properties || {};
+        var locations = props.locations ? String(props.locations).split('||') : [];
+        if (!locations.length) return;
+        window.calcEllipseAlgC({ locations: locations }).catch(function(error) {
+          console.error(error);
+          showToast('Failed to calculate server ellipse');
+        });
+      });
+
+      map.on('dblclick', 'algc-overlay-fill', function(event) {
+        event.preventDefault();
+        clearAlgCServiceOverlay();
+      });
+    }
+
+    if (map.loaded()) {
+      setupLayers();
+      setupEventHandlers();
+    } else {
+      map.once('load', function() {
+        setupLayers();
+        setupEventHandlers();
+      });
+    }
+
     // Restore persisted enabled state
     var ellipseEnabled = false;
     try { ellipseEnabled = Number(localStorage.getItem('oref-ellipse-mode')) > 0; } catch (e) {}
@@ -1706,7 +1869,11 @@
 
     function clearAlgCServiceOverlay() {
       if (!algCOverlayLayer) return;
-      map.removeLayer(algCOverlayLayer);
+      if (algCOverlayLayer.marker && typeof algCOverlayLayer.marker.remove === 'function') {
+        algCOverlayLayer.marker.remove();
+      }
+      var algcSrc = map.getSource('algc-overlay');
+      if (algcSrc) algcSrc.setData({ type: 'FeatureCollection', features: [] });
       algCOverlayLayer = null;
     }
 
@@ -1716,20 +1883,33 @@
       return { x: vector.x / length, y: vector.y / length };
     }
 
+    function projectEllipseInitPoint(point) {
+      var x = point.lng * 20037508.34 / 180;
+      var y = Math.log(Math.tan((90 + point.lat) * Math.PI / 360)) / (Math.PI / 180) * 20037508.34 / 180;
+      return { x: x, y: y };
+    }
+
+    function unprojectEllipseInitPoint(point) {
+      return {
+        lng: point.x * 180 / 20037508.34,
+        lat: Math.atan(Math.exp(point.y * Math.PI / 20037508.34)) * 360 / Math.PI - 90
+      };
+    }
+
     function buildAlgCServiceRenderable(ellipse) {
       if (!ellipse || !ellipse.center || !ellipse.axes) {
         throw new Error('calcEllipseAlgC: server response is missing ellipse geometry');
       }
 
-      var center = L.latLng(ellipse.center.lat, ellipse.center.lng);
-      var centerProjected = map.options.crs.project(center);
+      var center = { lat: ellipse.center.lat, lng: ellipse.center.lng };
+      var centerProjected = projectEllipseInitPoint(center);
       var angleRad = ((Number(ellipse.angle_deg) || 0) * Math.PI) / 180;
       var sampleDeltaDegrees = 0.01;
-      var sampleLatLng = L.latLng(
-        center.lat + Math.sin(angleRad) * sampleDeltaDegrees,
-        center.lng + Math.cos(angleRad) * sampleDeltaDegrees
-      );
-      var sampleProjected = map.options.crs.project(sampleLatLng);
+      var samplePoint = {
+        lat: center.lat + Math.sin(angleRad) * sampleDeltaDegrees,
+        lng: center.lng + Math.cos(angleRad) * sampleDeltaDegrees
+      };
+      var sampleProjected = projectEllipseInitPoint(samplePoint);
       var majorAxis = normalizeProjectedVector({
         x: sampleProjected.x - centerProjected.x,
         y: sampleProjected.y - centerProjected.y
@@ -1762,7 +1942,7 @@
         var y = renderable.centerProjected.y +
           renderable.majorAxis.y * Math.cos(theta) * renderable.semiMajor +
           renderable.minorAxis.y * Math.sin(theta) * renderable.semiMinor;
-        latlngs.push(map.options.crs.unproject(L.point(x, y)));
+        latlngs.push(unprojectEllipseInitPoint({ x: x, y: y }));
       }
       return latlngs;
     }
@@ -1770,37 +1950,40 @@
     function drawAlgCServiceOverlay(renderable, payload, options) {
       clearAlgCServiceOverlay();
 
-      var layerGroup = L.layerGroup();
       var latlngs = buildAlgCServiceLatLngs(renderable);
-      var polygon = L.polygon(latlngs, {
-        color: '#1d4ed8',
-        weight: 2,
-        opacity: 0.95,
-        fillColor: '#60a5fa',
-        fillOpacity: 0.12
-      }).addTo(layerGroup);
+      var coords = latlngs.map(function(ll) { return [ll.lng, ll.lat]; });
+      coords.push(coords[0]);
 
-      var centerMarker = L.circleMarker([renderable.center.lat, renderable.center.lng], {
-        radius: 5,
-        color: '#1d4ed8',
-        weight: 2,
-        fillColor: '#ffffff',
-        fillOpacity: 1
-      }).addTo(layerGroup);
+      var features = [{
+        type: 'Feature',
+        geometry: { type: 'Polygon', coordinates: [coords] },
+        properties: {}
+      }];
 
-      function removeOnDoubleClick(event) {
-        if (event) L.DomEvent.stop(event);
-        clearAlgCServiceOverlay();
-      }
+      var algcSrc = map.getSource('algc-overlay');
+      if (algcSrc) algcSrc.setData({ type: 'FeatureCollection', features: features });
 
-      polygon.on('dblclick', removeOnDoubleClick);
-      centerMarker.on('dblclick', removeOnDoubleClick);
+      var dotEl = document.createElement('div');
+      dotEl.style.cssText = 'width:10px;height:10px;border-radius:50%;background:#ffffff;border:2px solid #1d4ed8;box-shadow:0 1px 4px rgba(0,0,0,0.3);box-sizing:border-box;cursor:pointer;';
+      dotEl.addEventListener('dblclick', function(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        clearAlgCServiceOverlay();
+      });
+      var centerMarker = new maplibregl.Marker({ element: dotEl, anchor: 'center' })
+        .setLngLat([renderable.center.lng, renderable.center.lat])
+        .addTo(map);
 
-      layerGroup.addTo(map);
-      algCOverlayLayer = layerGroup;
+      algCOverlayLayer = { marker: centerMarker };
 
       if (options.fitBounds !== false) {
-        map.fitBounds(L.latLngBounds(latlngs).pad(0.08));
+        var bounds = new maplibregl.LngLatBounds();
+        for (var i = 0; i < latlngs.length; i++) {
+          bounds.extend([latlngs[i].lng, latlngs[i].lat]);
+        }
+        if (!bounds.isEmpty()) {
+          map.fitBounds(bounds, { padding: 60 });
+        }
       }
 
       if (options.log !== false) {
diff --git a/web/index.html b/web/index.html
index b9b4247..73095bf 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1920,7 +1920,8 @@ <h2>אודות מפת העורף</h2>
     get userPosition() { return currentUserLatLng || null; },
     get isLiveMode() { return isLiveMode; },
     get viewTime() { return currentViewTime; },
-    showToast: function(msg, opts) { showToast(msg, opts); }
+    showToast: function(msg, opts) { showToast(msg, opts); },
+    openLocationPanel: function(name) { openLocationPanel(name); }
   };
 
   // --- Colors ---

From 3ab337eed94707025bc863b28c9fa0bbbf86f2af Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 14:56:18 +0300
Subject: [PATCH 03/10] Update docs and maxBounds for MapLibre migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update architecture.md: replace Leaflet/Voronoi/d3-delaunay references with MapLibre GL JS + PMTiles + pre-computed GeoJSON polygons
- Update CLAUDE.md project description
- Update ellipse-feature.md: locationPolygons → featureMap (GeoJSON), Web Mercator projection note
- Update ellipse-alg-C.md: remove Leaflet geometry reference
- Extend maxBounds south to lat 11.0 (was 24.0) to cover Yemen
---
 CLAUDE.md               |  2 +-
 docs/architecture.md    | 14 +++++++-------
 docs/ellipse-alg-C.md   |  2 +-
 docs/ellipse-feature.md |  4 ++--
 web/index.html          |  2 +-
 5 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 0d9340a..e9292e1 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,7 +4,7 @@ This file provides guidance to Claude Code when working with code in this reposi
 
 ## Project
 
-`oref-map` is a live alert map of Israel ("מפת העורף") showing colored Voronoi area polygons for alert statuses per location. It uses Leaflet + OpenStreetMap + d3-delaunay + polygon-clipping. Static assets on Cloudflare Pages; API proxy uses a two-tier architecture: Pages Functions serve TLV users directly, non-TLV users are redirected to a placement-pinned Worker.
+`oref-map` is a live alert map of Israel ("מפת העורף") showing colored area polygons for alert statuses per location. It uses MapLibre GL JS + self-hosted PMTiles (Protomaps, Cloudflare R2). Polygons are pre-computed GeoJSON (`locations_polygons.json`). Static assets on Cloudflare Pages; API proxy uses a two-tier architecture: Pages Functions serve TLV users directly, non-TLV users are redirected to a placement-pinned Worker.
 
 **Public URL**: https://oref-map.org
 
diff --git a/docs/architecture.md b/docs/architecture.md
index c1e605c..490e12d 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -10,8 +10,8 @@ hour and last 24 hours. The client polls this endpoint once per minute.
 
 ## Stack
 
-- **Map**: Leaflet.js (v1.9.4) + OpenStreetMap tiles
-- **Voronoi**: d3-delaunay (v6) for polygon computation, polygon-clipping (v0.15) for clipping to Israel border
+- **Map**: MapLibre GL JS + PMTiles (self-hosted Middle East extract on Cloudflare R2, Protomaps basemap with Hebrew labels)
+- **Polygons**: Pre-computed GeoJSON in `web/locations_polygons.json` loaded at startup into a MapLibre `alerts-source`
 - **API proxy (tier 1)**: Cloudflare Pages Functions (`functions/api/`) — serves TLV users directly, redirects others
 - **API proxy (tier 2)**: Cloudflare Worker (`worker/`) with placement `region = "azure:israelcentral"` — fallback for non-TLV users
 - **History storage**: Cloudflare R2 bucket (`oref-history`) with per-day JSONL files
@@ -115,13 +115,13 @@ Unknown titles default to red and log a console warning.
 
 ## Map Rendering
 
-### Voronoi Polygons
+### Polygons
 
-All ~1,430 location coordinates from `cities_geo.json` are tessellated at startup using d3-delaunay into Voronoi cells. Cells are clipped to Israel's border polygon using polygon-clipping. Each location owns one polygon cell.
+Location polygons are pre-computed offline and shipped as `web/locations_polygons.json`. On startup the page fetches this file and loads all ~1,450 features into the MapLibre `alerts-source` GeoJSON source. Each feature's `fillColor`, `fillOpacity`, `lineColor`, and `lineOpacity` properties are updated in place via `setData()` whenever alert state changes — no layer recreation needed.
 
-- Computed once at startup, not on every alert update.
-- Only fill color and opacity change per alert event.
 - Adjacent polygons of the same color visually merge into contiguous threat zones (shared borders become invisible due to matching stroke color).
+- Per-feature state is driven by data properties, not Leaflet `setStyle`.
+- The `featureMap` lookup (`name → GeoJSON Feature`) is exposed on `AppState` for use by extensions (e.g. ellipse mode).
 
 ### Geocoding
 
@@ -137,7 +137,7 @@ All ~1,430 location coordinates from `cities_geo.json` are tessellated at startu
 - **Legend**: Bottom-right — color key
 - **Timeline panel**: Bottom-center — date navigation + slider to scrub through any day's history
 - **About modal**: Triggered by ⓘ button or title click. Closes on backdrop click or Escape.
-- **Popups**: Click a polygon to see alert history for that location (newest first).
+- **Location panel**: Click a polygon to open a slide-in panel with alert history for that location (bottom-sheet on mobile, sidebar on desktop).
 
 All overlays use `position: fixed`, `z-index: 1000`, semi-transparent white backgrounds with `border-radius` and `box-shadow`. RTL layout throughout.
 
diff --git a/docs/ellipse-alg-C.md b/docs/ellipse-alg-C.md
index 7edc5ec..cc56c58 100644
--- a/docs/ellipse-alg-C.md
+++ b/docs/ellipse-alg-C.md
@@ -74,7 +74,7 @@ On success the server returns:
 }
 ```
 
-The browser converts that response into a renderable Leaflet geometry in [`buildAlgCServiceRenderable(...)`](/home/tomer/projects/oref-map/web/ellipse-mode.js#L1710).
+The browser converts that response into a renderable geometry in `buildAlgCServiceRenderable()` in `web/ellipse-mode.js`, using inline Web Mercator projection math (no Leaflet dependency). The result is pushed to the `algc-overlay` MapLibre GeoJSON source.
 
 ### Error responses
 
diff --git a/docs/ellipse-feature.md b/docs/ellipse-feature.md
index f90852a..6c2bdd3 100644
--- a/docs/ellipse-feature.md
+++ b/docs/ellipse-feature.md
@@ -46,7 +46,7 @@ Ellipse mode uses the following app state inputs:
 
 - `locationStates`: current displayed state per location
 - `locationHistory`: recent alert history per location
-- `locationPolygons`: Leaflet polygons for each location
+- `featureMap`: GeoJSON Feature objects for each location (keyed by location name)
 - `userPosition`: current user geolocation if available
 
 It also lazily loads `oref_points.json`, which maps alert location names to `[lat, lng]` points used for ellipse fitting and marker placement.
@@ -136,7 +136,7 @@ If the cluster has exactly one usable point, the geometry becomes:
 
 For clusters with two or more usable points:
 
-1. points are projected into the map CRS
+1. points are projected into Web Mercator (EPSG:3857) using inline math (no map CRS dependency)
 2. a major axis is estimated
 3. the point spread is measured in the major-axis and minor-axis basis
 4. padded semi-axes are produced
diff --git a/web/index.html b/web/index.html
index 73095bf..fd7be3b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1100,7 +1100,7 @@ <h2>אודות מפת העורף</h2>
     style: MAP_STYLE,
     center: [DEFAULT_CENTER[1], DEFAULT_CENTER[0]], // MapLibre uses [lng, lat]
     zoom: DEFAULT_ZOOM,
-    maxBounds: [[32.0, 24.0], [65.0, 42.0]]
+    maxBounds: [[32.0, 11.0], [65.0, 42.0]]
   });
 
   map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');

From ebf1df3f3d6177d4cfca886af9205004ad223be6 Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 14:59:23 +0300
Subject: [PATCH 04/10] Document PMTiles R2 setup, coverage bounds, and how to
 regenerate

---
 docs/architecture.md | 55 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/docs/architecture.md b/docs/architecture.md
index 490e12d..a685d6c 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -123,6 +123,61 @@ Location polygons are pre-computed offline and shipped as `web/locations_polygon
 - Per-feature state is driven by data properties, not Leaflet `setStyle`.
 - The `featureMap` lookup (`name → GeoJSON Feature`) is exposed on `AppState` for use by extensions (e.g. ellipse mode).
 
+### Basemap Tiles (PMTiles on R2)
+
+The basemap is a self-hosted Protomaps vector tile file stored on Cloudflare R2 and served via the R2 public bucket URL:
+
+```
+https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/middle-east.pmtiles
+```
+
+**Current file coverage:**
+| Property | Value |
+|----------|-------|
+| File | `middle-east.pmtiles` |
+| Bounds (lng) | 32.0 – 65.0 |
+| Bounds (lat) | 24.0 – 42.0 |
+| Zoom | 0 – 10 |
+| Built | 2026-03-10 (Planetiler 0.10.1, OSM data 2026-04-06) |
+
+This covers Israel, Lebanon, Syria, Jordan, Iraq, Iran, Saudi Arabia, Egypt (Sinai), and the Gulf states. **Yemen and southern Saudi Arabia (south of lat 24°) are not covered.**
+
+#### Inspecting the current file
+
+```bash
+npx pmtiles show https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/middle-east.pmtiles
+```
+
+#### Regenerating with a larger bounding box
+
+To extend coverage (e.g. to include Yemen, lat down to ~10°N):
+
+1. **Generate a new PMTiles file** using Planetiler with `--bounds=32,10,65,42`:
+   ```bash
+   java -jar planetiler.jar \
+     --download \
+     --area=middle-east \
+     --bounds=32,10,65,42 \
+     --output=middle-east-extended.pmtiles
+   ```
+   Or use the [Protomaps Tileserver](https://protomaps.com/dashboard) to download a pre-built extract for a custom bounding box.
+
+2. **Upload to R2** using Wrangler (bucket name visible in Cloudflare dashboard → R2):
+   ```bash
+   wrangler r2 object put <bucket-name>/middle-east.pmtiles \
+     --file=middle-east-extended.pmtiles \
+     --content-type=application/vnd.mapbox-vector-tile
+   ```
+   The public URL (`pub-0cb002...r2.dev`) does not change after upload.
+
+3. **Update `maxBounds` in `web/index.html`** to match the new lat extent (e.g. `[[32.0, 10.0], [65.0, 42.0]]` for Yemen coverage).
+
+#### R2 bucket info
+
+- **Public URL**: `https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/`
+- **Public access**: enabled — the client fetches tiles directly from R2 at runtime via the `pmtiles://` protocol, no Worker involved.
+- Bucket name is visible in Cloudflare dashboard → R2.
+
 ### Geocoding
 
 `web/cities_geo.json` maps ~1,430 Oref location names to `[lat, lng]`. Locations without coordinates are silently skipped.

From 25151ca6ee5a53331728a6a9bcdb840e558286ed Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 15:03:14 +0300
Subject: [PATCH 05/10] =?UTF-8?q?Add=20docs-routing=20table=20to=20CLAUDE.?=
 =?UTF-8?q?md=20=E2=80=94=20when=20to=20read=20which=20doc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index e9292e1..7c49eae 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -32,6 +32,20 @@ cd worker && npx wrangler deploy   # deploy API proxy Worker
 - `tools/poll-coderabbit.sh` — Polls CodeRabbit review status on a PR via GitHub commit status API
 - `docs/map-requirements.md` — Feature requirements doc
 
+## Docs — when to read which file
+
+Read the relevant doc before making changes in that area:
+
+| Task | Read |
+|------|------|
+| Map rendering, basemap tiles, polygon source, API proxy architecture, Cloudflare setup | `docs/architecture.md` |
+| Changing map bounds, replacing or extending PMTiles on R2, understanding tile coverage | `docs/architecture.md` § "Basemap Tiles (PMTiles on R2)" |
+| Ellipse mode behavior, geometry math, cluster algorithm | `docs/ellipse-feature.md` |
+| Alg-C ellipse service (Python backend), request/response format | `docs/ellipse-alg-C.md` |
+| Ellipse probability window metric | `docs/ellipse-probability-window.md` |
+| Feature requirements, UX decisions | `docs/map-requirements.md` |
+| Oref API endpoints, response shapes, geo-blocking | `docs/oref-sources.md` (and this file) |
+
 ## Feature flags
 
 Beta/debug features are gated behind URL parameters with an `f-` prefix (e.g. `?f-log`). On page load, a single block of JS parses all `f-*` params and:

From c227b0f85bdd702a12ef1b763316553bae7b9199 Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 15:05:18 +0300
Subject: [PATCH 06/10] Clarify PMTiles generation options: recommend Protomaps
 dashboard for one-off changes

---
 docs/architecture.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/architecture.md b/docs/architecture.md
index a685d6c..b559db6 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -150,17 +150,21 @@ npx pmtiles show https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/middle-east
 
 #### Regenerating with a larger bounding box
 
-To extend coverage (e.g. to include Yemen, lat down to ~10°N):
+The current file was generated with **Planetiler**. For a one-off bbox change (e.g. adding Yemen), **the Protomaps dashboard is the easier option** — no local tooling required.
 
-1. **Generate a new PMTiles file** using Planetiler with `--bounds=32,10,65,42`:
-   ```bash
+**Option A — Protomaps dashboard (recommended for one-off changes):**
+1. Go to [app.protomaps.com](https://app.protomaps.com), draw a bounding box covering the desired region, and download the `.pmtiles` file.
+
+**Option B — Planetiler (for automation or fresh OSM data):**
+1. ```bash
    java -jar planetiler.jar \
      --download \
      --area=middle-east \
      --bounds=32,10,65,42 \
      --output=middle-east-extended.pmtiles
    ```
-   Or use the [Protomaps Tileserver](https://protomaps.com/dashboard) to download a pre-built extract for a custom bounding box.
+
+Both produce the same `protomaps` basemap schema — the map code works identically with either output.
 
 2. **Upload to R2** using Wrangler (bucket name visible in Cloudflare dashboard → R2):
    ```bash

From f8720789c4123053d2b8bbaaa7abcfe2e4683974 Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 17:15:14 +0300
Subject: [PATCH 07/10] Add step-by-step tile replacement workflow to CLAUDE.md

---
 CLAUDE.md | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index 7c49eae..9730bd0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -46,6 +46,25 @@ Read the relevant doc before making changes in that area:
 | Feature requirements, UX decisions | `docs/map-requirements.md` |
 | Oref API endpoints, response shapes, geo-blocking | `docs/oref-sources.md` (and this file) |
 
+## Replacing the basemap tiles (one-time)
+
+When the user asks to change or extend the PMTiles coverage:
+
+1. **Ask the user to download a new file from the Protomaps dashboard** — Claude Code cannot browse it.
+   Instruct them: go to https://app.protomaps.com, draw a bounding box covering the desired region, and download the `.pmtiles` file.
+
+2. **Once the user has the file**, upload it to R2 with:
+   ```bash
+   wrangler r2 object put <bucket-name>/middle-east.pmtiles \
+     --file=<path-to-downloaded-file>.pmtiles \
+     --content-type=application/vnd.mapbox-vector-tile
+   ```
+   The bucket name is visible in Cloudflare dashboard → R2. The public URL does not change.
+
+3. **Update `maxBounds` in `web/index.html`** (search for `maxBounds`) to match the new bounding box.
+
+4. **Verify** by running `npx pmtiles show <url>` to confirm the new bounds.
+
 ## Feature flags
 
 Beta/debug features are gated behind URL parameters with an `f-` prefix (e.g. `?f-log`). On page load, a single block of JS parses all `f-*` params and:

From cc321f3b4a6c6fd83a3b611fd19c1fe4b2602d3d Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 17:19:11 +0300
Subject: [PATCH 08/10] Correct PMTiles generation docs: original used
 Planetiler, slice.openstreetmap.us is automatable

---
 CLAUDE.md            | 5 +++--
 docs/architecture.md | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 9730bd0..6fab6e6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -50,8 +50,9 @@ Read the relevant doc before making changes in that area:
 
 When the user asks to change or extend the PMTiles coverage:
 
-1. **Ask the user to download a new file from the Protomaps dashboard** — Claude Code cannot browse it.
-   Instruct them: go to https://app.protomaps.com, draw a bounding box covering the desired region, and download the `.pmtiles` file.
+1. **Download a new PMTiles file** using the browser tool to navigate to https://slice.openstreetmap.us:
+   - Paste the desired bbox (e.g. `32,10,65,42`) into the "Paste bbox or GeoJSON" field
+   - Click **Load**, enter a name, click **Generate Slice**, then download the `.pmtiles` file
 
 2. **Once the user has the file**, upload it to R2 with:
    ```bash
diff --git a/docs/architecture.md b/docs/architecture.md
index b559db6..bb6604d 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -150,12 +150,12 @@ npx pmtiles show https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/middle-east
 
 #### Regenerating with a larger bounding box
 
-The current file was generated with **Planetiler**. For a one-off bbox change (e.g. adding Yemen), **the Protomaps dashboard is the easier option** — no local tooling required.
+The current file was generated with **Planetiler** (v0.10.1, run locally).
 
-**Option A — Protomaps dashboard (recommended for one-off changes):**
-1. Go to [app.protomaps.com](https://app.protomaps.com), draw a bounding box covering the desired region, and download the `.pmtiles` file.
+**Option A — slice.openstreetmap.us (easiest for one-off changes):**
+1. Go to [slice.openstreetmap.us](https://slice.openstreetmap.us), paste the desired bbox (e.g. `32,10,65,42`) into the "Paste bbox or GeoJSON" field, click **Load**, name the area, then click **Generate Slice** and download the resulting `.pmtiles` file. This site is automatable via browser tools.
 
-**Option B — Planetiler (for automation or fresh OSM data):**
+**Option B — Planetiler (used to generate the original file; best for full control or automation):**
 1. ```bash
    java -jar planetiler.jar \
      --download \

From 19a5a23450b4bc9e539e38afae595aea31c7b41d Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 17:41:10 +0300
Subject: [PATCH 09/10] Bake basemap tweaks into style at init via
 customizeBasemapLayers()

Road narrowing, border filters, and sub-regional boundary visibility
are now applied to the Protomaps layer list before MapLibre is
initialized, instead of patching post-load with setPaintProperty.
Add future basemap style tweaks to customizeBasemapLayers().
---
 web/index.html | 66 +++++++++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/web/index.html b/web/index.html
index fd7be3b..297791e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1081,6 +1081,43 @@ <h2>אודות מפת העורף</h2>
     }
   });
 
+  // --- Basemap style customizations ---
+  // Modify the Protomaps layer list before passing to MapLibre so tweaks are
+  // baked into the initial style rather than applied post-load via setPaintProperty.
+  // Add future basemap tweaks here.
+  function scaleWidthExpr(expr, factor) {
+    if (typeof expr === 'number') return expr * factor;
+    if (!Array.isArray(expr) || expr[0] !== 'interpolate') return expr;
+    var scaled = [expr[0], expr[1], expr[2]];
+    for (var i = 3; i < expr.length; i += 2) {
+      scaled.push(expr[i]);
+      scaled.push(expr[i + 1] * factor);
+    }
+    return scaled;
+  }
+
+  function customizeBasemapLayers(layers) {
+    return layers.map(function(l) {
+      l = Object.assign({}, l, { paint: Object.assign({}, l.paint), layout: Object.assign({}, l.layout) });
+      // Roads: narrow to 40% of default width
+      if (l['source-layer'] === 'roads' && l.paint && l.paint['line-width']) {
+        l.paint['line-width'] = scaleWidthExpr(l.paint['line-width'], 0.4);
+      }
+      // Country borders: solid non-disputed only, thicker
+      if (l.id === 'boundaries_country') {
+        l.filter = ['all', ['<=', 'kind_detail', 2], ['!=', 'disputed', true]];
+        l.paint['line-width'] = 2;
+      }
+      // Sub-regional boundaries: only at zoom 9+
+      if (l.id === 'boundaries') {
+        l.filter = ['>', 'kind_detail', 2];
+        l.paint['line-width'] = 0.8;
+        l.paint['line-opacity'] = ['step', ['zoom'], 0, 9, 1];
+      }
+      return l;
+    });
+  }
+
   var MAP_STYLE = {
     version: 8,
     glyphs: 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf',
@@ -1092,7 +1129,7 @@ <h2>אודות מפת העורף</h2>
         attribution: '<a href="https://protomaps.com">Protomaps</a> \u00a9 <a href="https://openstreetmap.org">OpenStreetMap</a>'
       }
     },
-    layers: basemaps.layers('protomaps', WARM_FLAVOR, { lang: 'he' })
+    layers: customizeBasemapLayers(basemaps.layers('protomaps', WARM_FLAVOR, { lang: 'he' }))
   };
 
   var map = new maplibregl.Map({
@@ -1119,29 +1156,8 @@ <h2>אודות מפת העורף</h2>
   map.on('load', function() {
     mapLoaded = true;
 
-    // Narrow all roads to 65% of their default width
-    // MapLibre doesn't support ['*', scalar, interpolate_expr], so scale stop values directly
-    function scaleWidthExpr(expr, factor) {
-      if (typeof expr === 'number') return expr * factor;
-      if (!Array.isArray(expr) || expr[0] !== 'interpolate') return expr;
-      // ['interpolate', interp, input, zoom1, val1, zoom2, val2, ...]
-      var scaled = [expr[0], expr[1], expr[2]];
-      for (var i = 3; i < expr.length; i += 2) {
-        scaled.push(expr[i]);              // zoom stop — unchanged
-        scaled.push(expr[i + 1] * factor); // width value — scaled
-      }
-      return scaled;
-    }
-    map.getStyle().layers.forEach(function(l) {
-      if (l['source-layer'] === 'roads' && l.paint && l.paint['line-width']) {
-        map.setPaintProperty(l.id, 'line-width', scaleWidthExpr(l.paint['line-width'], 0.4));
-      }
-    });
-
-    // Thicker real country borders, exclude disputed
-    map.setFilter('boundaries_country', ['all', ['<=', 'kind_detail', 2], ['!=', 'disputed', true]]);
-    map.setPaintProperty('boundaries_country', 'line-width', 2);
     // Disputed country borders (West Bank/Gaza outline, Lebanon, Golan): visible but dashed
+    // (non-disputed borders and road widths are baked into MAP_STYLE via customizeBasemapLayers)
     map.addLayer({
       id: 'boundaries_disputed',
       type: 'line',
@@ -1154,10 +1170,6 @@ <h2>אודות מפת העורף</h2>
         'line-dasharray': [4, 3]
       }
     }, 'boundaries_country');
-    // Sub-regional boundaries (districts): only show when zoomed in
-    map.setFilter('boundaries', ['>', 'kind_detail', 2]);
-    map.setPaintProperty('boundaries', 'line-width', 0.8);
-    map.setPaintProperty('boundaries', 'line-opacity', ['step', ['zoom'], 0, 9, 1]);
 
     map.addSource('alerts-source', { type: 'geojson', data: polygonsGeoJSON });
 

From 95a39a572c74ebc4d1cfa59d56819ecf2f2b9790 Mon Sep 17 00:00:00 2001
From: Maor <maorcc@users.noreply.github.com>
Date: Tue, 7 Apr 2026 22:51:42 +0300
Subject: [PATCH 10/10] Added Yemen tiles

---
 CLAUDE.md            | 12 ++++++++----
 docs/architecture.md | 40 +++++++++++++++++++++++++---------------
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 6fab6e6..0fa1146 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -50,11 +50,15 @@ Read the relevant doc before making changes in that area:
 
 When the user asks to change or extend the PMTiles coverage:
 
-1. **Download a new PMTiles file** using the browser tool to navigate to https://slice.openstreetmap.us:
-   - Paste the desired bbox (e.g. `32,10,65,42`) into the "Paste bbox or GeoJSON" field
-   - Click **Load**, enter a name, click **Generate Slice**, then download the `.pmtiles` file
+1. **Download a new PMTiles file** using the `pmtiles` CLI (install: `brew install protomaps/homebrew-go-pmtiles/go-pmtiles`). It extracts only the needed bbox via HTTP range requests — no full 120 GB download:
+   ```bash
+   pmtiles extract https://build.protomaps.com/20260404.pmtiles middle-east.pmtiles \
+     --bbox=32,10,65,42 --maxzoom=15 --download-threads=4
+   ```
+   Replace `20260404` with a recent date from https://maps.protomaps.com/builds/.
+   The bbox format is `MIN_LON,MIN_LAT,MAX_LON,MAX_LAT`.
 
-2. **Once the user has the file**, upload it to R2 with:
+2. **Upload to R2** with:
    ```bash
    wrangler r2 object put <bucket-name>/middle-east.pmtiles \
      --file=<path-to-downloaded-file>.pmtiles \
diff --git a/docs/architecture.md b/docs/architecture.md
index bb6604d..f672607 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -136,11 +136,11 @@ https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/middle-east.pmtiles
 |----------|-------|
 | File | `middle-east.pmtiles` |
 | Bounds (lng) | 32.0 – 65.0 |
-| Bounds (lat) | 24.0 – 42.0 |
+| Bounds (lat) | 11.0 – 39.0 |
 | Zoom | 0 – 10 |
-| Built | 2026-03-10 (Planetiler 0.10.1, OSM data 2026-04-06) |
+| Built | 2026-04-07 (Planetiler 0.10.1, OSM data 2026-04-06) |
 
-This covers Israel, Lebanon, Syria, Jordan, Iraq, Iran, Saudi Arabia, Egypt (Sinai), and the Gulf states. **Yemen and southern Saudi Arabia (south of lat 24°) are not covered.**
+This covers Israel, Lebanon, Syria, Jordan, Iraq, Iran, Saudi Arabia, Egypt (Sinai), the Gulf states, and Yemen.
 
 #### Inspecting the current file
 
@@ -150,26 +150,36 @@ npx pmtiles show https://pub-0cb002f302e94002b76aa0bc30eb8763.r2.dev/middle-east
 
 #### Regenerating with a larger bounding box
 
-The current file was generated with **Planetiler** (v0.10.1, run locally).
+The current file was generated with **Planetiler** (v0.10.1, run locally). For future updates the recommended approach is the `pmtiles` CLI, which uses HTTP range requests to extract only the needed tiles from Protomaps' hosted planet — no 120 GB download required.
 
-**Option A — slice.openstreetmap.us (easiest for one-off changes):**
-1. Go to [slice.openstreetmap.us](https://slice.openstreetmap.us), paste the desired bbox (e.g. `32,10,65,42`) into the "Paste bbox or GeoJSON" field, click **Load**, name the area, then click **Generate Slice** and download the resulting `.pmtiles` file. This site is automatable via browser tools.
+**Option A — `pmtiles extract` CLI (recommended for one-off changes):**
 
-**Option B — Planetiler (used to generate the original file; best for full control or automation):**
-1. ```bash
-   java -jar planetiler.jar \
-     --download \
-     --area=middle-east \
-     --bounds=32,10,65,42 \
-     --output=middle-east-extended.pmtiles
-   ```
+Install: `brew install protomaps/homebrew-go-pmtiles/go-pmtiles`
+
+Find a recent build date at https://maps.protomaps.com/builds/, then run:
+```bash
+pmtiles extract https://build.protomaps.com/20260404.pmtiles middle-east.pmtiles \
+  --bbox=32,10,65,42 --maxzoom=15 --download-threads=4
+```
+bbox format: `MIN_LON,MIN_LAT,MAX_LON,MAX_LAT`. Replace the date with the one from the builds index. The command fetches only the tiles in the bbox via HTTP range requests (a few GB, not 120 GB).
+
+> **Do not use `slice.openstreetmap.us`** — that site downloads raw `.osm.pbf` data (OSM XML/binary), not `.pmtiles`.
+
+**Option B — Planetiler (best for full control or custom schemas):**
+```bash
+java -jar planetiler.jar \
+  --download \
+  --area=middle-east \
+  --bounds=32,10,65,42 \
+  --output=middle-east-extended.pmtiles
+```
 
 Both produce the same `protomaps` basemap schema — the map code works identically with either output.
 
 2. **Upload to R2** using Wrangler (bucket name visible in Cloudflare dashboard → R2):
    ```bash
    wrangler r2 object put <bucket-name>/middle-east.pmtiles \
-     --file=middle-east-extended.pmtiles \
+     --file=middle-east.pmtiles \
      --content-type=application/vnd.mapbox-vector-tile
    ```
    The public URL (`pub-0cb002...r2.dev`) does not change after upload.