AreaMeasurement2D crash

KevinMahone — Thu, 11 Apr 2019 18:03:44 GMT

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

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

Re: AreaMeasurement2D crash

RobertScheitlin__GISP — Fri, 12 Apr 2019 13:34:08 GMT

Kevin,

I do see the error in IE 11 but not in Chrome or Firefox. Looks like something to report to esri tech support.

Re: AreaMeasurement2D crash

Noah-Sager — Fri, 12 Apr 2019 21:08:51 GMT

I tested the provided code with Chrome, Edge, and IE11, and could not see an error.

Kevin, could you provide some information as to your OS version and browser version? Also, can you run the sample hosted on the developer's site?

https://developers.arcgis.com/javascript/latest/sample-code/widgets-measurement-2d/index.html

Re: AreaMeasurement2D crash

RobertScheitlin__GISP — Sat, 13 Apr 2019 13:16:45 GMT

IE11 on Windows 7 shows this issue

Version: 11.0.9600.18282
Update Versions: 11.0.30 (KB3148198)

Re: AreaMeasurement2D crash

Noah-Sager — Mon, 15 Apr 2019 15:49:27 GMT

Thanks Robert. I am using IE on Windows 10 without issue.

Version: 11.648.17134.0

Update Version: 11.0.115

Re: AreaMeasurement2D crash

KevinMahone — Tue, 16 Apr 2019 14:55:51 GMT

I see the problem in IE11 and Chrome on a Windows 7 box. We can replicate it in office on a Windows 10 box as well.

The ESRI sample works fine but this problem arose in my larger application so I put together the sample I sent which is just a mashup of two of ESRI's samples so something is definitely not working as very well here.

Re: AreaMeasurement2D crash

Noah-Sager — Thu, 25 Apr 2019 17:07:33 GMT

I'm not sure Kevin. With Windows 10, I tested the provided code on Chrome, Edge, and IE11, and could not see an error.

topic Re: AreaMeasurement2D crash in ArcGIS JavaScript Maps SDK Questions

AreaMeasurement2D crash

Re: AreaMeasurement2D crash

Re: AreaMeasurement2D crash

Re: AreaMeasurement2D crash

Re: AreaMeasurement2D crash

Re: AreaMeasurement2D crash

Re: AreaMeasurement2D crash