fix: added support for stadia tiles API

Author: Tuvudel

.env.example

@@ -1,7 +1,9 @@
 VITE_SUPABASE_URL=
 VITE_SUPABASE_ANON_KEY=
+VITE_STADIA_API_KEY=
 # Example Supabase configuration
-# Uncomment and set your Supabase URL and Anon Key below
+# Uncomment and set your Supabase URL, Anon Key, and Stadia API key below
 # VITE_SUPABASE_URL=https://your-supabase-url.supabase.co
 # VITE_SUPABASE_ANON_KEY=your-anon-key
+# VITE_STADIA_API_KEY=your-stadia-api-key
 

.github/workflows/deploy-pages.yml

@@ -39,6 +39,7 @@ jobs:
         env:
           VITE_SUPABASE_URL: ${{ secrets.VITE_SUPABASE_URL }}
           VITE_SUPABASE_ANON_KEY: ${{ secrets.VITE_SUPABASE_ANON_KEY }}
+          VITE_STADIA_API_KEY: ${{ secrets.VITE_STADIA_API_KEY }}
 
       - name: SPA fallback for direct route loads
         run: cp dist/index.html dist/404.html

README.md

@@ -144,6 +144,12 @@ Local mode runs Supabase services in Docker containers on your machine.
 
 This repo includes a GitHub Pages workflow at `.github/workflows/deploy-pages.yml`.
 
+Set these in **Settings** -> **Secrets and variables** -> **Actions**:
+
+- `VITE_SUPABASE_URL`
+- `VITE_SUPABASE_ANON_KEY`
+- `VITE_STADIA_API_KEY`
+
 ## Database Management
 
 ### Test User Credentials

src/config.ts

@@ -1,9 +1,11 @@
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const stadiaApiKey = import.meta.env.VITE_STADIA_API_KEY;
 
-if (!supabaseAnonKey || !supabaseUrl) {
+if (!supabaseAnonKey || !supabaseUrl || !stadiaApiKey) {
   throw new Error("Missing required application configuration.");
 }
 
 export const SUPABASE_ANON_KEY = supabaseAnonKey;
 export const SUPABASE_URL = supabaseUrl;
+export const STADIA_API_KEY = stadiaApiKey;

src/pages/MapPage/MemorialSitesMapPage.tsx

@@ -9,6 +9,7 @@ import {
   MemorialFeatureType,
 } from "../../supabase/memorialSites";
 import supabase from "../../supabase";
+import { STADIA_API_KEY } from "../../config";
 import MemorialSiteForm from "./MemorialSiteForm";
 import localMemorialIconUrl from "../../assets/memorial-sites/local-memorial-site.png";
 import regionalMemorialIconUrl from "../../assets/memorial-sites/regional-memorial-site.png";
@@ -60,8 +61,10 @@ const MemorialSitesMapPage = () => {
     mapContainer.innerHTML = "";
 
     mapRef.current = L.map("map", { zoomControl: false }).setView([31.42, 34.49], 13);
-    L.tileLayer("https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg", {
+    L.tileLayer(`https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg?api_key=${STADIA_API_KEY}`, {
       maxZoom: 19,
+      attribution:
+        '&copy; <a href="https://stadiamaps.com/" target="_blank" rel="noopener noreferrer">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank" rel="noopener noreferrer">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">OpenStreetMap</a> contributors',
     }).addTo(mapRef.current);
 
     L.control.zoom({ position: "bottomright" }).addTo(mapRef.current);

src/pages/MapPage/PinkLineMapPage.tsx

@@ -7,9 +7,13 @@ import { createPinkLineNode, loadPinkLineNodes, submitPinkLineRoute, deletePinkL
 import { optimizeRoute } from "../../utils/routeOptimizer";
 import { parseDefaultLinePaths, buildIntegratedRoute } from "../../utils/pinkLineRoute";
 import supabase from "../../supabase";
+import { STADIA_API_KEY } from "../../config";
 import PinkLineNodeForm from "./PinkLineNodeForm";
 
-const DEFAULT_PINK_LINE_URL = `${import.meta.env.BASE_URL}line-layer/pink-line-wgs84.geojson`;
+const APP_BASE_URL = import.meta.env.BASE_URL.endsWith("/")
+  ? import.meta.env.BASE_URL
+  : `${import.meta.env.BASE_URL}/`;
+const DEFAULT_PINK_LINE_URL = `${APP_BASE_URL}line-layer/pink-line-wgs84.geojson`;
 
 interface PinkLineNode {
   id: string;
@@ -74,9 +78,11 @@ const PinkLineMapPage = () => {
     mapRef.current = L.map("map").setView([31.42, 34.49], 13);
 
       L.tileLayer(
-        "https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg",
+        `https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg?api_key=${STADIA_API_KEY}`,
         {
           maxZoom: 19,
+          attribution:
+            '&copy; <a href="https://stadiamaps.com/" target="_blank" rel="noopener noreferrer">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank" rel="noopener noreferrer">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">OpenStreetMap</a> contributors',
         }
       ).addTo(mapRef.current);
 
@@ -120,7 +126,12 @@ const PinkLineMapPage = () => {
       new customControls({ position: "topleft" }).addTo(mapRef.current);
 
       fetch(DEFAULT_PINK_LINE_URL)
-        .then((res) => res.json())
+        .then((res) => {
+          if (!res.ok) {
+            throw new Error(`Failed to fetch pink line GeoJSON (${res.status})`);
+          }
+          return res.json();
+        })
         .then((geojson: GeoJSON.FeatureCollection) => {
           if (!mapRef.current) return;
           defaultLinePathsRef.current = parseDefaultLinePaths(geojson);

src/pages/MapPage/hooks/useMap.ts

@@ -4,6 +4,7 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-draw/dist/leaflet.draw.css";
 import "leaflet-draw";
 import "../../../types/leaflet.d.ts";
+import { STADIA_API_KEY } from "../../../config";
 import {
   createGeometry,
   deleteGeometry,
@@ -55,9 +56,11 @@ export const useMap = ({ center, enabled = true, onShapeCreated, isHebrew }: Use
     mapRef.current = L.map("map").setView(center, 16);
 
       L.tileLayer(
-        "https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg",
+        `https://tiles.stadiamaps.com/tiles/alidade_satellite/{z}/{x}/{y}{r}.jpg?api_key=${STADIA_API_KEY}`,
         {
           maxZoom: 19,
+          attribution:
+            '&copy; <a href="https://stadiamaps.com/" target="_blank" rel="noopener noreferrer">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank" rel="noopener noreferrer">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">OpenStreetMap</a> contributors',
         }
       ).addTo(mapRef.current);