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