From 757f8b16b9f8fabbf2586cdc697a9f2d06fa8033 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Wed, 14 Feb 2024 12:21:55 -0600 Subject: [PATCH 1/9] check if the tile exists before accessing --- src/tiles.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/tiles.js b/src/tiles.js index b9928c6..bf7aa97 100644 --- a/src/tiles.js +++ b/src/tiles.js @@ -403,10 +403,9 @@ export const createTiles = (regl, opts) => { tileIndex[0], tileIndex[1] ) - - if (!this.tiles[key].hasLoadedChunks(chunks)) { + if (!this.tiles[key]?.hasLoadedChunks(chunks)) { const loadingID = this.setLoading('chunk') - await this.tiles[key].loadChunks(chunks) + await this.tiles[key]?.loadChunks(chunks) this.clearLoading(loadingID) } }) From 7ce238978515d4291f6ecb8b3879a52f223780fa Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Wed, 14 Feb 2024 12:27:31 -0600 Subject: [PATCH 2/9] cleaner --- src/tiles.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tiles.js b/src/tiles.js index bf7aa97..68759fb 100644 --- a/src/tiles.js +++ b/src/tiles.js @@ -403,9 +403,9 @@ export const createTiles = (regl, opts) => { tileIndex[0], tileIndex[1] ) - if (!this.tiles[key]?.hasLoadedChunks(chunks)) { + if (this.tiles[key] && !this.tiles[key].hasLoadedChunks(chunks)) { const loadingID = this.setLoading('chunk') - await this.tiles[key]?.loadChunks(chunks) + await this.tiles[key].loadChunks(chunks) this.clearLoading(loadingID) } }) From 20cae37f340516da729eb7359decd4b4ee3ae700 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Wed, 14 Feb 2024 14:24:10 -0600 Subject: [PATCH 3/9] revert tile check --- src/tiles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tiles.js b/src/tiles.js index 68759fb..ac3a62b 100644 --- a/src/tiles.js +++ b/src/tiles.js @@ -403,7 +403,7 @@ export const createTiles = (regl, opts) => { tileIndex[0], tileIndex[1] ) - if (this.tiles[key] && !this.tiles[key].hasLoadedChunks(chunks)) { + if (!this.tiles[key].hasLoadedChunks(chunks)) { const loadingID = this.setLoading('chunk') await this.tiles[key].loadChunks(chunks) this.clearLoading(loadingID) From 3d3ea9f87506b6b05fecd7b2b948c4111f70b371 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Wed, 14 Feb 2024 14:33:24 -0600 Subject: [PATCH 4/9] update usecontrols - default values, rm unfired 'load' listener --- src/use-controls.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/use-controls.js b/src/use-controls.js index 9f5c391..1d3a465 100644 --- a/src/use-controls.js +++ b/src/use-controls.js @@ -3,9 +3,9 @@ import { flushSync } from 'react-dom' import { useMapbox } from './mapbox' export const useControls = () => { - const [zoom, setZoom] = useState() - const [center, setCenter] = useState() const { map } = useMapbox() + const [zoom, setZoom] = useState(map.getZoom()) + const [center, setCenter] = useState(map.getCenter()) const updateControlsSync = useCallback(() => { flushSync(() => { @@ -15,10 +15,10 @@ export const useControls = () => { }, []) useEffect(() => { - setZoom(map.getZoom()) - setCenter(map.getCenter()) - map.on('load', updateControlsSync) map.on('move', updateControlsSync) + return () => { + map.off('move', updateControlsSync) + } }, [map]) return { center: center, zoom: zoom } From a456b0d048e78cea15c3cca6b7ecb1ec17711448 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Wed, 14 Feb 2024 14:46:42 -0600 Subject: [PATCH 5/9] cleanup line break --- src/tiles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/tiles.js b/src/tiles.js index ac3a62b..b9928c6 100644 --- a/src/tiles.js +++ b/src/tiles.js @@ -403,6 +403,7 @@ export const createTiles = (regl, opts) => { tileIndex[0], tileIndex[1] ) + if (!this.tiles[key].hasLoadedChunks(chunks)) { const loadingID = this.setLoading('chunk') await this.tiles[key].loadChunks(chunks) From 6d4c2cb70378ecace63abb367e02583c40e13443 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Thu, 15 Feb 2024 08:52:11 -0600 Subject: [PATCH 6/9] setup listener once --- src/use-controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/use-controls.js b/src/use-controls.js index 1d3a465..8e778e9 100644 --- a/src/use-controls.js +++ b/src/use-controls.js @@ -19,7 +19,7 @@ export const useControls = () => { return () => { map.off('move', updateControlsSync) } - }, [map]) + }, []) return { center: center, zoom: zoom } } From d34970f953d52ef8cafdf36e6b0b0e1f6bcd7555 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Thu, 15 Feb 2024 09:07:45 -0600 Subject: [PATCH 7/9] update level after initialization --- src/tiles.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/tiles.js b/src/tiles.js index b9928c6..dd5298b 100644 --- a/src/tiles.js +++ b/src/tiles.js @@ -384,6 +384,9 @@ export const createTiles = (regl, opts) => { this.queryRegion = async (region, selector) => { await this.initialized + // update level since it can get out of sync when switching raster layers + this.level = zoomToLevel(this.zoom, this.maxZoom) + const tiles = getTilesOfRegion( region, this.level, From 15279ecf159106ff20fb1ecb39644258e5620d10 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Thu, 15 Feb 2024 09:18:14 -0600 Subject: [PATCH 8/9] revert useEffect deps change --- src/use-controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/use-controls.js b/src/use-controls.js index 8e778e9..1d3a465 100644 --- a/src/use-controls.js +++ b/src/use-controls.js @@ -19,7 +19,7 @@ export const useControls = () => { return () => { map.off('move', updateControlsSync) } - }, []) + }, [map]) return { center: center, zoom: zoom } } From d4e264a1c094b467199c09972a774253e04d2955 Mon Sep 17 00:00:00 2001 From: Shane Loeffler Date: Thu, 15 Feb 2024 09:29:23 -0600 Subject: [PATCH 9/9] move level update to initialization step --- src/tiles.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/tiles.js b/src/tiles.js index dd5298b..7b283fc 100644 --- a/src/tiles.js +++ b/src/tiles.js @@ -120,6 +120,7 @@ export const createTiles = (regl, opts) => { }) => { if (setMetadata) setMetadata(metadata) this.maxZoom = maxZoom + this.level = zoomToLevel(this.zoom, maxZoom) const position = getPositions(tileSize, mode) this.position = regl.buffer(position) this.size = tileSize @@ -384,9 +385,6 @@ export const createTiles = (regl, opts) => { this.queryRegion = async (region, selector) => { await this.initialized - // update level since it can get out of sync when switching raster layers - this.level = zoomToLevel(this.zoom, this.maxZoom) - const tiles = getTilesOfRegion( region, this.level,