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
Can you please attach your code?
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");
}
}
}
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
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.
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.