react-three-map 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +6 -4
  3. package/dist/cjs/favicon.svg +1 -0
  4. package/dist/cjs/main.js +1 -1
  5. package/dist/es/favicon.svg +1 -0
  6. package/dist/es/main7.mjs +1 -1
  7. package/dist/es/main7.mjs.map +1 -1
  8. package/dist/maplibre/cjs/favicon.svg +1 -0
  9. package/dist/maplibre/cjs/main.js +1 -1
  10. package/dist/maplibre/es/favicon.svg +1 -0
  11. package/dist/maplibre/es/main7.mjs +1 -1
  12. package/dist/maplibre/es/main7.mjs.map +1 -1
  13. package/dist/maplibre/types/core/coords-to-matrix.d.ts +8 -0
  14. package/dist/maplibre/types/core/create-events.d.ts +3 -0
  15. package/dist/maplibre/types/core/generic-map.d.ts +47 -0
  16. package/{src/core/state-ref.ts → dist/maplibre/types/core/state-ref.d.ts} +4 -5
  17. package/dist/maplibre/types/core/use-canvas.d.ts +13 -0
  18. package/dist/maplibre/types/core/use-function.d.ts +1 -0
  19. package/dist/maplibre/types/core/use-on-add.d.ts +8 -0
  20. package/dist/maplibre/types/core/use-render.d.ts +3 -0
  21. package/dist/maplibre/types/maplibre/canvas.d.ts +10 -0
  22. package/dist/maplibre/types/maplibre.index.d.ts +1 -0
  23. package/dist/types/core/coords-to-matrix.d.ts +8 -0
  24. package/dist/types/core/create-events.d.ts +3 -0
  25. package/dist/types/core/generic-map.d.ts +47 -0
  26. package/dist/types/core/state-ref.d.ts +8 -0
  27. package/dist/types/core/use-canvas.d.ts +13 -0
  28. package/dist/types/core/use-function.d.ts +1 -0
  29. package/dist/types/core/use-on-add.d.ts +8 -0
  30. package/dist/types/core/use-render.d.ts +3 -0
  31. package/dist/types/mapbox/canvas.d.ts +10 -0
  32. package/dist/types/mapbox.index.d.ts +1 -0
  33. package/maplibre/package.json +1 -1
  34. package/package.json +4 -3
  35. package/docs/basic-app.gif +0 -0
  36. package/example-mapbox/package.json +0 -29
  37. package/example-mapbox/sandbox.config.json +0 -3
  38. package/example-mapbox/src/canvas.basic.stories.tsx +0 -84
  39. package/example-mapbox/src/comparison.stories.tsx +0 -37
  40. package/example-mapbox/src/html-on-top.stories.tsx +0 -24
  41. package/example-mapbox/src/my-scene.tsx +0 -89
  42. package/example-mapbox/src/render-on-demand.stories.tsx +0 -32
  43. package/example-mapbox/src/story-map.tsx +0 -61
  44. package/example-mapbox/src/vite-env.d.ts +0 -1
  45. package/example-mapbox/tsconfig.json +0 -27
  46. package/example-mapbox/tsconfig.node.json +0 -10
  47. package/example-mapbox/yarn.lock +0 -4154
  48. package/example-maplibre/package.json +0 -29
  49. package/example-maplibre/sandbox.config.json +0 -3
  50. package/example-maplibre/src/canvas.basic.stories.tsx +0 -61
  51. package/example-maplibre/src/comparison.stories.tsx +0 -35
  52. package/example-maplibre/src/html-on-top.stories.tsx +0 -24
  53. package/example-maplibre/src/my-scene.tsx +0 -89
  54. package/example-maplibre/src/render-on-demand.stories.tsx +0 -32
  55. package/example-maplibre/src/story-map.tsx +0 -38
  56. package/example-maplibre/src/vite-env.d.ts +0 -1
  57. package/example-maplibre/tsconfig.json +0 -25
  58. package/example-maplibre/tsconfig.node.json +0 -10
  59. package/example-maplibre/yarn.lock +0 -4181
  60. package/src/core/coords-to-matrix.ts +0 -20
  61. package/src/core/create-events.ts +0 -73
  62. package/src/core/generic-map.test.ts +0 -2
  63. package/src/core/generic-map.ts +0 -57
  64. package/src/core/use-canvas.tsx +0 -31
  65. package/src/core/use-function.ts +0 -10
  66. package/src/core/use-on-add.ts +0 -90
  67. package/src/core/use-render.ts +0 -25
  68. package/src/mapbox/canvas.tsx +0 -38
  69. package/src/mapbox/index.ts +0 -1
  70. package/src/maplibre/canvas.tsx +0 -38
  71. package/src/maplibre/index.ts +0 -1
  72. package/src/stories/comparison.stories.tsx +0 -38
  73. package/src/stories/html-on-top.stories.tsx +0 -21
  74. package/src/stories/mapbox/story-mapbox.tsx +0 -58
  75. package/src/stories/mapbox-example.stories.tsx +0 -84
  76. package/src/stories/maplibre/story-maplibre.tsx +0 -32
  77. package/src/stories/maplibre-example.stories.tsx +0 -61
  78. package/src/stories/my-scene.tsx +0 -88
  79. package/src/stories/render-on-demand.stories.tsx +0 -34
  80. package/src/stories/story-map.tsx +0 -35
  81. package/src/vite-env.d.ts +0 -1
  82. package/tsconfig.json +0 -30
  83. package/tsconfig.node.json +0 -10
