Deploy petrol map: interactive fuel-price PWA + Docker for HF Spaces

.dockerignore

@@ -0,0 +1,8 @@
+output/
+__pycache__/
+*.pyc
+.git/
+.venv/
+venv/
+.DS_Store
+*.log

.gitignore

@@ -0,0 +1,7 @@
+.venv/
+venv/
+output/
+__pycache__/
+*.pyc
+.DS_Store
+*.log

Dockerfile

@@ -0,0 +1,20 @@
+# Hugging Face Spaces (Docker SDK) — serves the PWA on port 7860.
+FROM python:3.11-slim
+
+# HF Spaces run as a non-root user with UID 1000.
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH \
+    PORT=7860 \
+    TZ=Europe/Paris
+
+WORKDIR $HOME/app
+
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+COPY --chown=user . .
+
+EXPOSE 7860
+CMD ["python", "app.py"]

README.md

@@ -1,10 +1,96 @@
 ---
-title: Prix Carburant
-emoji: 🏃
-colorFrom: red
-colorTo: yellow
+title: Prix des Carburants France
+emoji: ⛽
+colorFrom: green
+colorTo: red
 sdk: docker
+app_port: 7860
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ⛽ Petrol Map — live French fuel prices (PWA)
+
+An installable, mobile-friendly map of every petrol station in France,
+colour-coded by price and refreshed twice a day from the official open-data feed.
+
+**Data source:** [`prix_des_carburants_j_7`](https://public.opendatasoft.com/explore/dataset/prix_des_carburants_j_7)
+on opendatasoft (the last 7 days of prices reported by ~9 800 stations).
+
+## Features
+
+- **Installable PWA** — add it to your phone's home screen and launch it like a
+  native app; works offline (shows the last cached prices) via a service worker.
+- **Responsive** — full-screen map with touch-friendly controls and safe-area
+  handling for notched phones.
+- **One layer per fuel** — Gazole, SP95, SP98, E10, E85, GPLc — via the selector.
+- **Price colour scale** — green = cheaper, red = pricier, scaled to each fuel's
+  national 5th–95th percentile; the legend updates per fuel.
+- **Marker clustering** keeps ~10 000 stations smooth; zoom in to split clusters.
+- **Click a station** for all prices, address, last-reported date, and a
+  one-click *Directions* link. Plus place search and hover tooltips.
+
+## Run locally
+
+```bash
+pip install -r requirements.txt
+python app.py            # builds, then serves http://localhost:7860
+```
+
+Open <http://localhost:7860> — on a phone (same network or behind HTTPS) you can
+then "Add to Home Screen" to install it.
+
+Other entrypoints:
+
+```bash
+python build_map.py      # build output/index.html once, no server
+python scheduler.py      # rebuild twice daily without serving (for static hosting)
+python scheduler.py --once
+```
+
+> **PWA note:** install/offline features need a secure context — i.e. `https://`
+> or `http://localhost`. Opening the file directly (`file://`) shows the map but
+> not the installable app.
+
+## Deploy to Hugging Face Spaces (Docker)
+
+1. Create a new Space → **SDK: Docker**.
+2. Push these files to the Space repo (the YAML header above configures it):
+
+   ```bash
+   git init && git add . && git commit -m "Petrol map PWA"
+   git remote add origin https://huggingface.co/spaces/<user>/<space>
+   git push origin main
+   ```
+
+3. The Space builds the `Dockerfile`, serves on port `7860`, and rebuilds the
+   prices twice a day. The public Space URL is HTTPS, so the PWA is installable
+   straight from your phone.
+
+Run the same container anywhere else:
+
+```bash
+docker build -t petrol-map .
+docker run -p 7860:7860 petrol-map      # http://localhost:7860
+```
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `fuel_data.py` | Fetch + normalise the dataset from the opendatasoft export API |
+| `build_map.py` | Render `output/index.html` and copy the PWA assets |
+| `map_template.html` | Client-side map (Leaflet + clustering + geocoder, PWA-enabled) |
+| `app.py` | Build + serve on `$PORT` + twice-daily refresh (container entrypoint) |
+| `scheduler.py` | Twice-daily rebuild without serving |
+| `static/` | `manifest.webmanifest`, `sw.js`, app icons |
+| `generate_icons.py` | One-off icon generator (needs Pillow; not used at runtime) |
+| `Dockerfile` | Container image for Hugging Face Spaces / anywhere |
+| `output/` | Generated site (`index.html`, PWA assets, `stations.json` cache) |
+
+## How the refresh works
+
+The upstream dataset is updated continuously by the French administration.
+`app.py` re-fetches the full feed and regenerates the page twice daily (07:00 and
+19:00, container local time — set `TZ`), so the map always reflects a recent
+snapshot. Change `REFRESH_TIMES` to refresh on a different cadence.

app.py

@@ -0,0 +1,80 @@
+"""Production entrypoint: build the map, serve it, refresh it twice a day.
+
+Runs as the single process inside a container (e.g. a Hugging Face Docker
+Space). It builds the map immediately on startup, serves the output/ directory
+over HTTP on $PORT (default 7860), and rebuilds at 07:00 and 19:00 in a
+background thread so the served prices stay fresh.
+"""
+from __future__ import annotations
+
+import http.server
+import os
+import socketserver
+import threading
+import time
+import traceback
+
+import schedule
+
+from build_map import OUTPUT_DIR, generate
+
+PORT = int(os.environ.get("PORT", "7860"))
+REFRESH_TIMES = ["07:00", "19:00"]  # twice a day, container local time
+
+
+def safe_generate() -> None:
+    """Rebuild the map, logging failures instead of crashing the loop."""
+    try:
+        generate()
+    except Exception:
+        print("Map generation failed:")
+        traceback.print_exc()
+
+
+class Handler(http.server.SimpleHTTPRequestHandler):
+    """Serve output/ with correct MIME types and no-cache on the live files."""
+
+    extensions_map = {
+        **http.server.SimpleHTTPRequestHandler.extensions_map,
+        ".webmanifest": "application/manifest+json",
+        ".js": "text/javascript",
+        ".json": "application/json",
+    }
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, directory=OUTPUT_DIR, **kwargs)
+
+    def end_headers(self):
+        # The page and service worker must revalidate so updates propagate.
+        path = self.path.split("?")[0]
+        if path in ("/", "/index.html", "/sw.js"):
+            self.send_header("Cache-Control", "no-cache")
+        super().end_headers()
+
+    def log_message(self, *args):  # keep container logs quiet
+        pass
+
+
+class Server(socketserver.ThreadingTCPServer):
+    allow_reuse_address = True
+    daemon_threads = True
+
+
+def scheduler_loop() -> None:
+    for when in REFRESH_TIMES:
+        schedule.every().day.at(when).do(safe_generate)
+    while True:
+        schedule.run_pending()
+        time.sleep(30)
+
+
+def main() -> None:
+    safe_generate()  # ensure the map exists before we start serving
+    threading.Thread(target=scheduler_loop, daemon=True).start()
+    with Server(("0.0.0.0", PORT), Handler) as httpd:
+        print(f"Serving on http://0.0.0.0:{PORT}  (refresh at {', '.join(REFRESH_TIMES)})")
+        httpd.serve_forever()
+
+
+if __name__ == "__main__":
+    main()

