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 type { JSX } from 'solid-js';
import { useStationsContext } from './StationsContext'; import { useStationsContext } from './StationsContext';
import { useMapContext } from './MapContext';
import { Viewport } from 'solid-map-gl'; import { Viewport } from 'solid-map-gl';
import { viewport, setViewport } from './map/BadassMap';
function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) { function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) {
return (<svg return (<svg
@ -27,7 +28,6 @@ function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) {
export default function AccordionTest() { export default function AccordionTest() {
const [stations, { setStationsRequest }] = useStationsContext(); const [stations, { setStationsRequest }] = useStationsContext();
const [viewport, { setViewport }] = useMapContext();
function clickHandler(station) { function clickHandler(station) {
setViewport({ 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 { JSX } from "solid-js"
import type { Viewport } from "solid-map-gl"; import type { Viewport } from "solid-map-gl";
import { mapRotate, setMapRotate } from "./map/BadassMap"; import { mapRotate, setMapRotate } from "./map/BadassMap";
import { useMapContext } from "./MapContext"; import { viewport, setViewport } from "./map/BadassMap";
export function Toolbox() { export function Toolbox() {
const [viewport, { setViewport }] = useMapContext();
return ( return (
<ul> <ul>
<h3>Toolbox</h3> <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 'maplibre-gl/dist/maplibre-gl.css';
import StyleJson from '~/style/style.json'; import StyleJson from '~/style/style.json';
import { useMapContext } from '../MapContext';
export const [mapRotate, setMapRotate] = createSignal(false); 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) { export default function BadassMap(props: any) {
const [viewport, { setViewport }] = useMapContext();
return ( return (
<MapGL <MapGL
mapLib={maplibre} mapLib={maplibre}

23
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 type { JSX } from "solid-js";
import { StationsProvider } from "./components/StationsContext"; import { StationsProvider } from "./components/StationsContext";
import { MapContextProvider } from "./components/MapContext.tsx";
import BadassMap from './components/map/BadassMap'; import BadassMap from './components/map/BadassMap';
import "./root.css"; import "./root.css";
@ -22,18 +21,16 @@ export default function Root() {
<Body> <Body>
<ErrorBoundary> <ErrorBoundary>
<MapContextProvider> <StationsProvider>
<StationsProvider> <BadassMap />
<BadassMap /> <A href="/">Map</A>
<A href="/">Map</A> <A href="/stations">Stations</A>
<A href="/stations">Stations</A> <A href="/about">About</A>
<A href="/about">About</A> <A href="/tools">Tools</A>
<A href="/tools">Tools</A> <Routes>
<Routes> <FileRoutes />
<FileRoutes /> </Routes>
</Routes> </StationsProvider>
</StationsProvider>
</MapContextProvider>
</ErrorBoundary> </ErrorBoundary>
<Scripts /> <Scripts />
</Body> </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 AccordionTest from '~/components/AccordionTest';
import { useStationsContext } from '~/components/StationsContext'; import { useStationsContext } from '~/components/StationsContext';
import { viewport } from '~/components/map/BadassMap';
const TEST_PACKET: StationRequest = { const TEST_PACKET: StationRequest = {
Latitude: 42.36, Latitude: 42.36,
@ -16,7 +17,12 @@ const TEST_PACKET: StationRequest = {
export default function Stations() { export default function Stations() {
const [stations, { setStationsRequest }] = useStationsContext(); const [stations, { setStationsRequest }] = useStationsContext();
setStationsRequest(TEST_PACKET); setStationsRequest({
Latitude: viewport().center.lat,
Longitude: viewport().center.lng,
Distance: 10,
CountLimit: 200,
});
return ( return (
<main> <main>