From 09de59887b56d9e859647853d6a5907ff89f73c3 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Mon, 14 Apr 2025 08:52:04 -0700 Subject: [PATCH 1/4] Revert "Fix addSource condition (#2524)" This reverts commit 19e778bc7c67b3b2cd2c780fc4449a7f9c6fbaf6. --- modules/react-mapbox/src/components/source.ts | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/modules/react-mapbox/src/components/source.ts b/modules/react-mapbox/src/components/source.ts index c6804dbfc..7f9ea8b46 100644 --- a/modules/react-mapbox/src/components/source.ts +++ b/modules/react-mapbox/src/components/source.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import {useContext, useEffect, useMemo, useCallback, useState, useRef, cloneElement} from 'react'; +import {useContext, useEffect, useMemo, useState, useRef, cloneElement} from 'react'; import {MapContext} from './map'; import assert from '../utils/assert'; import {deepEqual} from '../utils/deep-equal'; @@ -83,16 +83,17 @@ export function Source(props: SourceProps) { const [, setStyleLoaded] = useState(0); const id = useMemo(() => props.id || `jsx-source-${sourceCounter++}`, []); - const forceUpdate = useCallback(() => setStyleLoaded(version => version + 1), []); useEffect(() => { if (map) { - // Fired on initial load signaling the map is ready to add custom sources - // Subsequently fired on style changes + /* global setTimeout */ + const forceUpdate = () => setTimeout(() => setStyleLoaded(version => version + 1), 0); + map.on('load', forceUpdate); map.on('styledata', forceUpdate); forceUpdate(); return () => { + map.off('load', forceUpdate); map.off('styledata', forceUpdate); // @ts-ignore if (map.style && map.style._loaded && map.getSource(id)) { @@ -124,20 +125,6 @@ export function Source(props: SourceProps) { } propsRef.current = props; - useEffect(() => { - if (!source) { - // on `styledata` event, `map.isStyleLoaded()` still returns false. - // `load` and `style.load` only fire once and not when `isStyleLoaded` changes from true to false to true. - // `sourcedata` potentially suggests that `isStyleLoaded` has changed. But it fires on every tile load. - // Unsubscribe once source is added. - map.on('sourcedata', forceUpdate); - return () => { - map.off('sourcedata', forceUpdate); - }; - } - return undefined; - }, [map, source]); - return ( (source && React.Children.map( From 1bc3c9beca507f4d9317aec8e4078b045e77cf7b Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Mon, 14 Apr 2025 08:52:13 -0700 Subject: [PATCH 2/4] Revert "Fix source loading condition (#2513)" This reverts commit 3673af7ec24b3f69378d3447a9ab5c02ccaea951. --- examples/vite.config.local.js | 4 ++-- modules/react-mapbox/src/components/source.ts | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js index 8ab680e10..d6642c298 100644 --- a/examples/vite.config.local.js +++ b/examples/vite.config.local.js @@ -9,8 +9,8 @@ export default defineConfig(async () => { resolve: { alias: { // Use root dependencies - 'react-map-gl/mapbox': join(rootDir, './modules/react-mapbox/src'), - 'react-map-gl/maplibre': join(rootDir, './modules/react-maplibre/src'), + 'react-map-gl/mapbox': join(rootDir, './modules/main/src/mapbox.ts'), + 'react-map-gl/maplibre': join(rootDir, './modules/main/src/maplibre.ts'), react: join(rootDir, './node_modules/react'), 'react-dom': join(rootDir, './node_modules/react-dom') } diff --git a/modules/react-mapbox/src/components/source.ts b/modules/react-mapbox/src/components/source.ts index 7f9ea8b46..6dad8a8ab 100644 --- a/modules/react-mapbox/src/components/source.ts +++ b/modules/react-mapbox/src/components/source.ts @@ -25,6 +25,7 @@ export type SourceProps = (SourceSpecification | CanvasSourceSpecification) & { let sourceCounter = 0; function createSource(map: MapInstance, id: string, props: SourceProps) { + // @ts-ignore if (map.isStyleLoaded()) { const options = {...props}; delete options.id; @@ -88,12 +89,10 @@ export function Source(props: SourceProps) { if (map) { /* global setTimeout */ const forceUpdate = () => setTimeout(() => setStyleLoaded(version => version + 1), 0); - map.on('load', forceUpdate); map.on('styledata', forceUpdate); forceUpdate(); return () => { - map.off('load', forceUpdate); map.off('styledata', forceUpdate); // @ts-ignore if (map.style && map.style._loaded && map.getSource(id)) { From f2afa505f8f9b084570bf18cc023b77b199a32b1 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Mon, 14 Apr 2025 08:52:22 -0700 Subject: [PATCH 3/4] Revert "Fix style loading check on Source layers (#2377) (#2493)" This reverts commit f9cd7b5aa894267dc8fdb41359c798505ebf215e. --- modules/react-mapbox/src/components/source.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/react-mapbox/src/components/source.ts b/modules/react-mapbox/src/components/source.ts index 6dad8a8ab..3139d61a7 100644 --- a/modules/react-mapbox/src/components/source.ts +++ b/modules/react-mapbox/src/components/source.ts @@ -26,7 +26,7 @@ let sourceCounter = 0; function createSource(map: MapInstance, id: string, props: SourceProps) { // @ts-ignore - if (map.isStyleLoaded()) { + if (map.style && map.style._loaded) { const options = {...props}; delete options.id; delete options.children; From 2f66a24a1e33729207390de0bbf8d1d789a4dde9 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Mon, 14 Apr 2025 19:06:00 -0700 Subject: [PATCH 4/4] Fix local test config --- examples/vite.config.local.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/vite.config.local.js b/examples/vite.config.local.js index d6642c298..8ab680e10 100644 --- a/examples/vite.config.local.js +++ b/examples/vite.config.local.js @@ -9,8 +9,8 @@ export default defineConfig(async () => { resolve: { alias: { // Use root dependencies - 'react-map-gl/mapbox': join(rootDir, './modules/main/src/mapbox.ts'), - 'react-map-gl/maplibre': join(rootDir, './modules/main/src/maplibre.ts'), + 'react-map-gl/mapbox': join(rootDir, './modules/react-mapbox/src'), + 'react-map-gl/maplibre': join(rootDir, './modules/react-maplibre/src'), react: join(rootDir, './node_modules/react'), 'react-dom': join(rootDir, './node_modules/react-dom') }