build_map.py

@@ -0,0 +1,128 @@
+"""Build an interactive fuel-price map of France as a self-contained HTML file.
+
+Rather than emitting one marker object per station per fuel (which balloons the
+file to tens of MB), the station data is embedded once as compact JSON and the
+map is rendered client-side with Leaflet + marker clustering. A fuel selector
+recolours and filters the points live: green = cheaper, red = pricier, scaled to
+each fuel's national price distribution.
+"""
+from __future__ import annotations
+
+import json
+import math
+import os
+import shutil
+from datetime import datetime
+from zoneinfo import ZoneInfo
+
+from fuel_data import FUELS, fetch_stations
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+OUTPUT_DIR = os.path.join(BASE_DIR, "output")
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+OUTPUT_HTML = os.path.join(OUTPUT_DIR, "index.html")  # served at "/" (PWA start_url)
+CACHE_JSON = os.path.join(OUTPUT_DIR, "stations.json")
+PARIS = ZoneInfo("Europe/Paris")
+
+FUEL_LABELS = list(FUELS)
+TEMPLATE_PATH = os.path.join(BASE_DIR, "map_template.html")
+
+
+def percentile(sorted_vals: list[float], pct: float) -> float:
+    """Linear-interpolation percentile of an already-sorted list."""
+    if not sorted_vals:
+        return 0.0
+    k = (len(sorted_vals) - 1) * pct / 100.0
+    lo, hi = math.floor(k), math.ceil(k)
+    if lo == hi:
+        return sorted_vals[int(k)]
+    return sorted_vals[lo] * (hi - k) + sorted_vals[hi] * (k - lo)
+
+
+def fuel_stats(stations: list[dict]) -> dict[str, dict]:
+    """Per-fuel count and 5th/50th/95th percentiles used for colour scaling."""
+    stats = {}
+    for label in FUEL_LABELS:
+        values = sorted(
+            s["prices"][label] for s in stations if s["prices"][label] is not None
+        )
+        if not values:
+            continue
+        stats[label] = {
+            "count": len(values),
+            "p5": round(percentile(values, 5), 3),
+            "median": round(percentile(values, 50), 3),
+            "p95": round(percentile(values, 95), 3),
+        }
+    return stats
+
+
+def compact_records(stations: list[dict]) -> list[list]:
+    """Encode each station as a small positional array to shrink the payload."""
+    records = []
+    for s in stations:
+        addr_parts = [s["address"], f"{s['cp']} {s['city']}".strip()]
+        addr = ", ".join(p for p in addr_parts if p)
+        prices = [s["prices"][label] for label in FUEL_LABELS]
+        records.append(
+            [
+                round(s["lat"], 5),
+                round(s["lon"], 5),
+                s["name"],
+                s["brand"],
+                addr,
+                (s["update"] or "")[:10],
+                prices,
+            ]
+        )
+    return records
+
+
+def build_html(stations: list[dict]) -> str:
+    """Render the HTML document from the template and embedded data."""
+    with open(TEMPLATE_PATH, encoding="utf-8") as fh:
+        template = fh.read()
+
+    payload = {
+        "fuels": FUEL_LABELS,
+        "stats": fuel_stats(stations),
+        "stations": compact_records(stations),
+    }
+    data_json = json.dumps(payload, ensure_ascii=False, separators=(",", ":"))
+    stamp = datetime.now(PARIS).strftime("%d %b %Y, %H:%M")
+
+    return (
+        template.replace("__DATA__", data_json)
+        .replace("__COUNT__", f"{len(stations):,}".replace(",", " "))
+        .replace("__TIMESTAMP__", stamp)
+    )
+
+
+def copy_static() -> None:
+    """Copy the PWA assets (manifest, service worker, icons) into output/."""
+    if not os.path.isdir(STATIC_DIR):
+        return
+    for name in os.listdir(STATIC_DIR):
+        src = os.path.join(STATIC_DIR, name)
+        if os.path.isfile(src):
+            shutil.copy2(src, os.path.join(OUTPUT_DIR, name))
+
+
+def generate(output_html: str = OUTPUT_HTML) -> str:
+    """Fetch live data, build the map, write the HTML file, return its path."""
+    os.makedirs(OUTPUT_DIR, exist_ok=True)
+    copy_static()
+    stations = fetch_stations(cache_path=CACHE_JSON)
+    html_doc = build_html(stations)
+    with open(output_html, "w", encoding="utf-8") as fh:
+        fh.write(html_doc)
+    size_mb = os.path.getsize(output_html) / 1e6
+    print(
+        f"[{datetime.now(PARIS):%Y-%m-%d %H:%M:%S}] "
+        f"Map generated: {output_html} ({len(stations)} stations, {size_mb:.1f} MB)"
+    )
+    return output_html
+
+
+if __name__ == "__main__":
+    generate()

