feat: chart overlay

Author: professoralex13

examples/playground/src/components/Map.tsx

@@ -1,7 +1,7 @@
-import { MapContainer, useMap, TileLayer } from "react-leaflet";
+import { MapContainer, useMap, TileLayer, ImageOverlay } from "react-leaflet";
 import { useEffect, useMemo, useRef } from "react";
-import { Map } from "leaflet";
-import { useRecoilValue } from "recoil";
+import { LatLngBounds, Map } from "leaflet";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { appState } from "../state/app";
 import { NavigraphRasterSource, NavigraphTheme, NavigraphTileLayer, PresetConfig } from "@navigraph/leaflet";
 import { userState } from "../state/user";
@@ -10,6 +10,12 @@ import { Scope } from "@navigraph/app";
 
 import "leaflet/dist/leaflet.css"
 import { mapFaaState, mapSourceState, mapTacState, mapThemeState } from "../state/mapStyle";
+import { chartOverlayOpacityState, chartOverlayState } from "../state/chartOverlay";
+import { calculateChartBounds } from "@navigraph/charts";
+import { useQuery } from "@tanstack/react-query";
+import { protectedPage } from "./protectedPage";
+import { TbCircleX } from "react-icons/tb";
+import Button from "./Button";
 
 export function createPreset(source: NavigraphRasterSource, theme: NavigraphTheme, faa: boolean, tac: boolean): PresetConfig {
     if (source === 'WORLD') {
@@ -22,6 +28,51 @@ export function createPreset(source: NavigraphRasterSource, theme: NavigraphThem
     return { source, theme, type: faa ? 'FAA' : 'Navigraph' }
 }
 
+const ChartOverlay = protectedPage(({ charts }) => {
+    const theme = useRecoilValue(mapThemeState);
+
+    const opacity = useRecoilValue(chartOverlayOpacityState);
+
+    const chart = useRecoilValue(chartOverlayState);
+
+    const map = useMap();
+
+    const bounds = useMemo(() => {
+        if (!chart || !chart.is_georeferenced) return;
+
+        const { sw, ne } = calculateChartBounds(chart);
+
+        return new LatLngBounds(sw, ne);
+    }, [chart]);
+
+    useEffect(() => {
+        if (bounds) {
+            map.flyToBounds(bounds)
+        }
+    }, [bounds]);
+
+    const { data: urls } = useQuery({
+        queryKey: ['chart-overlay-urls', chart],
+        queryFn: async () => {
+            if (!chart) return null;
+
+            const blobs = await Promise.all([charts.getChartImage({ chart, theme: 'light' }), charts.getChartImage({ chart, theme: 'dark' })]);
+
+            return blobs.map((blob) => blob ? URL.createObjectURL(blob) : null);
+        }
+    })
+
+    if (!bounds || !urls?.[0] || !urls?.[1]) return null;
+
+    return (
+        <ImageOverlay
+            url={theme === 'DAY' ? urls[0] : urls[1]}
+            bounds={bounds}
+            opacity={opacity}
+        />
+    )
+}, [Scope.CHARTS]);
+
 function NavigraphTiles({ auth }: { auth: NavigraphAuth }) {
     const map = useMap();
 
@@ -51,6 +102,28 @@ function NavigraphTiles({ auth }: { auth: NavigraphAuth }) {
     return null;
 }
 
+function OverlayControls() {
+    const [opacity, setOpacity] = useRecoilState(chartOverlayOpacityState);
+
+    const [chart, setChart] = useRecoilState(chartOverlayState);
+
+    if (!chart) return null;
+
+    return (
+        <div className='absolute right-5 top-5 bg-blue-gray-500 z-[999] p-2 rounded-md flex flex-col gap-2'>
+            <div className="flex justify-between items-center gap-3">
+                <span className="text-xs">{chart.index_number}: {chart.name}</span>
+                <TbCircleX className="text-white hover:text-blue-25 cursor-pointer" size={25} onClick={() => setChart(null)} />
+            </div>
+            <div className="flex gap-2">
+                <Button selected={opacity === 1} onClick={() => setOpacity(1)}><span className="text-white text-xs">100%</span></Button>
+                <Button selected={opacity === 0.9} onClick={() => setOpacity(0.9)}><span className="text-white text-xs">90%</span></Button>
+                <Button selected={opacity === 0.7} onClick={() => setOpacity(0.7)}><span className="text-white text-xs">70%</span></Button>
+            </div>
+        </div>
+    )
+}
+
 export default function MapPane() {
     const mapRef = useRef<Map>(null);
 
@@ -62,6 +135,7 @@ export default function MapPane() {
             <MapContainer center={[51.505, -0.09]} zoom={13} className='h-screen' zoomControl={false} ref={mapRef} whenReady={() => {
                 setInterval(() => mapRef.current?.invalidateSize(), 1000)
             }}>
+                <OverlayControls />
                 {app && user?.scope.includes(Scope.TILES) ? (
                     <NavigraphTiles auth={app.auth} />
                 ) : (
@@ -70,6 +144,7 @@ export default function MapPane() {
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                     />
                 )}
+                <ChartOverlay />
             </MapContainer>
         </div>
     )

examples/playground/src/components/protectedPage.tsx

@@ -24,8 +24,9 @@ export function protectedPage<P extends {}, S extends Scope[]>(Component: (props
             return null
         }
 
-        const charts = requiredScopes.includes(Scope.CHARTS) ? getChartsAPI() : undefined;
+        const charts = user.scope.includes(Scope.CHARTS) ? getChartsAPI() : undefined;
 
-        return Component({ user, auth: app.auth, charts, ...props } as unknown as any);
+
+        return <Component user={user} auth={app.auth} charts={charts} {...props as unknown as any} />;
     };
 }

examples/playground/src/pages/Charts.tsx

@@ -12,6 +12,8 @@ import clsx from "clsx";
 import Button from "../components/Button";
 import { IoLayers } from "react-icons/io5";
 import { LuTableProperties } from "react-icons/lu";
+import { useRecoilState } from "recoil";
+import { chartOverlayState } from "../state/chartOverlay";
 
 enum ChartCategory {
     STAR,
@@ -32,13 +34,15 @@ const categoryKeys = [
 function ChartRow({ chart }: { chart: Chart }) {
     const [open, setOpen] = useState(false);
 
+    const [chartOverlay, setChartOverlay] = useRecoilState(chartOverlayState);
+
     return (
         <div className="max-h-96 flex flex-col gap-1">
             <div className="py-1 px-4 border-y-[0.5px] border-ng-background-500 flex gap-2 items-center justify-between hover:bg-ng-background-300 cursor-pointer">
                 <span className="text-sm font-semibold">{chart.name}<br />{chart.index_number}</span>
                 <div className="flex gap-2">
+                    {chart.is_georeferenced && <Button selected={chartOverlay?.id === chart.id} onClick={() => setChartOverlay(chart)}><IoLayers className="text-gray-25" size={20} /></Button>}
                     <Button selected={open} onClick={() => setOpen((x) => !x)}><LuTableProperties className="text-gray-25" size={20} /></Button>
-                    <Button onClick={() => null}><IoLayers className="text-gray-25" size={20} /></Button>
                 </div>
             </div>
             {open && <JsonView content={chart} />}

examples/playground/src/state/chartOverlay.ts

@@ -0,0 +1,12 @@
+import { Chart } from "@navigraph/charts";
+import { atom } from "recoil";
+
+export const chartOverlayState = atom<Chart | null>({
+    key: 'chartOverlayState',
+    default: null
+});
+
+export const chartOverlayOpacityState = atom<number>({
+    key: 'chartOverlayOpacityState',
+    default: 1,
+})