react-three-map 0.2.1 → 0.3.0

package/example-maplibre/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "example-maplibre",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "yarn ladle serve",
+    "ts": "tsc -w"
+  },
+  "dependencies": {
+    "@ladle/react": "^2.15.0",
+    "@react-three/drei": "^9.77.10",
+    "@react-three/fiber": "^8.13.4",
+    "leva": "^0.9.35",
+    "maplibre-gl": "^3.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.0",
+    "react-three-map": "^0.2.1",
+    "three": "~0.153.0",
+    "three-stdlib": "^2.23.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/three": "^0.152.1",
+    "typescript": "^5.1.6",
+    "vite": "^4.3.9"
+  }
+}

package/example-maplibre/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "port": 61000
+}

package/example-maplibre/src/canvas.basic.stories.tsx

@@ -0,0 +1,61 @@
+import { useFrame, Vector3 } from "@react-three/fiber";
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { FC, useRef, useState } from "react";
+import Map from 'react-map-gl/maplibre';
+import { Canvas } from "react-three-map/maplibre";
+import { Mesh } from "three";
+
+export default { title: 'Canvas' }
+
+export function BasicExample() {
+  return <div style={{ height: '100vh' }}>
+    <Map
+      antialias
+      initialViewState={{
+        latitude: 51,
+        longitude: 0,
+        zoom: 13,
+        pitch: 60,
+      }}
+      mapStyle="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+    >
+      <Canvas latitude={51} longitude={0}>
+        <hemisphereLight
+          args={["#ffffff", "#60666C"]}
+          position={[1, 4.5, 3]}
+        />
+        <object3D scale={500}>
+          <Box position={[-1.2, 1, 0]} />
+          <Box position={[1.2, 1, 0]} />
+        </object3D>
+      </Canvas>
+    </Map>
+  </div>
+}
+
+const Box: FC<{ position: Vector3 }> = (props) => {
+  // This reference gives us direct access to the THREE.Mesh object
+  const ref = useRef<Mesh>(null)
+  // Hold state for hovered and clicked events
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((_state, delta) => {
+    if (!ref.current) return;
+    ref.current.rotation.x += delta;
+    ref.current.rotation.z -= delta;
+  })
+  // Return the view, these are regular Threejs elements expressed in JSX
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={() => click(!clicked)}
+      onPointerOver={() => hover(true)}
+      onPointerOut={() => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}

package/example-maplibre/src/comparison.stories.tsx

@@ -0,0 +1,22 @@
+import { MapControls } from "@react-three/drei";
+import { Canvas as FiberCanvas } from "@react-three/fiber";
+import { Canvas } from "react-three-map/maplibre";
+import { MyScene } from "./my-scene";
+import { StoryMap } from "./story-map";
+
+export function WithMap() {
+  return <StoryMap latitude={51.5073218} longitude={-0.1276473} zoom={18}>
+    <Canvas latitude={51.5073218} longitude={-0.1276473} shadows="variance">
+      <MyScene />
+    </Canvas>
+  </StoryMap>
+}
+
+export const WithoutMap = () => {
+  return <div style={{ height: '100vh' }}>
+    <FiberCanvas camera={{ position: [100, 100, 100] }} shadows="variance">
+      <MyScene />
+      <MapControls makeDefault />
+    </FiberCanvas>
+  </div>
+}

package/example-maplibre/src/html-on-top.stories.tsx

@@ -0,0 +1,24 @@
+import { Box, Html } from "@react-three/drei";
+import { useState } from "react";
+import { Canvas } from "react-three-map/maplibre";
+import { MathUtils } from "three";
+import { StoryMap } from "./story-map";
+
+export function Default() {
+
+  const [hovered, hover] = useState(false);
+
+  return <StoryMap latitude={51} longitude={0} zoom={13}>
+    <Canvas latitude={51} longitude={0} frameloop="demand">
+      <Html>ola</Html>
+      <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'}
+      />
+    </Canvas>
+  </StoryMap>
+}

package/example-maplibre/src/my-scene.tsx

@@ -0,0 +1,97 @@
+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() {
+  return <>
+    <Lights />
+    <Floor />
+    <MyBox position={[-8 * 3, 8 * 1.5, 0]} />
+    <MyBox position={[8 * 3, 8 * 1.5, 0]} />
+  </>
+}
+
+
+function MyBox(props: MeshProps) {
+  const [hovered, hover] = useState(false);
+  const mesh = useRef<Mesh>(null)
+  const invalidate = useThree(st => st.invalidate);
+
+  const onOver = useCallback(() => {
+    hover(true);
+  }, [])
+
+  const onOut = useCallback(() => {
+    hover(false);
+  }, [])
+
+  useFrame((_st, dt) => {
+    if (!mesh.current) return;
+    mesh.current.rotateY(dt);
+    invalidate();
+  })
+
+  return (
+    <Box
+      {...props}
+      ref={mesh}
+      args={[16, 16, 16]}
+      receiveShadow
+      castShadow
+      onClick={onOver}
+      onPointerOver={onOver}
+      onPointerOut={onOut}
+    >
+      <meshStandardMaterial
+        color={hovered ? "red" : "orange"}
+        metalness={.75}
+        roughness={.5}
+      />
+    </Box>
+  );
+}
+function Lights() {
+  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;
+  return <>
+    <ambientLight intensity={0.5} />
+    <directionalLight
+      castShadow
+      position={[2.5, 50, 5]}
+      intensity={1.5}
+      shadow-mapSize={1024}
+    >
+      <orthographicCamera
+        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} />
+    <pointLight position={[0, -10, 0]} intensity={1} />
+  </>
+}
+
+function Floor() {
+  return <Plane
+    args={[200, 200]}
+    position={[0, 0, 0]}
+    rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
+    receiveShadow
+  >
+    <shadowMaterial opacity={.5} />
+  </Plane>
+}

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

@@ -0,0 +1,32 @@
+import { Box, Stats } from "@react-three/drei";
+import { useRef, useState } from "react";
+import { Canvas } from "react-three-map/maplibre";
+import { MathUtils } from "three";
+import { StoryMap } from "./story-map";
+
+export function Default() {
+
+  const [hovered, hover] = useState(false);
+
+  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}>
+      <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 className="stats" parent={ref} />
+      </Canvas>
+    </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/example-maplibre/src/story-map.tsx

@@ -0,0 +1,38 @@
+import { ThemeState, useLadleContext } from '@ladle/react';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { FC, PropsWithChildren } from "react";
+import Map from 'react-map-gl/maplibre';
+
+export interface StoryMapProps extends PropsWithChildren {
+  latitude: number,
+  longitude: number,
+  zoom?: number,
+  pitch?: number,
+}
+
+/** `<Map>` styled for stories */
+export const StoryMap: FC<StoryMapProps> = ({
+  latitude, longitude, zoom, children
+}) => {
+
+  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";
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    <Map
+      antialias
+      initialViewState={{
+        latitude,
+        longitude,
+        zoom,
+        pitch: 60,
+      }}
+      mapStyle={mapStyle}
+    >
+      {children}
+    </Map>
+  </div>
+}

package/example-maplibre/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/example-maplibre/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/example-maplibre/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}