@wsdot/arcgis-feature-select
Creates an HTML select control for selecting features.

Installation
npm install -S @wsdot/arcgis-feature-select
Use
Example: Use with ArcGIS API for JavaScript (v 4.X)
The following example is written in TypeScript.
import {
createFeatureSelect,
IFeatureSelect
} from "@wsdot/arcgis-feature-select";
import { Polygon } from "esri/geometry";
import Extent from "esri/geometry/Extent";
import Graphic from "esri/Graphic";
import FeatureLayer from "esri/layers/FeatureLayer";
import EsriMap from "esri/Map";
import MapView from "esri/views/MapView";
const map = new EsriMap({
basemap: "streets-vector"
});
const [xmin, ymin, xmax, ymax] = [-124.79, 45.54, -116.91, 49.05];
const waExtent = new Extent({ xmin, ymin, xmax, ymax });
const center = waExtent.center;
const view = new MapView({
container: "mapView",
map,
zoom: 7,
center
});
const featureSelect = document.createElement("select") as IFeatureSelect;
featureSelect.disabled = true;
view.ui.add(featureSelect, "top-right");
const featureLayer = new FeatureLayer({
url:
"https://data.wsdot.wa.gov/arcgis/rest/services/Shared/CountyBoundaries/MapServer/0"
});
featureSelect.addEventListener("featureselect", ev => {
const features = ev.detail;
if (features && features.length > 0) {
const graphics = features.map(Graphic.fromJSON);
view.goTo(graphics);
}
});
featureLayer
.queryFeatures({
where: "1=1",
maxAllowableOffset: 100,
returnGeometry: true,
outFields: ["JURLBL"],
orderByFields: ["JURLBL"]
})
.then(featureSet => {
featureSelect.disabled = false;
createFeatureSelect(featureSelect, featureSet as any);
});