Map has whitespace when loading

UmbraVenus — Tue, 07 Feb 2023 17:48:10 GMT

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> </> ); }

Re: Map has whitespace when loading

Sage_Wall — Thu, 09 Feb 2023 13:29:56 GMT

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.

topic Re: Map has whitespace when loading in ArcGIS JavaScript Maps SDK Questions

Map has whitespace when loading

Re: Map has whitespace when loading