Sketch and Query

Sketch and Fetch

The ArcGIS API for JavaScript can do so much more than make pretty maps. It has a suite of tools you can use to make some awesome interactive applications. One of those tools is the Sketch widget. Sketch is great for redlining and just adding some dummy graphics to a map. Something else the API is great at is tool for performing queries and creating interactive applications. So why not do both?

Let’s create a basic app to include the Sketch widget.

const graphicsLayer = new GraphicsLayer({
	listMode: 'hide',
});

const featureLayer = new FeatureLayer({
	portalItem: {
		id: 'b234a118ab6b4c91908a1cf677941702',
	},
	outFields: ['NAME', 'STATE_NAME', 'VACANT', 'HSE_UNITS'],
	title: 'U.S. counties',
	opacity: 0.8,
});

const map = new ArcGISMap({
	basemap: 'streets',
	layers: [featureLayer, graphicsLayer],
});
const view = new MapView({
	container: 'viewDiv',
	map: map,
});

const layerList = new LayerList({ view });

const sketch = new Sketch({
	view,
	layer: graphicsLayer,
});

view.ui.add(layerList, 'top-right');
view.ui.add(sketch, 'top-right');

One thing to note is you can set the listMode of the layer to "hide", so it doesn’t show up in the LayerList. It’s not really needed there when it’s used with the Sketch widget.

Once we’ve added all the widgets, we can wait for the layer to finish loading and use it as the maps viewable extent.

view.when(async () => {
	await featureLayer.when();
	view.extent = featureLayer.fullExtent;
	const layerView = await view.whenLayerView(featureLayer);
});

Now, we can get crafty and use the Sketch to do some cool stuff.

• Define some statistic
• Create a query
• Query the features
• …Profit!

sketch.on('create', async ({ graphic, state }) => {
	if (state === 'complete') {
		const avgStatistic = new StatisticDefinition({
			onStatisticField: 'VACANT',
			outStatisticFieldName: 'VACANT_AVG',
			statisticType: 'avg',
		});

		const query = featureLayer.createQuery();
		query.geometry = graphic.geometry;
		query.outStatistics = [avgStatistic];

		const featureSet = await layerView.queryFeatures(query);
		console.log(featureSet);
	}
});

Don’t forget, queries don’t just return data and geometries, you can run statistics directly against the data. Not only that, but in this case, the query is on the FeatureLayerView, which means no data is fetched from the server. Even when you do statistics queries, the API has a built-in client-side query engine. That’s nuts!

Here is a live demo.

If you want to see me walk through this in more detail, check out the video below!