package/example-mapbox/src/comparison.stories.tsx DELETED
@@ -1,37 +0,0 @@
1
- import { MapControls } from "@react-three/drei";
2
- import { Canvas as FiberCanvas } from "@react-three/fiber";
3
- import { Canvas } from "react-three-map";
4
- import { MyScene } from "./my-scene";
5
- import { StoryMap } from "./story-map";
6
- import { useControls } from "leva";
7
-
8
- export function WithMap() {
9
- const showCamHelper = useShowCamHelper()
10
- return <div style={{ height: '100vh' }}>
11
- <StoryMap latitude={51.5073218} longitude={-0.1276473} zoom={18}>
12
- <Canvas latitude={51.5073218} longitude={-0.1276473} shadows="variance">
13
- <MyScene showCamHelper={showCamHelper} />
14
- </Canvas>
15
- </StoryMap>
16
- </div>
17
- }
18
-
19
- export const WithoutMap = () => {
20
- const showCamHelper = useShowCamHelper()
21
- return <div style={{ height: '100vh' }}>
22
- <FiberCanvas camera={{ position: [100, 100, 100] }} shadows="variance">
23
- <MyScene showCamHelper={showCamHelper} />
24
- <MapControls makeDefault />
25
- </FiberCanvas>
26
- </div>
27
- }
28
-
29
- const useShowCamHelper = () => {
30
- const { showCamHelper } = useControls({
31
- showCamHelper: {
32
- value: false,
33
- label: 'show camera helper'
34
- }
35
- });
36
- return showCamHelper
37
- }
package/example-mapbox/src/html-on-top.stories.tsx DELETED
@@ -1,24 +0,0 @@
1
- import { Box, Html } from "@react-three/drei";
2
- import { useState } from "react";
3
- import { Canvas } from "react-three-map";
4
- import { MathUtils } from "three";
5
- import { StoryMap } from "./story-map";
6
-
7
- export function Default() {
8
-
9
- const [hovered, hover] = useState(false);
10
-
11
- return <StoryMap latitude={51} longitude={0} zoom={13}>
12
- <Canvas latitude={51} longitude={0} frameloop="demand">
13
- <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>
14
- <Box
15
- args={[500, 500, 500]}
16
- position={[0, 250, 0]}
17
- rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
18
- onPointerOver={() => hover(true)}
19
- onPointerOut={() => hover(false)}
20
- material-color={hovered ? 'purple' : 'orange'}
21
- />
22
- </Canvas>
23
- </StoryMap>
24
- }
package/example-mapbox/src/my-scene.tsx DELETED
@@ -1,89 +0,0 @@
1
- import { Box, Plane, useHelper } from "@react-three/drei";
2
- import { MeshProps, useFrame, useThree } from '@react-three/fiber';
3
- import { useCallback, useRef, useState } from 'react';
4
- import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
5
-
6
- export function MyScene({ showCamHelper }: { showCamHelper?: boolean }) {
7
- return <>
8
- <Lights showCamHelper={showCamHelper} />
9
- <Floor />
10
- <MyBox position={[-8 * 3, 8 * 1.5, 0]} />
11
- <MyBox position={[8 * 3, 8 * 1.5, 0]} />
12
- </>
13
- }
14
-
15
-
16
- function MyBox(props: MeshProps) {
17
- const [hovered, hover] = useState(false);
18
- const mesh = useRef<Mesh>(null)
19
- const invalidate = useThree(st => st.invalidate);
20
-
21
- const onOver = useCallback(() => {
22
- hover(true);
23
- }, [])
24
-
25
- const onOut = useCallback(() => {
26
- hover(false);
27
- }, [])
28
-
29
- useFrame((_st, dt) => {
30
- if (!mesh.current) return;
31
- mesh.current.rotateY(dt);
32
- invalidate();
33
- })
34
-
35
- return (
36
- <Box
37
- {...props}
38
- ref={mesh}
39
- args={[16, 16, 16]}
40
- receiveShadow
41
- castShadow
42
- onClick={onOver}
43
- onPointerOver={onOver}
44
- onPointerOut={onOut}
45
- >
46
- <meshStandardMaterial
47
- color={hovered ? "red" : "orange"}
48
- metalness={.75}
49
- roughness={.5}
50
- />
51
- </Box>
52
- );
53
- }
54
- function Lights({ showCamHelper }: { showCamHelper?: boolean }) {
55
- const cam = useRef<OrthographicCamera>(null);
56
- const noCam = useRef<OrthographicCamera>(null);
57
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
58
- useHelper((showCamHelper ? cam : noCam) as any, CameraHelper)
59
- const camSize = 100;
60
- return <>
61
- <ambientLight intensity={0.5} />
62
- <directionalLight
63
- castShadow
64
- position={[2.5, 50, 5]}
65
- intensity={1.5}
66
- shadow-mapSize={1024}
67
- >
68
- <orthographicCamera
69
- ref={cam}
70
- attach="shadow-camera"
71
- args={[-camSize, camSize, -camSize, camSize, 0.1, 100]}
72
- rotation={[0, 90 * MathUtils.DEG2RAD, 0]}
73
- />
74
- </directionalLight>
75
- <pointLight position={[-10, 0, -20]} color="white" intensity={1} />
76
- <pointLight position={[0, -10, 0]} intensity={1} />
77
- </>
78
- }
79
-
80
- function Floor() {
81
- return <Plane
82
- args={[200, 200]}
83
- position={[0, 0, 0]}
84
- rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
85
- receiveShadow
86
- >
87
- <shadowMaterial opacity={.5} />
88
- </Plane>
89
- }
package/example-mapbox/src/render-on-demand.stories.tsx DELETED
@@ -1,32 +0,0 @@
1
- import { Box, Stats } from "@react-three/drei";
2
- import { useRef, useState } from "react";
3
- import { Canvas } from "react-three-map";
4
- import { MathUtils } from "three";
5
- import { StoryMap } from "./story-map";
6
-
7
- export function Default() {
8
-
9
- const [hovered, hover] = useState(false);
10
-
11
- const ref = useRef<HTMLDivElement>(null)
12
-
13
- return <div style={{ height: '100vh', position: 'relative' }}>
14
- <style>{`.stats{position:absolute !important}`}</style>
15
- <StoryMap latitude={51} longitude={0} zoom={13}>
16
- <Canvas latitude={51} longitude={0} frameloop="demand">
17
- <Box
18
- args={[500, 500, 500]}
19
- position={[0, 250, 0]}
20
- rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
21
- onPointerOver={() => hover(true)}
22
- onPointerOut={() => hover(false)}
23
- material-color={hovered ? 'purple' : 'orange'}
24
- />
25
- <Stats className="stats" parent={ref} />
26
- </Canvas>
27
- </StoryMap>
28
- <div style={{ position: 'absolute', bottom: 0, right: 0, left: 0, background: '#ffffffc2', padding: '15px 20px 40px' }}>
29
- Hover over the box, it will only render once to change colour, or when you move the camera. Look at the stats to confirm.
30
- </div>
31
- </div>
32
- }
package/example-mapbox/src/story-map.tsx DELETED
@@ -1,61 +0,0 @@
1
- import { ThemeState, useLadleContext } from '@ladle/react';
2
- import { useControls } from 'leva';
3
- import Mapbox from "mapbox-gl";
4
- import 'mapbox-gl/dist/mapbox-gl.css';
5
- import { FC, PropsWithChildren } from "react";
6
- import Map from 'react-map-gl';
7
-
8
- export interface StoryMapProps extends PropsWithChildren {
9
- latitude: number,
10
- longitude: number,
11
- zoom?: number,
12
- pitch?: number,
13
- }
14
-
15
- /** `<Map>` styled for stories */
16
- export const StoryMap: FC<StoryMapProps> = ({
17
- latitude, longitude, zoom = 18, pitch = 60, children
18
- }) => {
19
-
20
- const { mapboxToken } = useControls({
21
- mapboxToken: {
22
- value: import.meta.env.VITE_MAPBOX_TOKEN || '',
23
- label: 'mapbox token',
24
- }
25
- })
26
-
27
- const theme = useLadleContext().globalState.theme;
28
-
29
- const mapStyle = theme === ThemeState.Dark
30
- ? "mapbox://styles/mapbox/dark-v11"
31
- : "mapbox://styles/mapbox/streets-v12";
32
-
33
- Mapbox.accessToken = mapboxToken;
34
-
35
- return <div style={{ height: '100vh', position: 'relative' }}>
36
- {!mapboxToken && <Center>Add a mapbox token to load this component</Center>}
37
- {mapboxToken && <Map
38
- antialias
39
- initialViewState={{
40
- latitude,
41
- longitude,
42
- zoom,
43
- pitch,
44
- }}
45
- mapStyle={mapStyle}
46
- mapboxAccessToken={mapboxToken}
47
- >
48
- {children}
49
- </Map>}
50
- </div>
51
- }
52
-
53
- const Center = ({ children }: PropsWithChildren) => (
54
- <div style={{
55
- display: 'flex',
56
- height: '100%',
57
- width: '100%',
58
- alignItems: 'center',
59
- justifyContent: 'center',
60
- }}>{children}</div>
61
- )
package/example-mapbox/src/vite-env.d.ts DELETED
@@ -1 +0,0 @@
1
- /// <reference types="vite/client" />
package/example-mapbox/tsconfig.json DELETED
@@ -1,27 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "target": "ES2020",
4
- "useDefineForClassFields": true,
5
- "lib": ["ES2020", "DOM", "DOM.Iterable"],
6
- "module": "ESNext",
7
- "skipLibCheck": true,
8
-
9
- /* Bundler mode */
10
- "moduleResolution": "Node",
11
- "allowImportingTsExtensions": true,
12
- "resolveJsonModule": true,
13
- "isolatedModules": true,
14
- "noEmit": true,
15
- "jsx": "react-jsx",
16
-
17
- /* Linting */
18
- "strict": true,
19
- "noUnusedLocals": true,
20
- "noUnusedParameters": true,
21
- "noFallthroughCasesInSwitch": true,
22
-
23
- "allowSyntheticDefaultImports": true
24
- },
25
- "include": ["src"],
26
- "references": [{ "path": "./tsconfig.node.json" }]
27
- }
package/example-mapbox/tsconfig.node.json DELETED
@@ -1,10 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "composite": true,
4
- "skipLibCheck": true,
5
- "module": "ESNext",
6
- "moduleResolution": "bundler",
7
- "allowSyntheticDefaultImports": true
8
- },
9
- "include": ["vite.config.ts"]
10
- }