add station markers

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 >

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
+};