Django backend preparation (#147)

This prepares the data fetching for the upcoming Django backend.
It is made in a backwards-compatible way to ensure no breakage
of the existing map.

Co-authored-by: Zora Franke <zora@zorafranke.de>

main.ts

@@ -7,8 +7,8 @@ import { setupLegend } from "./ts/legend";
 import { setupEmergencyButton, setupResetButton, setupHamburgerButton } from "./ts/buttons";
 import { addGoatCounter } from "./ts/goatcounter";
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
-	initializeMap();
+	await initializeMap();
 	initializeForms();
 	setupInfoButton();
 	setupLegend();

ts/data.ts

@@ -0,0 +1,18 @@
+import data from "../data/orgas.json";
+
+export const loadJSON = async () => {
+	if (!import.meta.env.VITE_QUEER_LEXIKON_BACKEND_URL) {
+		console.warn("The backend URL is not defined, using compiled JSON as fallback.");
+		return data;
+	}
+
+	const resp = await fetch(import.meta.env.VITE_QUEER_LEXIKON_BACKEND_URL);
+
+	if (!resp.ok) {
+		console.warn("Loading the data from the backend failed, using compiled JSON as fallback.");
+		return data;
+	}
+
+	const json = await resp.json();
+	return json;
+};

ts/env.d.ts

@@ -9,4 +9,7 @@ interface ImportMetaEnv {
 	// Although it's actually a boolean, all environment variables are strings, so we
 	// type it as string here as well.
 	readonly VITE_QUEER_LEXIKON_PRIVATE?: string;
+
+	// The backend URL for the upcoming django backend.
+	readonly VITE_QUEER_LEXIKON_BACKEND_URL?: string;
 }

ts/map.ts

@@ -2,12 +2,12 @@ import L from "leaflet";
 import "leaflet.markercluster";
 
 import "leaflet/dist/leaflet.css";
-import data from "../data/orgas.json";
 
 import defaultImage from "../assets/default.svg";
 import limitedImage from "../assets/limited.svg";
 import supportImage from "../assets/support.svg";
 import { DEFAULT_ZOOM_LEVEL, ICON_SIZE, MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from "./config";
+import { loadJSON as loadData } from "./data";
 
 type Organisation = {
 	country: string;
@@ -28,7 +28,7 @@ type Organisation = {
 };
 
 let map: L.Map;
-export function initializeMap() {
+export async function initializeMap() {
 	map = L.map("map").setView([51.351, 10.454], MIN_ZOOM_LEVEL); // focus on germany
 	document.querySelectorAll(".locate-button").forEach((item) => {
 		item.addEventListener("click", (event) => {
@@ -73,6 +73,7 @@ export function initializeMap() {
 			});
 		},
 	});
+	const data = await loadData();
 	data.forEach((row) => {
 		const marker = createMarker(row);
 		if (marker) markers.addLayer(marker);