fuel_data.py

@@ -0,0 +1,88 @@
+"""Fetch and normalise French fuel-price data from the open-data portal.
+
+Data source: https://public.opendatasoft.com/explore/dataset/prix_des_carburants_j_7
+The dataset holds the prices reported by every petrol station in France over the
+last 7 days, refreshed continuously upstream.
+"""
+from __future__ import annotations
+
+import json
+import os
+from datetime import datetime, timezone
+
+import requests
+
+DATASET = "prix_des_carburants_j_7"
+EXPORT_URL = (
+    "https://public.opendatasoft.com/api/explore/v2.1/"
+    f"catalog/datasets/{DATASET}/exports/json"
+)
+
+# Human label -> price field in the dataset (ordered: most common fuel first).
+FUELS: dict[str, str] = {
+    "Gazole": "price_gazole",
+    "SP95": "price_sp95",
+    "SP98": "price_sp98",
+    "E10": "price_e10",
+    "E85": "price_e85",
+    "GPLc": "price_gplc",
+}
+
+
+def fetch_raw(timeout: int = 180) -> list[dict]:
+    """Download every record from the dataset's bulk export endpoint."""
+    resp = requests.get(EXPORT_URL, params={"timezone": "Europe/Paris"}, timeout=timeout)
+    resp.raise_for_status()
+    return resp.json()
+
+
+def normalise(raw: list[dict]) -> list[dict]:
+    """Keep geolocated stations that report at least one price; tidy the fields."""
+    stations = []
+    for r in raw:
+        geo = r.get("geo_point") or {}
+        lat, lon = geo.get("lat"), geo.get("lon")
+        if lat is None or lon is None:
+            continue
+
+        prices = {label: r.get(field) for label, field in FUELS.items()}
+        if not any(v is not None for v in prices.values()):
+            continue
+
+        stations.append(
+            {
+                "id": r.get("id"),
+                "name": (r.get("name") or "").strip() or "Station",
+                "brand": (r.get("brand") or "").strip(),
+                "address": (r.get("address") or "").strip(),
+                "city": (r.get("city") or "").strip(),
+                "cp": (r.get("cp") or "").strip(),
+                "lat": lat,
+                "lon": lon,
+                "prices": prices,
+                "update": r.get("update"),
+            }
+        )
+    return stations
+
+
+def fetch_stations(cache_path: str | None = None) -> list[dict]:
+    """Fetch + normalise the live dataset, optionally caching the result to disk."""
+    stations = normalise(fetch_raw())
+    if cache_path:
+        os.makedirs(os.path.dirname(cache_path) or ".", exist_ok=True)
+        payload = {
+            "fetched_at": datetime.now(timezone.utc).isoformat(),
+            "count": len(stations),
+            "stations": stations,
+        }
+        with open(cache_path, "w", encoding="utf-8") as fh:
+            json.dump(payload, fh, ensure_ascii=False)
+    return stations
+
+
+if __name__ == "__main__":
+    data = fetch_stations()
+    print(f"Fetched {len(data)} geolocated stations.")
+    sample = data[0]
+    print("Example:", json.dumps(sample, ensure_ascii=False, indent=2))

