Measurement Dijit Not Working

Anonymous User · ‎10-29-2013

Given the code below, I receive the error: "Uncaught TypeError: Cannot call method 'areasAndLengths' of null" when finishing the area measurement. And receive the error: "Uncaught TypeError: Cannot call method 'project' of null" when attempting the line and point measurements. Has anyone else seen this?

dojo.require("esri.dijit.Measurement");

.....

gsvc = new esri.tasks.GeometryService("http://myServerURLHere/arcgis/rest/services/Utilities/Geometry/GeometryServer");

.....

var measurement = new esri.dijit.Measurement({
map: map,
defaultAreaUnit: esri.Units.ACRES,
defaultLengthUnit: esri.Units.FEET
}, dojo.byId('measurementDiv'));
measurement.startup();

....

<div style="position:absolute; left:20px; bottom:20px; z-Index:999;">
   <div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', style: 'font-family: Tahoma; font-size: 12px', closable:'false', open:0">
     <div id="measurementDiv"></div>
   </div>
</div>

JanelYang · ‎10-29-2013

Hi,

The measurement part in your code looks fine. What is the GeometryService for? If you can provide your complete code, we can look at it and figure out what happened.

The API of measurement widget is fairly straightforward. Here is a simple sample you can look at:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
      }
      #measurementDiv {
        position: absolute;
        right: 10px;
        top: 10px;
        background-color: #fff;
      }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      require(["esri/map", "esri/dijit/Measurement", "esri/units", "dojo/domReady!"], function(Map, Measurement, Units) {
        var map = new Map("map", {
          basemap: "topo",
          center: [-122.45,37.75],
          zoom: 13
        });
        
        var measurement = new Measurement({
          map: map,
          defaultAreaUnit: Units.ACRES,
          defaultLengthUnit: Units.FEET
        }, dojo.byId('measurementDiv'));
        measurement.startup();
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
    <div id="measurementDiv"></div>
  </body>
</html>

KevinMacLeod1 · ‎11-05-2013

Gibby by any chance have you set async to true in dojoconfig?

JimBridge · ‎02-13-2014

I was getting the 'areasAndLengths' of null error till I set the defaults geometry service. Once I did that it worked.

esriConfig.defaults.geometryService = new GeometryService(geometryServiceUrl)
        var measurement = new esri.dijit.Measurement({
            map: map
        }, dojo.byId('measurementDiv'));
        measurement.startup();