Clubs.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Feature Widget - 4.9</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    .esri-feature {
      letter-spacing: 0em;
      font-family: "Avenir Next", "Helvetica Neue", sans-serif;
      line-height: 1.55rem;
      font-feature-settings: "liga"1, "calt"0;
      background: #fff;
      padding: 1em;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/widgets/Feature"
    ], function(Map, FeatureLayer, MapView, Feature) {

      const fLayer = new FeatureLayer({
        portalItem: {
          id: "7791b80c774c48a893ced9296a657e26"
        }
      });

      const map = new Map({
        basemap: "topo",
        layers: [fLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-6, 55],
        scale: 500000,
		popup:{
			dockEnabled:true,
			dockOptions:{
				buttonEnabled:true,
				breakpoint:false

			}
		}
      });

      view.when().then(function() {
        // Create a default graphic for when the application starts
        const graphic = {
          popupTemplate: {
            content: "Mouse over features to show details..."
          }
        };

        // Provide graphic to a new instance of a Feature widget
        const feature = new Feature({
          graphic: graphic,
          view: view
        });

        view.ui.add(feature, "bottom-left");

        view.whenLayerView(fLayer).then(function(layerView) {
          let highlight;
          // listen for the pointer-move event on the View
          view.on("pointer-move", function(event) {
            // Perform a hitTest on the View
            view.hitTest(event).then(function(event) {
              // Make sure graphic has a popupTemplate
              let results = event.results.filter(function(
                result) {
                return result.graphic.layer.popupTemplate;
              });
              let result = results[0];
              highlight && highlight.remove();
              // Update the graphic of the Feature widget
              // on pointer-move with the result
              if (result) {
                feature.graphic = result.graphic;
                highlight = layerView.highlight(result.graphic);
                view.ui.add(feature, "bottom-left");
              } else {
                feature.graphic = graphic;
              }
            });
          });
        });

      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>