generate_icons.py

@@ -0,0 +1,80 @@
+"""Generate PWA / app icons (run once; output committed to static/).
+
+Draws a simple white fuel-drop on the theme-green background at the sizes
+required for installable PWAs and iOS home-screen icons. Re-run only if the
+brand colours change — the container does not need Pillow at runtime.
+"""
+from __future__ import annotations
+
+import os
+
+from PIL import Image, ImageDraw
+
+STATIC_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "static")
+GREEN_TOP = (38, 174, 96)    # theme green (lighter)
+GREEN_BOT = (22, 122, 70)    # theme green (darker)
+WHITE = (255, 255, 255, 255)
+SCALE = 4  # supersample then downscale for smooth edges
+
+
+def _gradient_bg(size: int) -> Image.Image:
+    """Vertical green gradient canvas."""
+    img = Image.new("RGBA", (size, size))
+    px = img.load()
+    for y in range(size):
+        t = y / max(size - 1, 1)
+        r = round(GREEN_TOP[0] + (GREEN_BOT[0] - GREEN_TOP[0]) * t)
+        g = round(GREEN_TOP[1] + (GREEN_BOT[1] - GREEN_TOP[1]) * t)
+        b = round(GREEN_TOP[2] + (GREEN_BOT[2] - GREEN_TOP[2]) * t)
+        for x in range(size):
+            px[x, y] = (r, g, b, 255)
+    return img
+
+
+def _rounded_mask(size: int, radius: int) -> Image.Image:
+    mask = Image.new("L", (size, size), 0)
+    ImageDraw.Draw(mask).rounded_rectangle([0, 0, size - 1, size - 1], radius, fill=255)
+    return mask
+
+
+def _draw_drop(draw: ImageDraw.ImageDraw, size: int, scale: float = 1.0) -> None:
+    """A teardrop: round bottom (circle) + tapered top (triangle), centred."""
+    cx = size / 2
+    r = size * 0.20 * scale
+    cy = size * 0.60                      # centre of the round part
+    apex_y = cy - r * (3.0 + 0.0)         # tip well above the circle
+    apex_y = size * (0.60 - 0.20 * scale * 2.05)
+    # tangent-ish base corners just above the circle centre
+    bx = r * 0.92
+    by = cy - r * 0.45
+    draw.polygon([(cx, apex_y), (cx - bx, by), (cx + bx, by)], fill=WHITE)
+    draw.ellipse([cx - r, cy - r, cx + r, cy + r], fill=WHITE)
+
+
+def make_icon(size: int, *, maskable: bool = False, rounded: bool = True) -> Image.Image:
+    s = size * SCALE
+    bg = _gradient_bg(s)
+    # maskable icons must keep content inside the central "safe zone"
+    drop_scale = 0.78 if maskable else 1.0
+    _draw_drop(ImageDraw.Draw(bg), s, scale=drop_scale)
+    if rounded and not maskable:
+        bg.putalpha(_rounded_mask(s, radius=int(s * 0.22)))
+    return bg.resize((size, size), Image.LANCZOS)
+
+
+def main() -> None:
+    os.makedirs(STATIC_DIR, exist_ok=True)
+    targets = {
+        "icon-192.png": dict(size=192, rounded=True),
+        "icon-512.png": dict(size=512, rounded=True),
+        "icon-maskable-512.png": dict(size=512, maskable=True),
+        "apple-touch-icon.png": dict(size=180, maskable=True),  # full-bleed for iOS
+    }
+    for name, kw in targets.items():
+        size = kw.pop("size")
+        make_icon(size, **kw).save(os.path.join(STATIC_DIR, name))
+        print("wrote", name)
+
+
+if __name__ == "__main__":
+    main()

