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