Mirrors/regenbogenkarte
2
0
Fork 0
mirror of https://github.com/Queer-Lexikon/regenbogenkarte synced 2024-09-19 22:01:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Django backend preparation (#147)

Browse source 
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>
This commit is contained in:
Zora Franke 2024-06-29 16:02:20 +02:00 committed by GitHub
parent b99f33b60d
commit 28cb5f0bf0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
main.ts
View file

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

18
ts/data.ts Normal file
View file

@ -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;
};

3
ts/env.d.ts vendored
View file

@ -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;
}

5
ts/map.ts
View file

@ -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);