Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 5 additions & 19 deletions modules/react-mapbox/src/components/source.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -25,7 +25,8 @@ export type SourceProps = (SourceSpecification | CanvasSourceSpecification) & {
let sourceCounter = 0;

function createSource(map: MapInstance, id: string, props: SourceProps) {
if (map.isStyleLoaded()) {
// @ts-ignore
if (map.style && map.style._loaded) {
const options = {...props};
delete options.id;
delete options.children;
Expand Down Expand Up @@ -83,12 +84,11 @@ 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('styledata', forceUpdate);
forceUpdate();

Expand Down Expand Up @@ -124,20 +124,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(
Expand Down
Loading