GitHub user phu0n9 added a comment to the discussion: Deck.gl map change style directly on dashboard
@dosu i have the following code: ``` /* eslint-disable react/jsx-sort-default-props */ /* eslint-disable react/sort-prop-types */ /* eslint-disable react/jsx-handler-names */ /* eslint-disable react/forbid-prop-types */ /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, * software distributed under the License is distributed on an * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND, either express or implied. See the License for the * specific language governing permissions and limitations * under the License. */ import { forwardRef, memo, ReactNode, useCallback, useEffect, useImperativeHandle, useState, } from 'react'; import { isEqual, update } from 'lodash'; import { DeckGL, CompassWidget, ZoomWidget, FullscreenWidget } from '@deck.gl/react'; import { Layer } from '@deck.gl/core'; import { JsonObject, JsonValue, styled, usePrevious } from '@superset-ui/core'; import Map from 'react-map-gl/maplibre'; import maplibregl from 'maplibre-gl'; import Tooltip, { TooltipProps } from './components/Tooltip'; import 'mapbox-gl/dist/mapbox-gl.css'; import { Viewport } from './utils/fitViewport'; import 'maplibre-gl/dist/maplibre-gl.css'; import RangeInput from './components/RangeInput'; import {TileLayer} from '@deck.gl/geo-layers'; import {BitmapLayer} from '@deck.gl/layers'; import '@deck.gl/widgets/stylesheet.css'; import 'maplibre-gl/dist/maplibre-gl.css'; const TICK = 250; // milliseconds function formatTimeLabel(seconds: number) { const h = Math.floor(seconds / 3600); const m = Math.floor(seconds / 60) % 60; const s = seconds % 60; return [h, m, s].map(x => x.toString().padStart(2, '0')).join(':'); } export type DeckGLContainerProps = { viewport: Viewport; setControlValue?: (control: string, value: JsonValue) => void; mapStyle?: string; mapboxApiAccessToken: string; children?: ReactNode; width: number; height: number; layers: (Layer | (() => Layer))[]; onViewportChange?: (viewport: Viewport) => void; }; export const DeckGLContainer = memo( forwardRef((props: DeckGLContainerProps, ref) => { const [tooltip, setTooltip] = useState<TooltipProps['tooltip']>(null); const [lastUpdate, setLastUpdate] = useState<number | null>(null); const [viewState, setViewState] = useState(props.viewport); const prevViewport = usePrevious(props.viewport); const [currentTime, setCurrentTime] = useState(0); const [currentLayer, setCurrentLayer] = useState<Layer[]>([]); const animationSpeed = 10; const INITIAL_VIEW_STATE = { ...viewState, maxZoom: 23, minZoom: 0 } const updatedLayers = [ new TileLayer({ id: 'IntensityLayer', data: 'http://storage.cockpit.hell.ee.loc/intensity/{z}/{x}/{y}.png', maxZoom: 23, minZoom: 2, zoomOffset: 0, renderSubLayers: props => { const {boundingBox} = props.tile; return new BitmapLayer(props, { data: null, image: props.data, bounds: [boundingBox[0][0], boundingBox[0][1], boundingBox[1][0], boundingBox[1][1]] }); }, visible: false, }), new TileLayer({ id: 'HillshadeLayer', data: 'http://storage.cockpit.hell.ee.loc/hillshades/{z}/{x}/{y}.png', maxZoom: 23, minZoom: 2, zoomOffset: 0, renderSubLayers: props => { const {boundingBox} = props.tile; return new BitmapLayer(props, { data: null, image: props.data, bounds: [boundingBox[0][0], boundingBox[0][1], boundingBox[1][0], boundingBox[1][1]] }); }, visible: true, }), ] console.log(updatedLayers) useImperativeHandle(ref, () => ({ setTooltip }), []); const tick = useCallback(() => { // Rate limiting updating viewport controls as it triggers lots of renders if (lastUpdate && Date.now() - lastUpdate > TICK) { const setCV = props.setControlValue; if (setCV) { setCV('viewport', viewState); } setLastUpdate(null); } }, [lastUpdate, props.setControlValue, viewState]); useEffect(() => { const timer = setInterval(tick, TICK); return clearInterval(timer); }, [tick]); useEffect(() => { if (!isEqual(props.viewport, prevViewport)) { setViewState(props.viewport); } }, [prevViewport, props.viewport]); const onViewStateChange = useCallback( ({ viewState }: { viewState: JsonObject }) => { setViewState(viewState as Viewport); setLastUpdate(Date.now()); }, [], ); const layers = useCallback(() => { // Support for layer factory if (props.layers.some(l => typeof l === 'function')) { return props.layers.map(l => typeof l === 'function' ? l() : l, ) as Layer[]; } return props.layers as Layer[]; }, [props.layers]); const { children = null, height, width, mapStyle } = props; useEffect(() => { const newLayers = layers(); const time = Math.floor((currentTime / 3600) % 11); // Update the data for the first layer with filtered newData const tempLayers: Layer[] = newLayers.map((layer, index) => { if (index === 0) { const { data } = layer.props; const newData = data.filter(item => { if (item.extraProps.year_slider) { return item.extraProps.year_slider === time; } return item; }); // Return a new layer with updated data return layer.clone({ data: newData }); } return layer; }); // updatedLayers.push(...tempLayers); // console.log(updatedLayers) setCurrentLayer(tempLayers); }, [currentTime, layers]); return ( <> <div style={{ position: 'relative', width, height }}> <DeckGL controller={true} width={width} height={height} layers={currentLayer} viewState={viewState} onViewStateChange={onViewStateChange} initialViewState={INITIAL_VIEW_STATE} > <Map reuseMaps mapLib={maplibregl} mapStyle={mapStyle} /> <ZoomWidget /> <FullscreenWidget /> <CompassWidget /> </DeckGL> {children} <RangeInput min={0} max={39600} value={currentTime} animationSpeed={animationSpeed} formatLabel={formatTimeLabel} onChange={setCurrentTime} /> </div> <Tooltip tooltip={tooltip} /> </> ); }), ); export const DeckGLContainerStyledWrapper = styled(DeckGLContainer)` .deckgl-tooltip > div { overflow: hidden; text-overflow: ellipsis; } `; export type DeckGLContainerHandle = typeof DeckGLContainer & { setTooltip: (tooltip: ReactNode) => void; }; ``` why can't i render updatedLayers GitHub link: https://github.com/apache/superset/discussions/32149#discussioncomment-13297111 ---- This is an automatically sent email for notifications@superset.apache.org. To unsubscribe, please send an email to: notifications-unsubscr...@superset.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org
