get stops from trainstatus api and specify api with env

README.md

@@ -1,5 +1,5 @@
 # Realtime NYCT Bus Map
 
-This data mainly comes from the <https://trainstat.us> API
+This data comes from the <https://trainstat.us> API
 
 **Website is currently offline, will be back up soon**

data/main.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 28,
+   "execution_count": 3,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -18,23 +18,24 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# df: gpd.GeoDataFrame = gpd.read_file(\"http://localhost:3055/bus/routes/geojson\")\n",
+    "# df: gpd.GeoDataFrame = gpd.read_file(\"http://localhost:3055/bus/routes/geojson\")\\\n",
+    "# df: gpd.GeoDataFrame = gpd.read_file(\"https://trainstat.us/api/bus/routes/geojson\")\n",
     "df: gpd.GeoDataFrame = gpd.read_file(\"routes.geojson\")"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 5,
    "metadata": {},
    "outputs": [],
    "source": [
-    "df_cl: gpd.GeoDataFrame = gpd.read_file(\"CSCL.geojson\")\n",
-    "# df_cl = gpd.read_file(\"https://data.cityofnewyork.us/api/geospatial/exjm-f27b?method=export&format=GeoJSON\")"
+    "# df_cl: gpd.GeoDataFrame = gpd.read_file(\"CSCL.geojson\")\n",
+    "df_cl = gpd.read_file(\"https://data.cityofnewyork.us/api/geospatial/exjm-f27b?method=export&format=GeoJSON\")"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 5,
+   "execution_count": 6,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -44,7 +45,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 27,
+   "execution_count": 7,
    "metadata": {},
    "outputs": [
     {
@@ -109,7 +110,7 @@
        "269  MULTILINESTRING ((990063.326 211112.618, 99001...  "
       ]
      },
-     "execution_count": 27,
+     "execution_count": 7,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -121,14 +122,16 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 46,
+   "execution_count": 8,
    "metadata": {},
    "outputs": [
     {
      "name": "stderr",
      "output_type": "stream",
      "text": [
-      " 98%|█████████▊| 3080/3136 [00:00<00:00, 8206.42it/s]\n"
+      "/tmp/ipykernel_57075/2133425740.py:1: FutureWarning: Currently, index_parts defaults to True, but in the future, it will default to False to be consistent with Pandas. Use `index_parts=True` to keep the current behavior and True/False to silence the warning.\n",
+      "  df_exploded = df_filtered.explode().reset_index(drop=True)\n",
+      " 98%|█████████▊| 3080/3136 [00:00<00:00, 20372.13it/s]\n"
      ]
     }
    ],
@@ -383,7 +386,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.11.8"
+   "version": "3.12.4"
   }
  },
  "nbformat": 4,

data/snap_routes.py

@@ -23,7 +23,7 @@
     # Find the closest line in df_cl
     closest_line = df_cl.geometry.distance(line).idxmin()
     snapped_line = snap(
-        line, df_cl.geometry[closest_line], tolerance=10
+        line, df_cl.geometry[closest_line], tolerance=50
     )  # Adjust tolerance as needed
     snapped_geometries.append(snapped_line)
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bus-map",
-	"version": "0.0.1",
+	"version": "0.1.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/lib/Routes.svelte

@@ -14,7 +14,6 @@
 	let clicked_feature: Route | null = null;
 </script>
 
-<!-- data={geojson} -->
 <GeoJSON id="routes" data={geojson}>
 	<!-- TODO: make sure direction is correct -->
 	<LineLayer

src/lib/Stops.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { GeoJSON, Popup, SymbolLayer, CircleLayer } from 'svelte-maplibre';
 
-	// export let geojson;
-	// TODO: get stops geojson from api
+	export let geojson;
 
 	interface Stop {
 		direction: string;
@@ -14,7 +13,7 @@
 	let clicked_feature: Stop | null = null;
 </script>
 
-<GeoJSON id="stops" data="/stops.geojson">
+<GeoJSON id="stops" data={geojson}>
 	<CircleLayer
 		on:click={(e) => (clicked_feature = e.detail.features[0].properties)}
 		hoverCursor="pointer"

src/lib/Trips.svelte

@@ -26,9 +26,17 @@
 		}}
 	>
 		<Popup>
-			<div class={`bg-slate-800 p-2 max-w-[70vw]`}>
-				<h1 class="font-bold text-lg">{clicked_feature?.route_id}</h1>
-			</div>
+			{#if clicked_feature}
+				<div class={`bg-slate-800 p-2 max-w-[70vw]`}>
+					<h1 class="font-bold text-lg">{clicked_feature?.route_id}</h1>
+					{#if clicked_feature.passengers && clicked_feature.capacity}
+						<p>
+							<span class="font-bold">passengers</span>: {clicked_feature.passengers} / {clicked_feature.capacity}
+						</p>
+					{/if}
+					<p></p>
+				</div>
+			{/if}
 		</Popup>
 	</SymbolLayer>
 </GeoJSON>

src/routes/+layout.ts

@@ -1,4 +1,11 @@
+import { PUBLIC_API_URL } from '$env/static/public';
 import type { LayoutLoad } from './$types';
+
 export const load: LayoutLoad = async ({ fetch }) => {
-	return { routes: await (await fetch('/api/bus/routes/geojson')).json() };
+	const routes_promise = fetch(`${PUBLIC_API_URL}/bus/routes/geojson`).then((res) => res.json());
+	const stops_promise = fetch(`${PUBLIC_API_URL}/bus/stops/geojson`).then((res) => res.json());
+
+	const [routes, stops] = await Promise.all([routes_promise, stops_promise]);
+
+	return { routes, stops };
 };

src/routes/+page.svelte

@@ -66,7 +66,7 @@
 	/>
 
 	<Routes geojson={$page.data.routes} />
-	<Stops />
+	<Stops geojson={$page.data.stops} />
 	<Trips geojson={$page.data.trips} />
 </MapLibre>
 

src/routes/+page.ts

@@ -1,9 +1,8 @@
+import { PUBLIC_API_URL } from '$env/static/public';
 import type { PageLoad } from './$types';
 
-// load data here first for SSR benefits (i think)
 export const load: PageLoad = async ({ fetch }) => {
-	const trips_promise = fetch('/api/bus/trips/geojson').then((res) => res.json());
-	// const routes_promise = fetch('/api/bus/routes/geojson').then((res) => res.json());
+	const trips_promise = fetch(`${PUBLIC_API_URL}/bus/trips/geojson`).then((res) => res.json());
 
 	const [trips] = await Promise.all([trips_promise]);