Add map with gates

README.md

@@ -1,4 +1,4 @@
-![](./src/static/logo.svg)
+![](./src/static/images/logo.svg)
 
 # Lagomare Gates
 
@@ -161,6 +161,16 @@ All settings are read from environment variables (centralised in `src/core/confi
 |---|---|---|
 | `DATABASE_URL` | `sqlite:///data/gates.db` | SQLAlchemy database URL. |
 
+### Map (home location)
+
+| Variable | Default | Description |
+|---|---|---|
+| `HOME_LAT` | *(none)* | WGS-84 latitude of the home/property marker shown on the frontend map. |
+| `HOME_LON` | *(none)* | WGS-84 longitude of the home/property marker. |
+| `HOME_NAME` | `Home` | Display name for the home marker popup. |
+
+If `HOME_LAT` and `HOME_LON` are both set, the map is always visible. If only gates have coordinates (set per-gate in the admin panel), the map is shown only when at least one gate has a location.
+
 ### Network / reverse proxy
 
 | Variable | Default | Description |

src/core/config.py

@@ -55,3 +55,9 @@ ADMIN_PASSWORD: Optional[str] = os.environ.get("ADMIN_PASSWORD") or None
 
 # ── Server ────────────────────────────────────────────────────────────────────
 APP_PORT: int = int(os.environ.get("APP_PORT", 8000))
+
+# ── Map / home location ───────────────────────────────────────────────────────
+# Optional WGS-84 coordinates for the "home" marker shown on the frontend map.
+HOME_LAT: Optional[float] = float(os.environ["HOME_LAT"]) if os.environ.get("HOME_LAT") else None
+HOME_LON: Optional[float] = float(os.environ["HOME_LON"]) if os.environ.get("HOME_LON") else None
+HOME_NAME: str = os.environ.get("HOME_NAME", "Home")

src/core/database.py

@@ -2,7 +2,7 @@ import os
 from datetime import datetime
 from typing import Optional
 
-from sqlalchemy import Boolean, String, Text, create_engine
+from sqlalchemy import Boolean, Double, String, Text, create_engine
 from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column, sessionmaker
 
 from core.config import DATA_DIR, DATABASE_URL
@@ -24,6 +24,8 @@ class GateDB(Base):
     avconnect_macro_id: Mapped[str] = mapped_column(String, nullable=False)  # AVConnect macro ID
     status: Mapped[str] = mapped_column(String, default="enabled")        # 'enabled' | 'disabled'
     group_name: Mapped[Optional[str]] = mapped_column(String, nullable=True)  # display group label
+    lat: Mapped[Optional[float]] = mapped_column(Double, nullable=True)    # WGS-84 latitude
+    lon: Mapped[Optional[float]] = mapped_column(Double, nullable=True)    # WGS-84 longitude
 
 
 class ApiCredential(Base):

src/core/schemas.py

@@ -84,6 +84,8 @@ class GateResponse(BaseModel):
     avconnect_macro_id: str
     status: str
     group_name: Optional[str] = None
+    lat: Optional[float] = None
+    lon: Optional[float] = None
 
 
 class GatePublicResponse(BaseModel):
@@ -93,6 +95,8 @@ class GatePublicResponse(BaseModel):
     name: str
     gate_type: str
     group_name: Optional[str] = None
+    lat: Optional[float] = None
+    lon: Optional[float] = None
 
 
 class GateCreate(BaseModel):
@@ -101,6 +105,8 @@ class GateCreate(BaseModel):
     avconnect_macro_id: str
     status: str = "enabled"
     group_name: Optional[str] = None
+    lat: Optional[float] = None
+    lon: Optional[float] = None
 
 
 # ── AVConnect Credentials ─────────────────────────────────────────────────────

src/main.py

@@ -14,7 +14,7 @@ from uvicorn.middleware.proxy_headers import ProxyHeadersMiddleware
 # Ensure src/ root is importable for models/services/routers
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
 
-from core.config import ADMIN_PASSWORD, ADMIN_USERNAME, APP_PORT, CORS_ORIGINS, LOG_FILE, LOG_LEVEL, TRUSTED_PROXY_IPS
+from core.config import ADMIN_PASSWORD, ADMIN_USERNAME, APP_PORT, CORS_ORIGINS, HOME_LAT, HOME_LON, HOME_NAME, LOG_FILE, LOG_LEVEL, TRUSTED_PROXY_IPS
 
 # ── Logging ───────────────────────────────────────────────────────────────────
 _log_fmt = logging.Formatter(
@@ -88,7 +88,8 @@ async def _security_headers(request: Request, call_next) -> Response:
     response.headers["X-Frame-Options"] = "DENY"
     response.headers["Referrer-Policy"] = "strict-origin-when-cross-origin"
     response.headers["Content-Security-Policy"] = (
-        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:"
+        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';"
+        " img-src 'self' data: blob: https://*.tile.openstreetmap.org"
     )
     return response
 
@@ -101,11 +102,21 @@ app.include_router(admins_router)
 app.include_router(stats_router)
 app.include_router(telegram_router)
 
+
+@app.get("/api/site-config", include_in_schema=False)
+async def _site_config():
+    """Return public site configuration used by the frontend (e.g. home map coordinates)."""
+    return {
+        "home": {"name": HOME_NAME, "lat": HOME_LAT, "lon": HOME_LON}
+        if HOME_LAT is not None and HOME_LON is not None
+        else None
+    }
+
 # ── Static / frontend ─────────────────────────────────────────────────────────
 @app.get("/favicon.ico", include_in_schema=False)
 async def _serve_favicon() -> FileResponse:
     return FileResponse(
-        os.path.join(_STATIC_DIR, "logo.svg"), media_type="image/svg+xml"
+        os.path.join(_STATIC_DIR, "images", "logo.svg"), media_type="image/svg+xml"
     )
 
 

src/static/admin.html

@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="#0f0f1a" />
   <title>Lagomare Gates - Admin</title>
-  <link rel="icon" type="image/svg+xml" href="/static/logo.svg" />
+  <link rel="icon" type="image/svg+xml" href="/static/images/logo.svg" />
   <link rel="stylesheet" href="/static/style.css" />
 
   <style>
@@ -460,6 +460,16 @@
             <option value="disabled">Disabled</option>
           </select>
         </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
+          <div class="field">
+            <label for="gate-lat">Latitude <span style="color:var(--text-muted);font-weight:400">(optional)</span></label>
+            <input id="gate-lat" type="number" step="any" placeholder="e.g. 45.4654219" />
+          </div>
+          <div class="field">
+            <label for="gate-lon">Longitude <span style="color:var(--text-muted);font-weight:400">(optional)</span></label>
+            <input id="gate-lon" type="number" step="any" placeholder="e.g. 9.1859347" />
+          </div>
+        </div>
         <p id="gate-error" class="error-msg hidden"></p>
         <div class="modal-actions">
           <button type="button" id="gate-cancel" class="btn btn-ghost">Cancel</button>

src/static/admin.js

@@ -483,6 +483,8 @@ function openGateModal(gate = null) {
   document.getElementById("gate-type").value = gate ? gate.gate_type : "car";
   document.getElementById("gate-avconnect-macro-id").value = gate ? gate.avconnect_macro_id : "";
   document.getElementById("gate-status").value = gate ? gate.status : "enabled";
+  document.getElementById("gate-lat").value = (gate && gate.lat != null) ? gate.lat : "";
+  document.getElementById("gate-lon").value = (gate && gate.lon != null) ? gate.lon : "";
   document.getElementById("gate-error").classList.add("hidden");
   // Populate group suggestions from existing gates
   const dl = document.getElementById("gate-group-list");
@@ -509,6 +511,8 @@ document.getElementById("gate-form").addEventListener("submit", async e => {
     avconnect_macro_id: document.getElementById("gate-avconnect-macro-id").value.trim(),
     status: document.getElementById("gate-status").value,
     group_name: document.getElementById("gate-group-name").value.trim() || null,
+    lat: document.getElementById("gate-lat").value !== "" ? parseFloat(document.getElementById("gate-lat").value) : null,
+    lon: document.getElementById("gate-lon").value !== "" ? parseFloat(document.getElementById("gate-lon").value) : null,
   };
   const errEl = document.getElementById("gate-error");
   errEl.classList.add("hidden");

src/static/app.js

@@ -1,5 +1,12 @@
 /* app.js - Lagomare Gates frontend */
 
+// ── Leaflet icon fix (assets served from /static/) ───────────────────────────
+L.Icon.Default.mergeOptions({
+  iconUrl:       "/static/images/marker-icon.png",
+  iconRetinaUrl: "/static/images/marker-icon-2x.png",
+  shadowUrl:     "/static/images/marker-shadow.png",
+});
+
 // ── Token helpers ─────────────────────────────────────────────────────────────
 const TOKEN_KEY = "lg_keypass_token";
 
@@ -49,6 +56,95 @@ function showGatesView() {
   document.getElementById("gates-view").classList.remove("hidden");
 }
 
+// ── Map ───────────────────────────────────────────────────────────────────────
+let _map = null;
+let _mapMarkers = [];
+let _homeMarker = null;
+
+const _homeIcon = L.divIcon({
+  className: "",
+  html: '<div style="font-size:1.6rem;line-height:1;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))">🏠</div>',
+  iconSize: [28, 28],
+  iconAnchor: [14, 24],
+  popupAnchor: [0, -24],
+});
+const _gateIcon = () => L.icon({
+  iconUrl: "/static/images/gate.svg",
+  iconSize: [36, 36],
+  iconAnchor: [18, 36],
+  popupAnchor: [0, -38],
+});
+
+async function _ensureMapReady() {
+  if (_map) return;
+  let siteConfig = null;
+  try { siteConfig = await fetch("/api/site-config").then(r => r.json()); } catch { /* ignore */ }
+  _map = L.map("map", { zoomControl: true });
+  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    maxZoom: 19,
+  }).addTo(_map);
+  if (siteConfig && siteConfig.home) {
+    _homeMarker = L.marker([siteConfig.home.lat, siteConfig.home.lon], { icon: _homeIcon })
+      .bindPopup(`<div style="min-width:140px">
+        <strong>${siteConfig.home.name}</strong><br>
+        <a href="https://www.google.com/maps/dir/?api=1&destination=${siteConfig.home.lat},${siteConfig.home.lon}"
+           target="_blank" rel="noopener"
+           style="display:inline-block;margin-top:.5em;font-size:.85em;text-decoration:underline">
+          Get directions
+        </a>
+      </div>`)
+      .addTo(_map);
+  }
+}
+
+function _fitMap() {
+  if (!_map) return;
+  const bounds = [];
+  if (_homeMarker) { const ll = _homeMarker.getLatLng(); bounds.push([ll.lat, ll.lng]); }
+  _mapMarkers.forEach(m => { const ll = m.getLatLng(); bounds.push([ll.lat, ll.lng]); });
+  if (bounds.length === 1) _map.setView(bounds[0], 16);
+  else if (bounds.length > 1) _map.fitBounds(bounds, { padding: [32, 32], maxZoom: 17 });
+}
+
+async function updateMap(gates) {
+  await _ensureMapReady();
+  const gatesWithCoords = gates.filter(g => g.lat != null && g.lon != null);
+  if (!_homeMarker && gatesWithCoords.length === 0) return; // nothing to put on the map
+  document.getElementById("map-btn").classList.remove("hidden");
+  _mapMarkers.forEach(m => m.remove());
+  _mapMarkers = [];
+  for (const gate of gatesWithCoords) {
+    const popup = L.popup().setContent(
+      `<div style="min-width:140px">
+        <strong>${gate.name}</strong><br>
+        <em style="font-size:.85em;color:#666">${gate.gate_type === "car" ? "Car gate" : "Pedestrian gate"}</em><br>
+        <a href="https://www.google.com/maps/dir/?api=1&destination=${gate.lat},${gate.lon}"
+           target="_blank" rel="noopener"
+           style="display:inline-block;margin-top:.5em;font-size:.85em;text-decoration:underline">
+          Get directions
+        </a>
+      </div>`
+    );
+    const marker = L.marker([gate.lat, gate.lon], { icon: _gateIcon(gate.gate_type) })
+      .bindPopup(popup)
+      .addTo(_map);
+    _mapMarkers.push(marker);
+  }
+  _fitMap();
+}
+
+document.getElementById("map-btn").addEventListener("click", () => {
+  document.getElementById("map-modal").classList.remove("hidden");
+  if (_map) setTimeout(() => { _map.invalidateSize(); _fitMap(); }, 50);
+});
+document.getElementById("map-close").addEventListener("click", () => {
+  document.getElementById("map-modal").classList.add("hidden");
+});
+document.getElementById("map-modal").addEventListener("click", e => {
+  if (e.target === e.currentTarget) document.getElementById("map-modal").classList.add("hidden");
+});
+
 // ── Gate rendering ────────────────────────────────────────────────────────────
 function renderGates(gates) {
   const grid = document.getElementById("gates-grid");
@@ -111,6 +207,7 @@ async function loadGates() {
   try {
     const gates = await apiFetch("GET", "/api/gates");
     renderGates(gates);
+    updateMap(gates);
   } catch (e) {
     document.getElementById("loading-gates").textContent = e.message;
     document.getElementById("loading-gates").classList.remove("hidden");

src/static/images/gate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6V11H7V7H5V11H3V9H1V21H3V19H5V21H7V19H9V21H11V19H13V21H15V19H17V21H19V19H21V21H23V9H21V11H19V7H17V11H15V6H13V11H11V6H9M3 13H5V17H3V13M7 13H9V17H7V13M11 13H13V17H11V13M15 13H17V17H15V13M19 13H21V17H19V13Z" /></svg>

src/static/images/map.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15,19L9,16.89V5L15,7.11M20.5,3C20.44,3 20.39,3 20.34,3L15,5.1L9,3L3.36,4.9C3.15,4.97 3,5.15 3,5.38V20.5A0.5,0.5 0 0,0 3.5,21C3.55,21 3.61,21 3.66,20.97L9,18.9L15,21L20.64,19.1C20.85,19 21,18.85 21,18.62V3.5A0.5,0.5 0 0,0 20.5,3Z" /></svg>

src/static/index.html

@@ -8,9 +8,10 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <title>Lagomare Gates</title>
   <link rel="manifest" href="/manifest.json" />
-  <link rel="icon" type="image/svg+xml" href="/static/logo.svg" />
+  <link rel="icon" type="image/svg+xml" href="/static/images/logo.svg" />
-  <link rel="apple-touch-icon" href="/static/mobile_icon.png" />
+  <link rel="apple-touch-icon" href="/static/images/mobile_icon.png" />
   <link rel="stylesheet" href="/static/style.css" />
+  <link rel="stylesheet" href="/static/leaflet.css" />
 
   <style>
     /* ── Login view ──────────────────────────────────────────────────────── */
@@ -90,13 +91,31 @@
       justify-content: center;
       color: var(--text-muted);
     }
+
+    /* ── Map modal ─────────────────────────────────────────────────────── */
+    #map-modal .modal {
+      width: min(96vw, 700px);
+      padding: 0;
+      overflow: hidden;
+    }
+    #map-modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: .85rem 1.1rem;
+      border-bottom: 1px solid var(--border);
+    }
+    #map-modal-header h3 { font-size: 1rem; font-weight: 700; }
+    #map { height: min(60vh, 480px); }
+    /* Fix Leaflet default icon paths */
+    .leaflet-default-icon-path { background-image: url(/static/images/marker-icon.png); }
   </style>
 </head>
 <body>
 
   <!-- ── Login view ──────────────────────────────────────────────────────── -->
   <div id="login-view">
-    <img src="/static/logo.svg" alt="Lagomare" style="width:72px;height:72px;object-fit:contain;margin-bottom:.5rem" />
+    <img src="/static/images/logo.svg" alt="Lagomare" style="width:72px;height:72px;object-fit:contain;margin-bottom:.5rem" />
     <h1>Lagomare Gates</h1>
     <div class="card" style="margin-top:2rem">
       <form id="login-form">
@@ -125,17 +144,31 @@
   <div id="gates-view" class="hidden">
     <header class="app-header">
       <div style="display:flex;align-items:center;gap:.75rem">
-        <img src="/static/logo.svg" alt="" style="width:50px;height:50px;object-fit:contain;flex-shrink:0" />
+        <img src="/static/images/logo.svg" alt="" style="width:50px;height:50px;object-fit:contain;flex-shrink:0" />
         <div class="app-header h2">Lagomare Gates</div>
       </div>
-      <button id="logout-btn" class="btn btn-ghost" style="font-size:.85rem;padding:.5rem 1rem">
+      <div style="display:flex;align-items:center;gap:.5rem">
-        Logout
+        <button id="map-btn" class="btn btn-ghost hidden" style="padding:.4rem .6rem;line-height:0" aria-label="Show map">
-      </button>
+          <img src="/static/images/map.svg" alt="Map" style="width:22px;height:22px;filter:invert(1)" />
+        </button>
+        <button id="logout-btn" class="btn btn-ghost" style="font-size:.85rem;padding:.5rem 1rem">Logout</button>
+      </div>
     </header>
     <div id="loading-gates">Loading gates…</div>
     <div id="gates-grid" class="hidden"></div>
   </div>
 
+  <!-- ── Map modal ──────────────────────────────────────────────────────── -->
+  <div id="map-modal" class="modal-backdrop hidden">
+    <div class="modal">
+      <div id="map-modal-header">
+        <h3>Map</h3>
+        <button id="map-close" class="btn btn-ghost" style="padding:.35rem .8rem;font-size:.85rem">✕</button>
+      </div>
+      <div id="map"></div>
+    </div>
+  </div>
+
   <!-- ── Toast ───────────────────────────────────────────────────────────── -->
   <div id="toast" class="toast hidden" aria-live="assertive"></div>
 
@@ -154,7 +187,7 @@
   <!-- ── PWA install banner ──────────────────────────────────────────────── -->
   <div id="install-banner" class="install-banner hidden" role="banner" aria-label="Install app">
     <div class="install-banner-body">
-      <img src="/static/logo.svg" alt="" class="install-banner-icon" />
+      <img src="/static/images/logo.svg" alt="" class="install-banner-icon" />
       <div class="install-banner-text">
         <strong>Add to Home Screen</strong>
         <span>Install Lagomare Gates for quick access</span>
@@ -166,6 +199,7 @@
     </div>
   </div>
 
+  <script src="/static/leaflet.js"></script>
   <script src="/static/app.js"></script>
 </body>
 </html>

src/static/leaflet.css

@@ -0,0 +1,661 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-attribution-flag {
+	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}

src/static/manifest.json

@@ -10,7 +10,7 @@
   "theme_color": "#018133ff",
   "icons": [
     {
-      "src": "/static/mobile_icon.png",
+      "src": "/static/images/mobile_icon.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "any maskable"

src/static/sw.js

@@ -1,6 +1,6 @@
 /* Service worker - Lagomare Gates */
 const CACHE = "lagomare-gates-v1";
-const PRECACHE = ["/static/style.css", "/static/app.js", "/static/logo.svg", "/static/mobile_icon.png", "/manifest.json"];
+const PRECACHE = ["/static/style.css", "/static/app.js", "/static/images/logo.svg", "/static/images/mobile_icon.png", "/manifest.json"];
 
 self.addEventListener("install", event => {
   event.waitUntil(