adam/maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

stations acts on view center now

Browse source
This commit is contained in:
Adam 2023-04-27 12:47:33 -04:00
parent e1b2d5da94
commit 396c9666e3
6 changed files with 27 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lightning/src/components/AccordionTest.tsx
View file

@ -4,9 +4,10 @@ import { ErrorBoundary, For, Show, } from 'solid-js';
import type { JSX } from 'solid-js';
import { useStationsContext } from './StationsContext';
import { useMapContext } from './MapContext';
import { Viewport } from 'solid-map-gl';
import { viewport, setViewport } from './map/BadassMap';
function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) {
return (<svg
@ -27,7 +28,6 @@ function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) {
export default function AccordionTest() {
const [stations, { setStationsRequest }] = useStationsContext();
const [viewport, { setViewport }] = useMapContext();
function clickHandler(station) {
setViewport({

24
lightning/src/components/MapContext.tsx
View file

@ -1,24 +0,0 @@
import { createSignal, createContext, createResource, useContext } from "solid-js";
import type { Viewport } from "solid-map-gl";
export const MapContext = createContext();
export function MapContextProvider(props: any) {
const [viewport, setViewport] = createSignal<Viewport>({
center: { lng: -90, lat: 38, },
zoom: 4,
bearing: 0,
pitch: 0,
});
return (
<MapContext.Provider value={[viewport, { setViewport }]}>
{props.children}
</MapContext.Provider>
);
};
export const useMapContext = () => useContext(MapContext);

4
lightning/src/components/Toolbox.tsx
View file

@ -1,11 +1,9 @@
import type { JSX } from "solid-js"
import type { Viewport } from "solid-map-gl";
import { mapRotate, setMapRotate } from "./map/BadassMap";
import { useMapContext } from "./MapContext";
import { viewport, setViewport } from "./map/BadassMap";
export function Toolbox() {
const [viewport, { setViewport }] = useMapContext();
return (
<ul>
<h3>Toolbox</h3>

10
lightning/src/components/map/BadassMap.tsx
View file

@ -13,15 +13,19 @@ const MapArcLayer = unstable_clientOnly(() => import('~/components/map/MapArcLay
import 'maplibre-gl/dist/maplibre-gl.css';
import StyleJson from '~/style/style.json';
import { useMapContext } from '../MapContext';
export const [mapRotate, setMapRotate] = createSignal(false);
createEffect(() => console.log('Rotate:', mapRotate()));
createEffect(() => console.log(mapRotate()));
export const [viewport, setViewport] = createSignal<Viewport>({
center: { lng: -90, lat: 38, },
zoom: 4,
bearing: 0,
pitch: 0,
});
export default function BadassMap(props: any) {
const [viewport, { setViewport }] = useMapContext();
return (
<MapGL
mapLib={maplibre}

3
lightning/src/root.tsx
View file

@ -4,7 +4,6 @@ import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts,
import type { JSX } from "solid-js";
import { StationsProvider } from "./components/StationsContext";
import { MapContextProvider } from "./components/MapContext.tsx";
import BadassMap from './components/map/BadassMap';
import "./root.css";
@ -22,7 +21,6 @@ export default function Root() {
<Body>
<ErrorBoundary>
<MapContextProvider>
<StationsProvider>
<BadassMap />
<A href="/">Map</A>
@ -33,7 +31,6 @@ export default function Root() {
<FileRoutes />
</Routes>
</StationsProvider>
</MapContextProvider>
</ErrorBoundary>
<Scripts />
</Body>

8
lightning/src/routes/stations.tsx
View file

@ -5,6 +5,7 @@ import type { JSX } from 'solid-js';
import AccordionTest from '~/components/AccordionTest';
import { useStationsContext } from '~/components/StationsContext';
import { viewport } from '~/components/map/BadassMap';
const TEST_PACKET: StationRequest = {
Latitude: 42.36,
@ -16,7 +17,12 @@ const TEST_PACKET: StationRequest = {
export default function Stations() {
const [stations, { setStationsRequest }] = useStationsContext();
setStationsRequest(TEST_PACKET);
setStationsRequest({
Latitude: viewport().center.lat,
Longitude: viewport().center.lng,
Distance: 10,
CountLimit: 200,
});
return (
<main>