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) { /> + 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 ( + + '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)} /> + + ) as JSX.Element +};