AreaMeasurement2D crash

298
6
04-11-2019 11:03 AM
KevinMahone
New Contributor

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>

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Kevin,

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

0 Kudos
Noah-Sager
Esri Regular Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

IE11 on Windows 7 shows this issue

Version: 11.0.9600.18282
Update Versions: 11.0.30 (KB3148198)

Noah-Sager
Esri Regular Contributor

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

Version: 11.648.17134.0

Update Version: 11.0.115

0 Kudos
KevinMahone
New Contributor

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.

0 Kudos
Noah-Sager
Esri Regular Contributor

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

0 Kudos