require([
  "esri/Map",
  "esri/layers/FeatureLayer",
  "esri/views/MapView",
  'esri/widgets/Feature'
], function(ArcGISMap, FeatureLayer, MapView, Feature) {

  const fLayer = new FeatureLayer({
    portalItem: {
      id: "b8c35f6b170340ca9f90c94724423851"
    }
  });
  
  const map = new ArcGISMap({
    basemap: "gray-vector",
    layers: [fLayer]
  });
  
  const view = new MapView({
    container: "viewDiv",
    map: map
  });
  
  fLayer.load().then(_ => {
    view.extent = fLayer.fullExtent;
  });
  
  view.when().then(_ => {
    const graphic = {
      geometry: view.center,
      popupTemplate: {
        content: "Mouse over features to show details..."
      }
    };
    
    const feature = new Feature({
      graphic, view
    });
    
    view.whenLayerView(fLayer).then(layerView => {
      let highlight;
      view.on("pointer-move", event => {
        view.hitTest(event).then(({ results }) => {
          const result = results[0];
          highlight && highlight.remove();
          if (result) {
            feature.graphic = result.graphic;
            highlight = layerView.highlight(result.graphic);
          }
          else {
            feature.graphic = graphic;
          }
        });
      });
    });
    
    view.ui.add(feature, "top-right");
  });
});