html,
body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

#viewDiv {
	width: 100%;
}

main {
	display: flex;
	height: 100%;
}

.container {
	width: 400px;
	height: 100vh;
	overflow-y: auto;
}

.ui-info--count {
    margin-left: 1rem;
    margin-right: 1rem;
}

import ArcGISMap from "https://js.arcgis.com/next/@arcgis/core/Map.js";
import MapView from "https://js.arcgis.com/next/@arcgis/core/views/MapView.js";
import FeatureLayer from "https://js.arcgis.com/next/@arcgis/core/layers/FeatureLayer.js";
import { whenFalseOnce } from "https://js.arcgis.com/next/@arcgis/core/core/watchUtils.js";
import Feature from "https://js.arcgis.com/next/@arcgis/core/widgets/Feature.js";

const fLayer = new FeatureLayer({
	portalItem: {
		id: "f430d25bf03744edbb1579e18c4bf6b8"
	},
	layerId: 2,
	outFields: ["*"]
});

const map = new ArcGISMap({
	basemap: "gray-vector",
	layers: [fLayer]
});

const view = new MapView({
	container: "viewDiv",
	map,
	center: [-118, 34],
	zoom: 12
});

const featureTarget = document.getElementById("featureTarget");
const btnZoom = document.getElementById("btnZoom");
const previous = document.getElementById("btnPrevious");
const next = document.getElementById("btnNext");
const info = document.getElementById("infoCount");

const feature = new Feature({
	view,
	container: featureTarget
});

view.when(async () => {
	// do stuff here
	let highlight;
	let currIndex = 0;
	let totalCount = 1;
	const layerView = await view.whenLayerView(fLayer);
	await whenFalseOnce(view, "updating");
	const query = fLayer.createQuery();
	query.geometry = view.extent;
	const { features } = await layerView.queryFeatures(query);
	
	const update = () => {
		if (currIndex < 0) {
			currIndex = features.length - 1;
		}
		else if (currIndex === features.length) {
			currIndex = 0;
		}
		
		feature.graphic = features[currIndex];
		info.innerText = `${currIndex + 1} of ${features.length}`;
		
		// highlight
		highlight && highlight.remove();
		highlight = layerView.highlight(feature.graphic);
	};
	
	btnPrevious.addEventListener("click", () => {
		currIndex = currIndex - 1;
		update();
	});
	btnNext.addEventListener("click", () => {
		currIndex = currIndex + 1;
		update();
	});
	
	btnZoom.addEventListener("click", () => {
		view.goTo({
			target: feature.graphic
		});
	});
	
	update();
	
});