inital collisions

web/package.json

@@ -44,8 +44,8 @@
     ]
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.0",
-    "vite": "^5.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

web/src/components/navBar.tsx

@@ -10,6 +10,10 @@ class NavBar extends React.Component<{}, {}> {
           <div className={styles.beta}>Beta</div>
         </Link>
 
+        {/* <Link className={styles.link} to="/collisions">
+          Collisions
+        </Link> */}
+
         <Link className={styles.link} to="/counters">
           Counters
         </Link>

web/src/data/bham_junctions.json

@@ -0,0 +1 @@
+[{"junction_index": 8224, "junction_id": 111626030, "lat": 52.4662763, "lon": -1.8474239, "score": 3.12}, {"junction_index": 604, "junction_id": 203577, "lat": 52.4452046, "lon": -1.9342753, "score": 3.12}, {"junction_index": 17044, "junction_id": 303102105, "lat": 52.5022619, "lon": -1.9291351, "score": 3.12}, {"junction_index": 9218, "junction_id": 173260292, "lat": 52.4445922, "lon": -1.901631, "score": 3.4800000000000004}, {"junction_index": 2124, "junction_id": 221377, "lat": 52.5313761, "lon": -1.8581834, "score": 3.06}, {"junction_index": 2151, "junction_id": 221483, "lat": 52.4649629, "lon": -1.8991733, "score": 3.12}, {"junction_index": 2189, "junction_id": 221778, "lat": 52.4722676, "lon": -1.9217089, "score": 3.24}, {"junction_index": 3135, "junction_id": 275660, "lat": 52.4930384, "lon": -1.8317097, "score": 3.06}, {"junction_index": 13148, "junction_id": 259646624, "lat": 52.488355, "lon": -1.8464804, "score": 3.12}, {"junction_index": 21356, "junction_id": 871901651, "lat": 52.4718744, "lon": -1.9138723, "score": 3.12}, {"junction_index": 5538, "junction_id": 25480017, "lat": 52.4902342, "lon": -1.8158525, "score": 3.06}, {"junction_index": 6278, "junction_id": 31713229, "lat": 52.4442163, "lon": -1.8345436, "score": 4.12}, {"junction_index": 14539, "junction_id": 269961652, "lat": 52.4650049, "lon": -1.8918398, "score": 3.06}, {"junction_index": 15129, "junction_id": 273113477, "lat": 52.4813431, "lon": -1.8956895, "score": 4.239999999999999}, {"junction_index": 7315, "junction_id": 60591847, "lat": 52.4482745, "lon": -1.8879969, "score": 3.3600000000000003}, {"junction_index": 8151, "junction_id": 107291551, "lat": 52.4596615, "lon": -1.8719026, "score": 3.12}]

web/src/index.tsx

@@ -9,6 +9,7 @@ import About from "./pages/about";
 import Counter from "./components/counter";
 import Counters from "./pages/counters";
 import Main from "./pages/main";
+import Collisions from "./pages/collisions";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -35,6 +36,10 @@ const router = createBrowserRouter([
         path: "counter/:idenitiy",
         element: <Counter />,
       },
+      {
+        path: "collisions",
+        element: <Collisions />,
+      },
       {
         path: "/about",
         element: <About></About>,

web/src/pages/collisions.tsx

@@ -0,0 +1,121 @@
+import maplibregl from "maplibre-gl";
+import { useState, useRef } from "react";
+import styles from "../css_modules/map.module.css";
+import { useEffect } from "react";
+
+import collisions from '../data/bham_collisions.json';
+import junctions from '../data/bham_junctions.json';
+
+import { collisions2geojson, junctions2geojson } from "../utils/utils";
+
+function Collisions() {
+
+    const map = useRef<any>(null);
+    const mapContainer = useRef<any>(null);
+    const [lat] = useState(52.452907468939145);
+    const [lng] = useState(-1.827910517089181);
+    const [zoom] = useState(9);
+    const [API_KEY] = useState("2pdGAnnIuClGHUCta2TU");
+
+    useEffect(() => {
+      if (map.current) return; //stops map from intializing more than once
+
+      map.current = new maplibregl.Map({
+        container: mapContainer.current,
+        style: `https://api.maptiler.com/maps/streets-v2/style.json?key=${API_KEY}`,
+        center: [lng, lat],
+        zoom: zoom,
+      });
+
+      map.current.on("load", function () {
+        map.current.addControl(
+          new maplibregl.GeolocateControl({
+            positionOptions: {
+              enableHighAccuracy: true,
+            },
+            trackUserLocation: true,
+          })
+        );
+
+        map.current.addSource("collisions", {
+          type: "geojson",
+          data:collisions2geojson(collisions),
+        });
+
+        map.current.addSource("junctions", {
+          type: "geojson",
+          data:junctions2geojson(junctions),
+        });
+
+        map.current.addLayer({
+          id: "unclustered-point",
+          type: "circle",
+          source: "collisions",
+          layout: {
+            "circle-sort-key": ["get", "severity_inverse"],
+          },
+          paint: {
+            "circle-color":  [
+              "interpolate",
+              ["linear"],
+              ["get", "severity"],
+              0,
+              "#f7d756",
+              1,
+              "#ff4133",
+              2,
+              "#b23dc4",
+              3,
+              "#ffbf40",
+              4000,
+              "#444444"
+            ],
+            "circle-radius": 6,
+            "circle-stroke-width": 1,
+            "circle-stroke-color": "#ffffff50",
+          },
+        });
+
+        map.current.addLayer({
+          id: "junctions",
+          type: "circle",
+          source: "junctions",
+          // layout: {
+          //   "circle-sort-key": ["get", "severity_inverse"],
+          // },
+          paint: {
+            "circle-color":  [
+              "interpolate",
+              ["linear"],
+              ["get", "score"],
+              0,
+              "#f7d756",
+              1,
+              "#ff4133",
+              10,
+              "#630b0f",
+              20,
+              "#ffbf40",
+              4000,
+              "#444444"
+            ],
+            "circle-radius": 8,
+            "circle-stroke-width": 1,
+            // "circle-stroke-color": "#ffffff50",
+            "circle-stroke-color": "#000",
+          },
+        });
+
+      });
+
+
+    });
+
+    return (
+      <div className="main">
+            <div ref={mapContainer} className={styles.mapContainer} />
+      </div>
+    );
+  }
+
+  export default Collisions;

web/src/utils/utils.tsx

@@ -23,4 +23,50 @@ function data2geojson(data: CounterPlus[]) {
   };
 }
 
-export { data2geojson };
+function collisions2geojson(data: any) {
+  const tempData = [];
+  for (let i = 0; i < data.length; i++) {
+    tempData.push({
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [data[i].longitude, data[i].latitude],
+      },
+      properties: {
+        severity: Number(data[i].severity),
+        severity_inverse: -Number(data[i].severity),
+        // today_count: data[i].today_count,
+        // last_week_count: data[i].last_week_count,
+      },
+    });
+  }
+
+  return {
+    type: "FeatureCollection",
+    features: tempData,
+  };
+}
+
+function junctions2geojson(data: any) {
+  const tempData = [];
+  for (let i = 0; i < data.length; i++) {
+    tempData.push({
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [data[i].lon, data[i].lat],
+      },
+      properties: {
+        score: Number(data[i].score),
+      },
+    });
+  }
+
+  return {
+    type: "FeatureCollection",
+    features: tempData,
+  };
+}
+
+
+export { data2geojson, collisions2geojson,junctions2geojson };