I can't seem to get the AreaMeasurement2D not to crash. Try the following code and you'll get a error in the geometry engine when you try the area measurement tool. Any idea what is going on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>MapImageLayer - create dynamic map layers - 4.11</title>
<link rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#info-div {
background-color: white;
border-radius: 8px;
padding: 8px;
opacity: 0.92;
}
#topbar {
background: #fff;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #d3d3d3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/widgets/Legend",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D",
], function (Map, MapView, MapImageLayer, Legend, DistanceMeasurement2D, AreaMeasurement2D) {
var activeWidget;
// helper function to create a symbol
function createSymbol(color) {
return {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: color,
outline: {
width: 0.5,
color: [255, 255, 255, 0.4]
},
style: "solid"
};
}
/*****************************************************************
* Create renderers for each block groups sublayer
*****************************************************************/
var populationRenderer = {
type: "class-breaks", // autocasts as new ClassBreaksRenderer()
field: "POP07_SQMI",
defaultSymbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
style: "backward-diagonal",
outline: {
width: 0.5,
color: "gray"
}
},
classBreakInfos: [
{
minValue: 0,
maxValue: 5100,
label: "<5,100",
symbol: createSymbol("#e6eecf")
},
{
minValue: 5100,
maxValue: 16200,
label: "5,100 - 16,200",
symbol: createSymbol("#9bc4c1")
},
{
minValue: 16200,
maxValue: 42200,
label: "16,200 - 42,200",
symbol: createSymbol("#69a8b7")
},
{
minValue: 42000,
maxValue: 1000000,
label: ">42,200",
symbol: createSymbol("#3d6a89")
}
]
};
var renterUnitsRenderer = {
type: "class-breaks", // autocasts as new ClassBreaksRenderer()
field: "RENTER_OCC",
normalizationField: "HSE_UNITS",
normalizationType: "field",
defaultSymbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
style: "backward-diagonal",
outline: {
width: 0.5,
color: "gray"
}
},
classBreakInfos: [
{
minValue: 0,
maxValue: 0.25,
label: "< 25%",
symbol: createSymbol("#f8e3c2")
},
{
minValue: 0.25,
maxValue: 0.5,
label: "25% - 50%",
symbol: createSymbol("#e5998c")
},
{
minValue: 0.5,
maxValue: 0.75,
label: "50% - 75%",
symbol: createSymbol("#d86868")
},
{
minValue: 0.75,
maxValue: 1.0,
label: "> 75%",
symbol: createSymbol("#9b3557")
}
]
};
var ageRenderer = {
type: "class-breaks", // autocasts as new ClassBreaksRenderer()
field: "MED_AGE",
defaultSymbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
style: "backward-diagonal",
outline: {
width: 0.5,
color: "gray"
}
},
classBreakInfos: [
{
minValue: 0,
maxValue: 30,
label: "< 30",
symbol: createSymbol("#f6e5cf")
},
{
minValue: 30,
maxValue: 36,
label: "30 - 36",
symbol: createSymbol("#dd9fbf")
},
{
minValue: 36,
maxValue: 42,
label: "36 - 42",
symbol: createSymbol("#cc71b4")
},
{
minValue: 42,
maxValue: 100,
label: "> 42",
symbol: createSymbol("#8c3c88")
}
]
};
/*****************************************************************
* Create a MapImageLayer instance with three sublayers pointing
* to a single map service layer. Each layer uses the same data
* but dynamically renders the data differently for each layer.
*****************************************************************/
var layer = new MapImageLayer({
url:
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
title: "Census Demographics",
sublayers: [
{
id: 0,
title: "Population/square mile",
renderer: populationRenderer,
visible: false,
labelingInfo: [
{
labelExpression: "[POP2007]",
labelPlacement: "always-horizontal",
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "#3d6a89",
haloSize: 1,
font: {
size: 10
}
},
minScale: 37000
}
],
// points to the block groups layer
source: {
mapLayerId: 1
}
},
{
id: 1,
title: "% Renter Occupied Housing Units",
renderer: renterUnitsRenderer,
definitionExpression: "POP07_SQMI >= 5100",
visible: true,
labelingInfo: [
{
labelExpression: "[RENTER_OCC]",
labelPlacement: "always-horizontal",
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "#9b3557",
haloSize: 1,
font: {
size: 10
}
},
minScale: 37000
}
],
// points to the block groups layer
source: {
mapLayerId: 1
}
},
{
id: 2,
title: "Median Age",
renderer: ageRenderer,
definitionExpression: "POP07_SQMI >= 5100",
visible: false,
labelingInfo: [
{
labelExpression: "[MED_AGE]",
labelPlacement: "always-horizontal",
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "#8c3c88",
haloSize: 1,
font: {
size: 10
}
},
minScale: 37000
}
],
// points to the block groups layer
source: {
mapLayerId: 1
}
}
]
});
/*****************************************************************
* Add the layer to a map
*****************************************************************/
var map = new Map({
basemap: "gray",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 13,
center: [-80.57, 33.78]
});
var legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
view.ui.add("info-div", "top-right");
view.when(function () {
// set sublayer visibility depending on the selected layer
document
.getElementById("layer-select")
.addEventListener("change", function (event) {
var newValue = parseInt(event.target.value);
layer.sublayers.forEach(function (sublayer) {
sublayer.visible = newValue === sublayer.id;
});
});
});
view.ui.add("topbar", "top-right");
document
.getElementById("distanceButton")
.addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("distance");
} else {
setActiveButton(null);
}
});
document
.getElementById("areaButton")
.addEventListener("click", function () {
setActiveWidget(null);
if (!this.classList.contains("active")) {
setActiveWidget("area");
} else {
setActiveButton(null);
}
});
function setActiveWidget(type) {
switch (type) {
case "distance":
activeWidget = new DistanceMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("distanceButton"));
break;
case "area":
activeWidget = new AreaMeasurement2D({
view: view
});
// skip the initial 'new measurement' button
activeWidget.viewModel.newMeasurement();
view.ui.add(activeWidget, "top-right");
setActiveButton(document.getElementById("areaButton"));
break;
case null:
if (activeWidget) {
view.ui.remove(activeWidget);
activeWidget.destroy();
activeWidget = null;
}
break;
}
}
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements.classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="topbar">
<button class="action-button esri-icon-minus"
id="distanceButton"
type="button"
title="Measure distance between two or more points"></button>
<button class="action-button esri-icon-polygon"
id="areaButton"
type="button"
title="Measure area"></button>
</div>
<div id="info-div">
Select a demographic variable<br /><br />
<select id="layer-select">
<option value="0">Population density</option>
<option value="1" selected>Renter occupied units</option>
<option value="2">Median age</option>
</select>
</div>
</body>
</html>
