From dbf2740753aa00ebaa8ee6e8ad9b40dfaa422c1e Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Thu, 27 Apr 2023 13:50:54 -0400
Subject: [PATCH] add station markers

---
 lightning/src/components/map/BadassMap.tsx    |  3 +-
 lightning/src/components/map/MapIconLayer.tsx | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 lightning/src/components/map/MapIconLayer.tsx

diff --git a/lightning/src/components/map/BadassMap.tsx b/lightning/src/components/map/BadassMap.tsx
index d4ded16..ddfe184 100644
--- a/lightning/src/components/map/BadassMap.tsx
+++ b/lightning/src/components/map/BadassMap.tsx
@@ -1,7 +1,6 @@
 import MapGL, { Camera, Viewport } from 'solid-map-gl';
 import * as maplibre from 'maplibre-gl';
 import MapControls from './MapControls';
-import MapMarkerLayer from './MapMarkerLayer.tsx';
 
 import type { MapOptions } from 'maplibre-gl';
 import { createEffect, createSignal, JSX } from 'solid-js';
@@ -10,6 +9,7 @@ import { createEffect, createSignal, JSX } from 'solid-js';
 import { unstable_clientOnly } from 'solid-start';
 const MapScatLayer = unstable_clientOnly(() => import('~/components/map/MapScatLayer'));
 const MapArcLayer = unstable_clientOnly(() => import('~/components/map/MapArcLayer'));
+const MapIconLayer = unstable_clientOnly(() => import('~/components/map/MapIconLayer.tsx'));
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 import StyleJson from '~/style/style.json';
@@ -48,6 +48,7 @@ export default function BadassMap(props: any) {
             />
             <MapScatLayer />
             <MapArcLayer />
+            <MapIconLayer />
             <MapControls />
 
         </MapGL >
diff --git a/lightning/src/components/map/MapIconLayer.tsx b/lightning/src/components/map/MapIconLayer.tsx
new file mode 100644
index 0000000..12cf348
--- /dev/null
+++ b/lightning/src/components/map/MapIconLayer.tsx
@@ -0,0 +1,36 @@
+import { IconLayer } from "@deck.gl/layers/typed";
+import { MapboxLayer } from "@deck.gl/mapbox/typed";
+import { Layer } from "solid-map-gl";
+
+import { createEffect, JSX, Show } from "solid-js";
+import { useStationsContext } from "../StationsContext";
+import { createMemo } from "solid-js";
+
+const ICON_MAPPING = {
+    marker: { x: 0, y: 0, width: 128, height: 128, mask: true }
+};
+
+export default function MapIconLayer(props: any) {
+    const [stations] = useStationsContext();
+
+    const pls = createMemo(() => stations());
+
+    return (
+        <Show when={stations()}>
+            <Layer customLayer={
+                new MapboxLayer({
+                    id: 'deckgl-iconlayer',
+                    type: IconLayer,
+                    data: pls(),
+                    pickable: true,
+                    iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
+                    iconMapping: ICON_MAPPING,
+                    getIcon: d => 'marker',
+                    sizeScale: 15,
+                    getPosition: d => [d.Loc.Coordinates[1],d.Loc.Coordinates[0]],
+                    getSize: d => 2,
+                    getColor: d => [d.Dist * 100, 140 - (d.Dist * 50), 0]
+                } as any)} />
+        </Show>
+    ) as JSX.Element
+};