<div id="viewDiv"></div>
<div id="infoDiv">
  <div id="legendDiv"></div>
</div>
html,
body,
#viewDiv {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#infoDiv {
  top: 0px;
  right: 0px;
  position: absolute;
  z-index: 2;
  opacity: 0.9;
  background-color: whitesmoke;
  padding: 8px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
}
require([
  "esri/arcgis/utils",
  "esri/Color",
  "esri/map",
  "esri/graphic",
  "esri/layers/GraphicsLayer",
  "esri/layers/FeatureLayer",
  "esri/dijit/PopupTemplate",
  "esri/dijit/Legend",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/geometry/geometryEngine",
  "esri/geometry/Multipoint"
], function(
  arcgisUtils,
  Color,
  Map,
  Graphic,
  GraphicsLayer,
  FeatureLayer,
  PopupTemplate,
  Legend,
  SimpleFillSymbol,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  geometryEngine,
  Multipoint
) {
  const cvhLayer = new GraphicsLayer();

  const pline = new SimpleLineSymbol();
  pline.setColor(new Color([255, 255, 255, 1]));
  const fill = new SimpleFillSymbol();
  fill.setOutline(pline);
  fill.setColor(new Color([0, 197, 255, 0.25]));

  const line = new SimpleLineSymbol();
  line.setColor(new Color([0, 255, 255, 0.25]));

  const marker = new SimpleMarkerSymbol();
  marker.setOutline(line);
  marker.setColor(new Color([0, 92, 230, 1]));
  marker.setSize(8);
  arcgisUtils
    .createMap("ffcb9c2836a0484595ca59e32a0d549f", "viewDiv")
    .then(({ map }) => {
      const layerId = map.graphicsLayerIds[0];
      const layer = map.getLayer(layerId);

      map.addLayer(cvhLayer, 0);

      layer.on("mouse-over", ({ graphic }) => {
        cvhLayer.clear();
        if (graphic.isAggregate()) {
          const graphics = graphic.getChildGraphics();
          const geoms = graphics.map(x => x.geometry);
          const multiPoints = geometryEngine.union(geoms);
          //const cvh = geometryEngine.convexHull(multiPoints);
          //const cvhGraphic = new Graphic(cvh, fill);
          const g = new Graphic(multiPoints, marker);
          cvhLayer.add(g);
          //cvhLayer.add(cvhGraphic);
        }
      });

      map.on("extent-change", () => {
        cvhLayer.clear();
      });

      const legend = new Legend(
        {
          map: map,
          layerInfos: [
            {
              layer: layer,
              title: "Voting Precincts 2008"
            }
          ]
        },
        "legendDiv"
      );

      legend.startup();
    })
    .otherwise(error => console.warn(error));
});

External CSS

  1. https://js.arcgis.com/3.22/esri/css/esri.css

External JavaScript

  1. https://js.arcgis.com/3.22/