react-three-map 0.2.1 → 0.3.1

package/src/stories/my-scene.tsx

@@ -1,13 +1,11 @@
 import { Box, Plane, useHelper } from "@react-three/drei";
 import { MeshProps, useFrame, useThree } from '@react-three/fiber';
-import { useControls } from "leva";
-import 'maplibre-gl/dist/maplibre-gl.css';
 import { useCallback, useRef, useState } from 'react';
 import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
 
-export function MyScene() {
+export function MyScene({ showCamHelper }: { showCamHelper?: boolean }) {
   return <>
-    <Lights />
+    <Lights showCamHelper={showCamHelper} />
     <Floor />
     <MyBox position={[-8 * 3, 8 * 1.5, 0]} />
     <MyBox position={[8 * 3, 8 * 1.5, 0]} />
@@ -53,15 +51,9 @@ function MyBox(props: MeshProps) {
     </Box>
   );
 }
-function Lights() {
+function Lights({ showCamHelper }: { showCamHelper?: boolean }) {
   const cam = useRef<OrthographicCamera>(null);
   const noCam = useRef<OrthographicCamera>(null);
-  const { showCamHelper } = useControls({
-    showCamHelper: {
-      value: false,
-      label: 'show camera helper'
-    }
-  });
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   useHelper((showCamHelper ? cam : noCam) as any, CameraHelper)
   const camSize = 100;
@@ -77,7 +69,6 @@ function Lights() {
         ref={cam}
         attach="shadow-camera"
         args={[-camSize, camSize, -camSize, camSize, 0.1, 100]}
-        rotation={[0, 90 * MathUtils.DEG2RAD, 0]}
       />
     </directionalLight>
     <pointLight position={[-10, 0, -20]} color="white" intensity={1} />

package/src/stories/render-on-demand.stories.tsx

@@ -1,47 +1,33 @@
-import { ThemeState, useLadleContext } from "@ladle/react";
 import { Box, Stats } from "@react-three/drei";
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { useState } from "react";
-import Map from 'react-map-gl';
+import { useRef, useState } from "react";
 import { MathUtils } from "three";
-import { Canvas } from "../canvas/canvas-maplibre";
-import MapLibre from "maplibre-gl";
+import { StoryMap } from "./story-map";
 
 export function Default() {
 
-  const theme = useLadleContext().globalState.theme;
-
-  const mapStyle = theme === ThemeState.Dark
-    ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
-    : "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
-
   const [hovered, hover] = useState(false);
 
-  return <div style={{ height: '100vh', position: 'relative' }}>
-    <Map
-      mapLib={MapLibre}
-      antialias
-      initialViewState={{
-        latitude: 51,
-        longitude: 0,
-        zoom: 13,
-        pitch: 60,
-      }}
-      mapStyle={mapStyle}
-    >
-      <Canvas latitude={51} longitude={0} frameloop="demand">
-        <Box
-          args={[500, 500, 500]}
-          position={[0, 250, 0]}
-          rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
-          onPointerOver={() => hover(true)}
-          onPointerOut={() => hover(false)}
-          material-color={hovered ? 'purple' : 'orange'}
-        />
-        <Stats />
-      </Canvas>
-    </Map>
-    <div style={{ position: 'absolute', top: 0, right: 0, left: 80, background: '#ffffffc2', padding: 5 }}>
+  const ref = useRef<HTMLDivElement>(null)
+
+  return <div ref={ref} style={{ height: '100vh', position: 'relative' }}>
+    <style>{`.stats{position:absolute !important}`}</style>
+    <StoryMap
+      latitude={51}
+      longitude={0}
+      zoom={13}
+      pitch={60}
+      canvas={{ frameloop: 'demand' }}>
+      <Box
+        args={[500, 500, 500]}
+        position={[0, 250, 0]}
+        rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
+        onPointerOver={() => hover(true)}
+        onPointerOut={() => hover(false)}
+        material-color={hovered ? 'purple' : 'orange'}
+      />
+      <Stats className="stats" parent={ref} />
+    </StoryMap>
+    <div style={{ position: 'absolute', bottom: 0, right: 0, left: 0, background: '#ffffffc2', padding: '15px 20px 40px' }}>
       Hover over the box, it will only render once to change colour, or when you move the camera. Look at the stats to confirm.
     </div>
   </div>

package/src/stories/story-map.tsx

@@ -1,40 +1,35 @@
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { FC, PropsWithChildren } from "react"
-import MapLibre from "maplibre-gl";
-import Map from 'react-map-gl';
-import { useLadleContext, ThemeState } from '@ladle/react';
+import { useControls } from 'leva';
+import { FC, PropsWithChildren } from "react";
+import { StoryMapbox } from './mapbox/story-mapbox';
+import { StoryMaplibre } from './maplibre/story-maplibre';
+import { CanvasProps } from '../maplibre/canvas';
+
+export enum MapProvider {
+  maplibre = "maplibre",
+  mapbox = "mapbox",
+}
 
 export interface StoryMapProps extends PropsWithChildren {
-  latitude?: number,
-  longitude?: number,
+  latitude: number,
+  longitude: number,
   zoom?: number,
   pitch?: number,
+  canvas?: Partial<CanvasProps>,
 }
 
 /** `<Map>` styled for stories */
-export const StoryMap: FC<StoryMapProps> = ({
-  children
-}) => {
-
-  const theme = useLadleContext().globalState.theme;
+export const StoryMap: FC<StoryMapProps> = (props) => {
 
-  const mapStyle = theme === ThemeState.Dark
-    ? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
-    : "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
+  const { mapProvider } = useControls({
+    mapProvider: {
+      value: MapProvider.maplibre,
+      options: MapProvider,
+      label: 'map provider'
+    },
+  });
 
   return <div style={{ height: '100vh', position: 'relative' }}>
-    <Map
-      mapLib={MapLibre}
-      antialias
-      initialViewState={{
-        latitude: 51,
-        longitude: 0,
-        zoom: 13,
-        pitch: 60,
-      }}
-      mapStyle={mapStyle}
-    >
-      {children}
-      </Map>
+    {mapProvider === MapProvider.maplibre && <StoryMaplibre {...props} />}
+    {mapProvider === MapProvider.mapbox && <StoryMapbox {...props} />}
   </div>
 }

package/tsconfig.json

@@ -14,6 +14,11 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    "paths": {
+      "react-three-map": ["./src/mapbox/index.ts"],
+      "react-three-map/maplibre": ["./src/maplibre/index.ts"],
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,