map_template.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<title>Prix des carburants en France</title>
+<meta name="description" content="Carte interactive des prix des carburants en France, rafraîchie deux fois par jour.">
+<meta name="theme-color" content="#1a9850">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="icon" href="/icon-192.png">
+<!-- iOS / Android home-screen support -->
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="Carburants">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
+<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
+<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.css">
+<style>
+  html, body { height: 100%; margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
+  #map { position: absolute; inset: 0; height: 100vh; height: 100dvh; width: 100%; }
+  .banner {
+    position: absolute; left: 50%; transform: translateX(-50%);
+    top: calc(8px + env(safe-area-inset-top));
+    z-index: 1000; background: rgba(255,255,255,.93); padding: 8px 18px;
+    border-radius: 10px; box-shadow: 0 1px 8px rgba(0,0,0,.25); text-align: center;
+    max-width: 92vw; box-sizing: border-box;
+  }
+  .banner b { font-size: 15px; }
+  .banner small { display: block; color: #666; font-size: 11px; margin-top: 2px; }
+  .panel {
+    background: rgba(255,255,255,.96); padding: 10px 12px; border-radius: 8px;
+    box-shadow: 0 1px 6px rgba(0,0,0,.3); font-size: 13px; line-height: 1.5; min-width: 150px;
+  }
+  .panel h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #555; }
+  .panel label { display: block; cursor: pointer; }
+  .panel input { vertical-align: middle; margin-right: 6px; }
+  .panel .count { color: #999; font-size: 11px; }
+  .legend-bar {
+    height: 12px; border-radius: 3px; margin: 8px 0 3px;
+    background: linear-gradient(to right, #1a9850, #91cf60, #fee08b, #fc8d59, #d73027);
+  }
+  .legend-scale { display: flex; justify-content: space-between; font-size: 11px; color: #555; }
+  .popup b { font-size: 14px; }
+  .popup .addr { color: #666; margin: 2px 0 6px; }
+  .popup table { border-collapse: collapse; }
+  .popup td { padding: 1px 8px 1px 0; }
+  .popup td.p { text-align: right; font-weight: 600; }
+  .popup .upd { margin-top: 6px; color: #999; font-size: 11px; }
+  /* Keep Leaflet controls clear of notches / rounded corners */
+  .leaflet-top { margin-top: env(safe-area-inset-top); }
+  .leaflet-left { margin-left: env(safe-area-inset-left); }
+  .leaflet-right { margin-right: env(safe-area-inset-right); }
+  .leaflet-bottom { margin-bottom: env(safe-area-inset-bottom); }
+  /* Mobile: smaller banner, bigger touch targets */
+  @media (max-width: 600px) {
+    .banner { padding: 6px 12px; }
+    .banner b { font-size: 13px; }
+    .banner small { font-size: 10px; }
+    .panel { font-size: 14px; padding: 9px 11px; min-width: 130px; }
+    .panel label { padding: 3px 0; }
+    .leaflet-touch .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; }
+  }
+</style>
+</head>
+<body>
+<div id="map"></div>
+<div class="banner">
+  <b>⛽ Prix des carburants en France</b>
+  <small>__COUNT__ stations · refreshed __TIMESTAMP__ (Europe/Paris)</small>
+</div>
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
+<script src="https://unpkg.com/leaflet-control-geocoder@2.4.0/dist/Control.Geocoder.js"></script>
+<script>
+const DATA = __DATA__;
+const FUELS = DATA.fuels;          // ["Gazole", "SP95", ...]
+const STATS = DATA.stats;          // { Gazole: {count, p5, median, p95}, ... }
+// Each station: [lat, lon, name, brand, addr, updated, [price per fuel...]]
+const STATIONS = DATA.stations;
+
+// Green -> yellow -> red gradient stops (cheap -> expensive).
+const STOPS = [
+  [0.00, [26, 152, 80]], [0.25, [145, 207, 96]], [0.50, [254, 224, 139]],
+  [0.75, [252, 141, 89]], [1.00, [215, 48, 39]],
+];
+function colorFor(t) {
+  t = Math.max(0, Math.min(1, t));
+  for (let i = 1; i < STOPS.length; i++) {
+    if (t <= STOPS[i][0]) {
+      const [t0, c0] = STOPS[i - 1], [t1, c1] = STOPS[i];
+      const f = (t - t0) / (t1 - t0);
+      const c = c0.map((v, k) => Math.round(v + (c1[k] - v) * f));
+      return `rgb(${c[0]},${c[1]},${c[2]})`;
+    }
+  }
+  return "rgb(215,48,39)";
+}
+
+const map = L.map("map", { preferCanvas: true }).setView([46.6, 2.45], 6);
+L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
+  attribution: '&copy; OpenStreetMap, &copy; CARTO · data: data.economie.gouv.fr via opendatasoft',
+  subdomains: "abcd", maxZoom: 19,
+}).addTo(map);
+
+const cluster = L.markerClusterGroup({
+  chunkedLoading: true, maxClusterRadius: 45, disableClusteringAtZoom: 11,
+});
+map.addLayer(cluster);
+
+L.Control.geocoder({ defaultMarkGeocode: true, collapsed: true, placeholder: "Search a place…" })
+  .addTo(map);
+
+function popupHtml(s, fuelIdx) {
+  const [lat, lon, name, brand, addr, updated, prices] = s;
+  let rows = "";
+  FUELS.forEach((f, i) => {
+    if (prices[i] != null) {
+      const hi = i === fuelIdx ? ' style="background:#fff3cd"' : "";
+      rows += `<tr${hi}><td>${f}</td><td class="p">${prices[i].toFixed(3)} €</td></tr>`;
+    }
+  });
+  const dir = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lon}`;
+  const title = brand ? `${name} · ${brand}` : name;
+  return `<div class="popup"><b>${esc(title)}</b>` +
+    `<div class="addr">${esc(addr)}</div><table>${rows}</table>` +
+    `<div class="upd">Reported ${updated || "—"}</div>` +
+    `<a href="${dir}" target="_blank">Directions ↗</a></div>`;
+}
+function esc(t) {
+  return String(t).replace(/[&<>"]/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+}
+
+function render(fuelIdx) {
+  const fuel = FUELS[fuelIdx];
+  const st = STATS[fuel];
+  const span = Math.max(st.p95 - st.p5, 0.001);
+  const markers = [];
+  for (const s of STATIONS) {
+    const price = s[6][fuelIdx];
+    if (price == null) continue;
+    const color = colorFor((price - st.p5) / span);
+    const m = L.circleMarker([s[0], s[1]], {
+      radius: 6, color: "rgba(40,40,40,.35)", weight: 1,
+      fillColor: color, fillOpacity: 0.9,
+    });
+    m.bindTooltip(`${esc(s[2])} — ${price.toFixed(3)} €`);
+    m.bindPopup(() => popupHtml(s, fuelIdx), { maxWidth: 300 });
+    markers.push(m);
+  }
+  cluster.clearLayers();
+  cluster.addLayers(markers);
+  updateLegend(fuel);
+}
+
+// ---- Fuel selector + legend control (top-right) ----
+const panel = L.control({ position: "topright" });
+panel.onAdd = function () {
+  const div = L.DomUtil.create("div", "panel");
+  L.DomEvent.disableClickPropagation(div);
+  let html = "<h4>Carburant</h4>";
+  FUELS.forEach((f, i) => {
+    if (!STATS[f]) return;
+    html += `<label><input type="radio" name="fuel" value="${i}" ${i === 0 ? "checked" : ""}>` +
+      `${f} <span class="count">(${STATS[f].count})</span></label>`;
+  });
+  html += '<div class="legend-bar"></div><div class="legend-scale">' +
+    '<span id="lg-lo"></span><span id="lg-mid"></span><span id="lg-hi"></span></div>';
+  div.innerHTML = html;
+  div.querySelectorAll('input[name="fuel"]').forEach(inp =>
+    inp.addEventListener("change", e => render(+e.target.value)));
+  return div;
+};
+panel.addTo(map);
+
+function updateLegend(fuel) {
+  const st = STATS[fuel];
+  document.getElementById("lg-lo").textContent = st.p5.toFixed(2) + " €";
+  document.getElementById("lg-mid").textContent = st.median.toFixed(2) + " €";
+  document.getElementById("lg-hi").textContent = st.p95.toFixed(2) + " €";
+}
+
+render(0);
+
+// Register the service worker for offline use + installability (PWA).
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () =>
+    navigator.serviceWorker.register("/sw.js").catch(() => {}));
+}
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,2 @@
+requests>=2.31
+schedule>=1.2

scheduler.py

@@ -0,0 +1,50 @@
+"""Rebuild the static map twice a day, without serving it.
+
+Use this when you host the generated output/ directory elsewhere (static hosting,
+a CDN, GitHub Pages, etc.). To build *and* serve from one process — e.g. for a
+container or local preview — run `python app.py` instead.
+
+Usage:
+    python scheduler.py          # build now, then rebuild at 07:00 and 19:00
+    python scheduler.py --once   # build a single time and exit
+"""
+from __future__ import annotations
+
+import argparse
+import time
+import traceback
+
+import schedule
+
+from build_map import generate
+
+REFRESH_TIMES = ["07:00", "19:00"]
+
+
+def safe_generate() -> None:
+    try:
+        generate()
+    except Exception:
+        print("Map generation failed:")
+        traceback.print_exc()
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(description="Twice-daily fuel-price map rebuilder.")
+    parser.add_argument("--once", action="store_true", help="build once and exit")
+    args = parser.parse_args()
+
+    safe_generate()  # always start with a fresh map
+    if args.once:
+        return
+
+    for when in REFRESH_TIMES:
+        schedule.every().day.at(when).do(safe_generate)
+    print(f"Scheduled rebuilds at {', '.join(REFRESH_TIMES)} (local time).")
+    while True:
+        schedule.run_pending()
+        time.sleep(30)
+
+
+if __name__ == "__main__":
+    main()

static/manifest.webmanifest

@@ -0,0 +1,18 @@
+{
+  "name": "Prix des Carburants — France",
+  "short_name": "Carburants",
+  "description": "Carte interactive des prix des carburants en France, rafraîchie deux fois par jour.",
+  "lang": "fr",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#f5f5f5",
+  "theme_color": "#1a9850",
+  "categories": ["navigation", "travel", "utilities"],
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

static/sw.js

@@ -0,0 +1,98 @@
+/* Service worker: makes the map installable and usable offline.
+ * - App navigations are network-first (fresh prices when online), falling back
+ *   to the last cached page when offline.
+ * - The app shell, icons and CDN libraries are cached so the app boots offline.
+ * - Map tiles are cached with a bounded LRU-ish cap for offline revisits.
+ */
+const VERSION = "v1";
+const SHELL = "shell-" + VERSION;
+const RUNTIME = "runtime-" + VERSION;
+const TILES = "tiles-" + VERSION;
+const TILE_LIMIT = 300;
+
+const APP_SHELL = [
+  "/", "/index.html", "/manifest.webmanifest",
+  "/icon-192.png", "/icon-512.png",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(SHELL).then((c) => c.addAll(APP_SHELL)).then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys.filter((k) => ![SHELL, RUNTIME, TILES].includes(k)).map((k) => caches.delete(k))
+      )
+    ).then(() => self.clients.claim())
+  );
+});
+
+async function trimCache(name, max) {
+  const cache = await caches.open(name);
+  const keys = await cache.keys();
+  for (let i = 0; i < keys.length - max; i++) await cache.delete(keys[i]);
+}
+
+function cacheable(res) {
+  return res && (res.ok || res.type === "opaque");
+}
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  if (req.method !== "GET") return;
+  const url = new URL(req.url);
+
+  // App navigation: fresh page online, cached shell offline.
+  if (req.mode === "navigate") {
+    event.respondWith(
+      fetch(req)
+        .then((res) => {
+          const copy = res.clone();
+          caches.open(SHELL).then((c) => c.put("/index.html", copy));
+          return res;
+        })
+        .catch(() => caches.match("/index.html").then((r) => r || caches.match("/")))
+    );
+    return;
+  }
+
+  // Map tiles: network-first, bounded cache for offline revisits.
+  if (/basemaps\.cartocdn\.com$/.test(url.hostname)) {
+    event.respondWith(
+      fetch(req)
+        .then((res) => {
+          const copy = res.clone();
+          caches.open(TILES).then((c) => {
+            c.put(req, copy);
+            trimCache(TILES, TILE_LIMIT);
+          });
+          return res;
+        })
+        .catch(() => caches.match(req))
+    );
+    return;
+  }
+
+  // Same-origin assets + CDN libraries: cache-first, refresh in background.
+  if (url.origin === self.location.origin || url.hostname === "unpkg.com") {
+    event.respondWith(
+      caches.match(req).then((cached) => {
+        const network = fetch(req)
+          .then((res) => {
+            if (cacheable(res)) {
+              const copy = res.clone();
+              caches.open(RUNTIME).then((c) => c.put(req, copy));
+            }
+            return res;
+          })
+          .catch(() => cached);
+        return cached || network;
+      })
+    );
+  }
+  // Anything else (e.g. Nominatim geocoding) goes straight to the network.
+});