ISITECH/tcl-guessr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: drop ssr

Browse source
This commit is contained in:
uku 2024-10-22 17:08:42 +02:00
parent 4efa212d00
commit 3cdc8d3c96
Signed by: uku
SSH key fingerprint: SHA256:4P0aN6M8ajKukNi6aPOaX0LacanGYtlfjmN+m/sHY/o
2 changed files with 30 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/routes/+page.svelte
View file

@ -1,29 +1,26 @@
<script lang="ts">
import type { PageData } from "./$types";
import { page } from "$app/stores";
import { onMount } from "svelte";
import type { GeoJSONOptions } from "leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
const linesUrl =
"https://data.grandlyon.com/geoserver/sytral/ows?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=sytral:tcl_sytral.tcllignemf_2_0_0&outputFormat=application/json&SRSNAME=EPSG:4171&sortBy=gid";
export let data: PageData;
const lignes = data.lines;
const params = $page.url.searchParams;
let distance = +Infinity;
const center = L.latLng(45.75388713, 4.84715287);
let latlng = L.latLng(0, 0);
$: distance = Math.max(0, latlng.distanceTo(center) - 20);
$: points = 5000 * Math.exp(-distance / 750);
onMount(async () => {
const L = (await import("leaflet")).default;
const res = await fetch(linesUrl);
const lignes: GeoJSON.FeatureCollection = await res.json();
function createMap(node: HTMLElement) {
const bbox = lignes.bbox || [0, 0, 0, 0];
const centerLat = (bbox[1] + bbox[3]) / 2;
const centerLon = (bbox[0] + bbox[2]) / 2;
const map = L.map("map").setView([centerLat, centerLon], 13);
const params = $page.url.searchParams;
const map = L.map(node).setView([centerLat, centerLon], 13);
const mapSuffix = params.has("labels") ? "all" : "nolabels";
L.tileLayer(`https://basemaps.cartocdn.com/light_${mapSuffix}/{z}/{x}/{y}{r}.png`, {
@ -34,32 +31,29 @@
if (params.has("lines")) {
lignes.features.forEach((feature) => {
const options: GeoJSONOptions = {};
let color = "black";
if (feature.properties && feature.properties.couleur) {
options.style = {
color: "rgb(" + feature.properties.couleur.replaceAll(" ", ",") + ")",
};
color = "rgb(" + feature.properties.couleur.replaceAll(" ", ",") + ")";
}
L.geoJSON(feature, options).addTo(map);
L.geoJSON(feature, { style: { color } }).addTo(map);
});
}
const marker = L.marker([0, 0]);
map.on("click", (e) => {
marker.setLatLng(e.latlng).addTo(map);
// allow 20m of error
distance = Math.max(0, e.latlng.distanceTo([45.75388713, 4.84715287]) - 20);
latlng = e.latlng;
});
});
}
</script>
<div id="info">
<span>distance: {distance}, points: {points}</span>
</div>
<div id="map"></div>
<div id="map" use:createMap></div>
<style>
#info {

13
src/routes/+page.ts Normal file
View file

@ -0,0 +1,13 @@
import type { PageLoad } from "./$types";
const linesUrl =
"https://data.grandlyon.com/geoserver/sytral/ows?SERVICE=WFS&VERSION=2.0.0&request=GetFeature&typename=sytral:tcl_sytral.tcllignemf_2_0_0&outputFormat=application/json&SRSNAME=EPSG:4171&sortBy=gid";
export const load: PageLoad = async () => {
const res = await fetch(linesUrl);
const lines: GeoJSON.FeatureCollection = await res.json();
return { lines };
};
export const ssr = false;