Skip to content

Commit 48b0929

Browse files
shotamatsudashotamatsuda
committed
Prompt a message to enter API key when tile request fails
1 parent 7c8912e commit 48b0929

File tree

3 files changed

+128
-15
lines changed

3 files changed

+128
-15
lines changed

‎storybook/src/atmosphere/3DTilesRenderer-Story.tsx

+62-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { css } from '@emotion/react'
12
import { Canvas, useFrame, useThree } from '@react-three/fiber'
23
import { SMAA, ToneMapping } from '@react-three/postprocessing'
4+
import { type TilesRenderer as TilesRendererImpl } from '3d-tiles-renderer'
35
import {
46
GLTFExtensionsPlugin,
57
GoogleCloudAuthPlugin,
@@ -14,12 +16,19 @@ import {
1416
TilesPlugin,
1517
TilesRenderer
1618
} from '3d-tiles-renderer/r3f'
17-
import { useAtomValue } from 'jotai'
19+
import { useAtomValue, useSetAtom } from 'jotai'
1820
import {
1921
EffectMaterial,
2022
type EffectComposer as EffectComposerImpl
2123
} from 'postprocessing'
22-
import { Fragment, useLayoutEffect, useRef, type FC } from 'react'
24+
import {
25+
Fragment,
26+
useEffect,
27+
useLayoutEffect,
28+
useRef,
29+
useState,
30+
type FC
31+
} from 'react'
2332
import { DRACOLoader } from 'three-stdlib'
2433

2534
import { TileCreasedNormalsPlugin } from '@takram/three-3d-tiles-support'
@@ -40,7 +49,7 @@ import {
4049

4150
import { EffectComposer } from '../helpers/EffectComposer'
4251
import { HaldLUT } from '../helpers/HaldLUT'
43-
import { googleMapsApiKeyAtom } from '../helpers/states'
52+
import { googleMapsApiKeyAtom, needsApiKeyAtom } from '../helpers/states'
4453
import { Stats } from '../helpers/Stats'
4554
import { useColorGradingControls } from '../helpers/useColorGradingControls'
4655
import { useControls } from '../helpers/useControls'
@@ -56,9 +65,26 @@ dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/')
5665

5766
const Globe: FC = () => {
5867
const apiKey = useAtomValue(googleMapsApiKeyAtom)
68+
69+
const [tiles, setTiles] = useState<TilesRendererImpl | null>(null)
70+
const setNeedsApiKey = useSetAtom(needsApiKeyAtom)
71+
useEffect(() => {
72+
if (tiles == null) {
73+
return
74+
}
75+
const callback = (): void => {
76+
setNeedsApiKey(true)
77+
}
78+
tiles.addEventListener('load-error', callback)
79+
return () => {
80+
tiles.removeEventListener('load-error', callback)
81+
}
82+
}, [tiles, setNeedsApiKey])
83+
5984
return (
6085
<TilesRenderer
6186
key={apiKey} // Reconstruct tiles when API key changes.
87+
ref={setTiles}
6288
>
6389
{apiKey !== '' ? (
6490
<TilesPlugin
@@ -237,11 +263,40 @@ const Scene: FC<SceneProps> = ({
237263

238264
export const Story: FC<SceneProps> = props => {
239265
useGoogleMapsAPIKeyControls()
266+
const needsApiKey = useAtomValue(needsApiKeyAtom)
240267
return (
241-
<Canvas gl={{ depth: false }} frameloop='demand'>
242-
<Stats />
243-
<Scene {...props} />
244-
</Canvas>
268+
<>
269+
<Canvas gl={{ depth: false }} frameloop='demand'>
270+
<Stats />
271+
<Scene {...props} />
272+
</Canvas>
273+
{needsApiKey && (
274+
<div
275+
css={css`
276+
position: absolute;
277+
top: 50%;
278+
left: 50%;
279+
color: white;
280+
text-align: center;
281+
line-height: 1.5;
282+
transform: translate(-50%, -50%);
283+
`}
284+
>
285+
Our API key has seemingly exceeded its daily quota.
286+
<br />
287+
Enter your{' '}
288+
<a
289+
href='https://developers.google.com/maps/documentation/tile/get-api-key'
290+
target='_blank'
291+
rel='noreferrer'
292+
style={{ color: 'inherit' }}
293+
>
294+
Google Maps API key
295+
</a>{' '}
296+
at the top right of this screen, or check back tomorrow.
297+
</div>
298+
)}
299+
</>
245300
)
246301
}
247302

‎storybook/src/clouds/3DTilesRenderer-Story.tsx

+57-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
import { css } from '@emotion/react'
12
import { Canvas, useFrame, useThree } from '@react-three/fiber'
23
import { SMAA, ToneMapping } from '@react-three/postprocessing'
3-
import { type GlobeControls as GlobeControlsImpl } from '3d-tiles-renderer'
4+
import {
5+
type GlobeControls as GlobeControlsImpl,
6+
type TilesRenderer as TilesRendererImpl
7+
} from '3d-tiles-renderer'
48
import {
59
GLTFExtensionsPlugin,
610
GoogleCloudAuthPlugin,
@@ -14,7 +18,7 @@ import {
1418
TilesPlugin,
1519
TilesRenderer
1620
} from '3d-tiles-renderer/r3f'
17-
import { useAtomValue } from 'jotai'
21+
import { useAtomValue, useSetAtom } from 'jotai'
1822
import {
1923
EffectMaterial,
2024
type EffectComposer as EffectComposerImpl
@@ -47,7 +51,7 @@ import {
4751

4852
import { EffectComposer } from '../helpers/EffectComposer'
4953
import { HaldLUT } from '../helpers/HaldLUT'
50-
import { googleMapsApiKeyAtom } from '../helpers/states'
54+
import { googleMapsApiKeyAtom, needsApiKeyAtom } from '../helpers/states'
5155
import { Stats } from '../helpers/Stats'
5256
import { useColorGradingControls } from '../helpers/useColorGradingControls'
5357
import { useControls } from '../helpers/useControls'
@@ -82,9 +86,26 @@ const Globe: FC = () => {
8286
}, [controls])
8387

8488
const apiKey = useAtomValue(googleMapsApiKeyAtom)
89+
90+
const [tiles, setTiles] = useState<TilesRendererImpl | null>(null)
91+
const setNeedsApiKey = useSetAtom(needsApiKeyAtom)
92+
useEffect(() => {
93+
if (tiles == null) {
94+
return
95+
}
96+
const callback = (): void => {
97+
setNeedsApiKey(true)
98+
}
99+
tiles.addEventListener('load-error', callback)
100+
return () => {
101+
tiles.removeEventListener('load-error', callback)
102+
}
103+
}, [tiles, setNeedsApiKey])
104+
85105
return (
86106
<TilesRenderer
87107
key={apiKey} // Reconstruct tiles when API key changes.
108+
ref={setTiles}
88109
>
89110
{apiKey !== '' ? (
90111
<TilesPlugin
@@ -266,11 +287,40 @@ const Scene: FC<SceneProps> = ({
266287

267288
export const Story: FC<SceneProps> = props => {
268289
useGoogleMapsAPIKeyControls()
290+
const needsApiKey = useAtomValue(needsApiKeyAtom)
269291
return (
270-
<Canvas gl={{ depth: false }}>
271-
<Stats />
272-
<Scene {...props} />
273-
</Canvas>
292+
<>
293+
<Canvas gl={{ depth: false }}>
294+
<Stats />
295+
<Scene {...props} />
296+
</Canvas>
297+
{needsApiKey && (
298+
<div
299+
css={css`
300+
position: absolute;
301+
top: 50%;
302+
left: 50%;
303+
color: white;
304+
text-align: center;
305+
line-height: 1.5;
306+
transform: translate(-50%, -50%);
307+
`}
308+
>
309+
Our API key has seemingly exceeded its daily quota.
310+
<br />
311+
Enter your{' '}
312+
<a
313+
href='https://developers.google.com/maps/documentation/tile/get-api-key'
314+
target='_blank'
315+
rel='noreferrer'
316+
style={{ color: 'inherit' }}
317+
>
318+
Google Maps API key
319+
</a>{' '}
320+
at the top right of this screen, or check back tomorrow.
321+
</div>
322+
)}
323+
</>
274324
)
275325
}
276326

‎storybook/src/helpers/states.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1-
import { atom } from 'jotai'
1+
import { atom, type SetStateAction } from 'jotai'
22

33
export const googleMapsApiKeyAtom = atom('')
4+
5+
export const needsApiKeyPrimitiveAtom = atom(false)
6+
export const needsApiKeyAtom = atom(
7+
get => get(needsApiKeyPrimitiveAtom) && get(googleMapsApiKeyAtom) === '',
8+
(get, set, value: SetStateAction<boolean>) => {
9+
set(needsApiKeyPrimitiveAtom, value)
10+
}
11+
)

0 commit comments

Comments
 (0)