topic Re: 2D-Measurement Error with 4.12 in ArcGIS JavaScript Maps SDK Questions

2D-Measurement Error with 4.12

Esad — Sat, 11 Dec 2021 12:22:07 GMT

Hello,

I have an app that uses both distance and area measurement widgets. There is no problem with 4.10 and 4.11 APIs but with the new version, 4.12, I get errors when I click on the widgets. I am not sure if the problem is because of the materialize.css and If you guys have any ideas, I would be appreciated.

The errors are below.

Uncaught (in promise) TypeError: Cannot read property 'center' of null
 at Object.a._updatePolylines (DistanceMeasurement2DTool.js:15)
 at Object.<anonymous> (DistanceMeasurement2DTool.js:6)
 at f (dojo.js:386)
 at a.p [as callback] (dojo.js:387)
 at n (dojo.js:394)
 at dojo.js:399‍‍‍‍‍‍‍

AreaMeasurement2DTool.js:10 Uncaught (in promise) TypeError: Cannot read property 'coord' of undefined
 at AreaMeasurement2DTool.js:10
 at Array.map (<anonymous>)
 at Function.c.updateViewModelAndCreateGraphics (AreaMeasurement2DTool.js:10)
 at Object.c._updateGraphics (AreaMeasurement2DTool.js:17)
 at Object.<anonymous> (AreaMeasurement2DTool.js:6)
 at f (dojo.js:386)
 at a.p [as callback] (dojo.js:387)
 at n (dojo.js:394)
 at dojo.js:399‍‍‍‍‍‍‍‍‍‍

Re: 2D-Measurement Error with 4.12

BenElan — Tue, 09 Jul 2019 22:32:15 GMT

Can you please attach your code?

Re: 2D-Measurement Error with 4.12

Esad — Sat, 11 Dec 2021 12:22:10 GMT

createWidget_MeasurementIn2D(){
 var _app = this
// Add Distance Button
 var _html = ''
 _html += '<div ' 
 _html += ' id="distanceButton" class="waves-effect esri-widget--button esri-widget esri-interactive tooltipped" '
 _html += ' data-position="left" data-tooltip="Measure distance →">'
 _html += ' <span class="esri-icon-polyline";></span>'
 _html += '</div>'
var _domElement = domConstruct.toDom(_html); 
 domConstruct.place(_domElement,"viewDiv") 
 
 //Materialize Tooltips
 if (window.M){
 var _tooltips = document.querySelectorAll('.tooltipped');
 var _tooltips_instances = M.Tooltip.init(_tooltips);
 var _thisTooltip = M.Tooltip.getInstance(_domElement) 
 }
 _app.data.mapView.ui.add("distanceButton", "top-right");
// Add Area Button
 var _html = ''
 _html += '<div ' 
 _html += ' id="areaButton" class="waves-effect esri-widget--button esri-widget esri-interactive tooltipped" '
 _html += ' data-position="left" data-tooltip="Measure area →">'
 _html += ' <span class="esri-icon-polygon";></span>'
 _html += '</div>'
var _domElement = domConstruct.toDom(_html); 
 domConstruct.place(_domElement,"viewDiv") 
 
 //Materialize Tooltips
 if (window.M){
 var _tooltips = document.querySelectorAll('.tooltipped');
 var _tooltips_instances = M.Tooltip.init(_tooltips);
 var _thisTooltip = M.Tooltip.getInstance(_domElement) 
 }
 _app.data.mapView.ui.add("areaButton", "top-right");
//Set Active 2D-Measurement widgets.
 document
 .getElementById("distanceButton")
 .addEventListener("click", function() {
 setActiveWidget(null);
 if (!this.classList.contains('active2D')) {
 setActiveWidget('distance');
 }else {
 setActiveButton(null);
 }
 });
document
 .getElementById("areaButton")
 .addEventListener("click", function() {
 setActiveWidget(null);
 if (!this.classList.contains('active2D')) {
 setActiveWidget('area');
 } else {
 setActiveButton(null);
 }
 });
function setActiveWidget(type) {
 switch (type) {
 case "distance": 
 _app.activeWidget = new DistanceMeasurement2D({
 view: _app.data.mapView,
 unit: "feet",
 });
_app.data.mapView.ui.add(_app.activeWidget, "top-right");
 setActiveButton(document.getElementById('distanceButton'));
 // skip the initial 'new measurement' button
 _app.activeWidget.viewModel.newMeasurement();
 document.getElementById('distanceButton').style.cssText = 'background-color:#5E2590; color:#e4e4e4; border:1px solid #0c0800;';
 break;
case "area":
 _app.activeWidget = new AreaMeasurement2D({
 view: _app.data.mapView,
 unit: "square-us-feet"
 });
_app.data.mapView.ui.add(_app.activeWidget, "top-right");
 setActiveButton(document.getElementById('areaButton'));
 
 // skip the initial 'new measurement' button
 _app.activeWidget.viewModel.newMeasurement();
 document.getElementById('areaButton').style.cssText = 'background-color:#5E2590; color:#e4e4e4; border:1px solid #0c0800;';
 break;
 case null:
 if (_app.activeWidget) {
 _app.data.mapView.ui.remove(_app.activeWidget);
 _app.activeWidget.destroy();
 _app.activeWidget = null;
 document.getElementById('distanceButton').style.cssText = '';
 document.getElementById('areaButton').style.cssText = '';
 }
 break;
 }
 }
function setActiveButton(selectedButton) {
 // focus the view to activate keyboard shortcuts for sketching
 _app.data.mapView.focus();
 var elements = document.getElementsByClassName("active2D");
 for (var i = 0; i < elements.length; i++) {
 elements[i].classList.remove("active2D");
 }
 if (selectedButton) {
 selectedButton.classList.add("active2D");
 }
 }
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: 2D-Measurement Error with 4.12

BenElan — Sat, 13 Jul 2019 00:10:21 GMT

Hi Esad,

The problem is coming from the units. if you switch 'feet' and 'square-us-feet' to 'metric' it should work.

Thanks for the find. This is an equivalency issue with 4.12. I have submitted a bug:

BUG-000123678

Re: 2D-Measurement Error with 4.12

Justin_Greco — Mon, 15 Jul 2019 12:49:35 GMT

Looks like if you base map has a spatial reference other than Mercator (stateplane in my case) the measurement widgets gives you a "Cannot read property 'coordsys' of null" error. I think the changes in the Geodetic Computations section of the 4.12 release notes could be the reason.

Re: 2D-Measurement Error with 4.12

Esad — Mon, 15 Jul 2019 17:01:45 GMT

Hi Ben,

Changing the units worked. I am able to switch the units after the measurements, so seems like the initial measurement in feet was the case.

Thanks.