Map has whitespace when loading

UmbraVenus

Hi, as you can see here, when i zoom in/out of a map, it sometimes render whitespace, and when I use the sketch layer output to generate a graphic layer(i.e add a graphic layer to the map) it takes a second to render while the screen is just white. I wonder what could be the cause and how should I fix it?

 

And here is the code:

 

export default function geocodeConsistencyMap(): ReactElement {
    const initialGeoBound = {
        meter_geo: true,
        northmost: 90,
        westmost: -180,
        southmost: 10,
        eastmost: -50
    };

    const [geoBound, setGeoBound] = useState(initialGeoBound);

    const currentData = useMeterIDValidationQuery({
        body: geoBound
    });

    const [size, setSize] = useState<SizeType>('large');

    const graphicsLayer = new GraphicsLayer();

    const map = new Map({
        basemap: "streets-vector",
        layers: [graphicsLayer],
    });

    const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 5,
        center: [-80,35]
    })

    const rectangleGeos = (rings) => {
        let lats = []
        let lons = []
        rings = rings[0]
        for (let i=0; i<rings.length;i++) {
            
            lats.push(rings[i][1])
            lons.push(rings[i][0])
        }
 
        const drawnGeos = {
            meter_geo: true,
            northmost: Math.max(...lats),
            southmost: Math.min(...lats),
            westmost: Math.min(...lons),
            eastmost: Math.max(...lons)
        }
        console.log("drawn geos" + drawnGeos['northmost'])
        return drawnGeos
    }

    const getGeos = (data) => {
        const markerLayer = new GraphicsLayer();
        if(!data){return ;}
        const result = []
        const  markerSymbol = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            color: [226, 119, 40],
            outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 2
            }
        };

        data.forEach(element => result.push(new Graphic({
            geometry:
                {
                    type: "point",
                    longitude: element.lat_lon.split(",")[1],
                    latitude: element.lat_lon.split(",")[0]
                },
            objectID: element.meter_id,
            symbol: markerSymbol,
            attributes: {
                lat_lon: element.lat_lon,
            }
        })))
        // Create a symbol for rendering the graphic
        try {
            const fillSymbol = {
                type: "simple-fill", // autocasts as new SimpleFillSymbol()
                color: [227, 139, 79, 0.8],
                outline: {
                    // autocasts as new SimpleLineSymbol()
                    color: [255, 255, 255],
                    width: 1
                }
            };
            const polygon = {
                type: "polygon",
                rings: rings.current['rings']
            }
            result.push({geometry: polygon, symbol: fillSymbol})
        } catch (e) {
        }
        result.forEach(element => markerLayer.add(element));
        return markerLayer
    }

    let rings = useRef({'rings' :[
        [geoBound.westmost, geoBound.northmost],
        [geoBound.westmost, geoBound.southmost,],
        [geoBound.eastmost, geoBound.southmost,],
        [geoBound.eastmost, geoBound.northmost,],
        [geoBound.westmost, geoBound.northmost],
    ]})

    const sketch = new Sketch({
            layer: graphicsLayer,
            view: view,
            availableCreateTools: ['rectangle'],
            // graphic will be selected as soon as it is created
            creationMode: "single"
    });
    view.ui.add(sketch, "top-right");
    useEffect(() => {
        sketch.on('create', (evt) => {
            if (evt.state === 'complete') {
                graphicsLayer.remove(evt.graphic);
                rings.current = webMercatorUtils.webMercatorToGeographic(evt.graphic.geometry);
                
                const newGeoBound = rectangleGeos(rings.current['rings'])
                
                setGeoBound(newGeoBound);
                
                
            }
        })
    }, [sketch])

    map.add(getGeos(currentData.data?.invalid_geo.hits))

    return (
        <>
            <Row type="flex">
                <Col flex="1 0 100%" span={24}>
                    <h6>Geocode Consistency: draw your geo-bounds here</h6>
                    <Divider/>
                    <div id="viewDiv" style={{height: "60vh"}}>
                    </div>
                    <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
                        <CSVLink data={currentData.data?.invalid_geo.hits || "incomplete"} target="_blank" className={styles.download_report}>
                            Download Output
                        </CSVLink>
                    </Button>
                </Col>
            </Row>
        </>
    );
}

 

Sage_Wall

Hi @UmbraVenus , it looks like the white areas are present where the basemap is still requesting and or receiving basemap tiles from the server thru the internet.  Response and load times will vary based on internet speed.