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));
});