react-three-map 0.3.2 → 0.3.4

package/example-maplibre/package.json

@@ -1,29 +0,0 @@
-{
-  "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

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

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

@@ -1,61 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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 center position={[0, 250, 0]} style={{ textAlign: 'center', fontSize: '2em', width: '10em', lineHeight: '1.5em' }}><i>Some</i> <b>HTML</b><br />content!</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

@@ -1,89 +0,0 @@
-import { Box, Plane, useHelper } from "@react-three/drei";
-import { MeshProps, useFrame, useThree } from '@react-three/fiber';
-import { useCallback, useRef, useState } from 'react';
-import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
-
-export function MyScene({ showCamHelper }: { showCamHelper?: boolean }) {
-  return <>
-    <Lights showCamHelper={showCamHelper} />
-    <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({ showCamHelper }: { showCamHelper?: boolean }) {
-  const cam = useRef<OrthographicCamera>(null);
-  const noCam = useRef<OrthographicCamera>(null);
-  // 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

@@ -1,32 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

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

package/example-maplibre/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "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

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