AnsweredAssumed Answered

Receiving undefined is not a function when I try to implement the Measurement example

Question asked by csergent08 Champion on Nov 19, 2014
Latest reply on Nov 20, 2014 by csergent08

I tried create the measurement tool based on our web services and I receive the following error message: Uncaught TypeError: undefined is not a function for line 127

 

What is causing that? Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <title>Create a Map</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
        <style>
            html, body, #mapDiv 
            {
                padding:0;
                margin:0;
                height:100%;
                width:100%;
            }
            
            #titlePane
            {
                width:240px;
                position:absolute;
                right:20px;
                top:10px;
                z-index:999;
            }
            .soria  .dijitTitlePaneTitle {
                background: #fff;
                font-weight:600;
                border: none;
                border-bottom:solid 1px #29201A;
                border-top:solid 1px #29201A;
            }
            
            .soria .dijitTitlePaneTitleHover 
            {
                background:#eee;
            }
            
            .soria .dijitTitlePaneTitleActive 
            {
                background:#808775;
            }
            
            .soria .dijitTitlePaneContentOuter 
            {
                border-right: none;
                border-bottom: none;
                border-left: none;
            }
            
            
        </style>
        <script src="http://js.arcgis.com/3.11/"></script>
        <script>
            var map;
            require(["esri/map", "esri/config",
                     "dojo/parser",
                     "esri/renderers/SimpleRenderer",
                     "esri/Color",
                     "esri/dijit/Measurement",
                     "esri/dijit/Scalebar",
                     "esri/geometry/Extent",
                     "esri/layers/ArcGISDynamicMapServiceLayer",
                     "esri/layers/ArcGISTiledMapServiceLayer",
                     "esri/layers/FeatureLayer",
                     "esri/SnappingManager",
                     "esri/sniff",
                     "esri/symbols/SimpleFillSymbol",
                     "esri/symbols/SimpleLineSymbol",
                     "esri/tasks/GeometryService",
                     "dijit/layout/BorderContainer",
                     "dijit/layout/ContentPane",
                     "dijit/form/CheckBox",
                     "dijit/TitlePane",
                     "dojo/dom",
                     "dojo/keys",
                     "dojo/on",


                     "dojo/domReady!"], function (Map, esriConfig, parser, SimpleRenderer, Color, Measurement, Scalebar, Extent,
                                                 ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer, SnappingManager,
                                                 has, SimpleFillSymbol, SimpleLineSymbol, GeometryService, dom, keys, on
            ) {


                         parser.parse();
                         // set custom extent
                         var initialExtent = new Extent({
                             "xmin": 777229.03,
                             "ymin": 1133467.92,
                             "xmax": 848340.14,
                             "ymax": 1185634.58,
                             "spatialReference": {
                                 "wkid": 3435
                             }
                         });


                         // create map and set slider style to small
                         map = new Map("mapDiv", {
                             showAttribution: false,
                             sliderStyle: "small",
                             extent: initialExtent
                         });


                         // add imagery
                         var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");
                         map.addLayer(tiled);
                         // set operational layers
                         var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });
                         // add operational layers
                         map.addLayer(operationalLayer);


                         // declare geometry service
                         esriConfig.defaults.geometryService = new GeometryService("http://maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer");


                         // start measurement tool - the current layer we are measuring is the operational layer
                         var sfs = new SimpleFillSymbol(
                         "solid",
                         new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
                         null
                         );
                         
                         operationalLayer.setRenderer(new SimpleRenderer(sfs));
                         
                         //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
                         var snapManager = map.enableSnapping({
                             snapKey: has("mac") ? keys.META : keys.CTRL
                         });


                         var layerInfos = [{
                             layer: operationalLayer
                         }];


                         snapManager.setLayerInfos(layerInfos);


                         var measurement = new Measurement({
                             map: map
                         }, dom.byId("measurementDiv"));
                         measurement.startup();


                         // end measurement tool


                     }
            );
        </script>
    </head>
    <body class="soria">
        <div id="mapDiv"></div>
        <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closeable:'false',open:'false'">
            <div id="measurementDiv"></div>
            <span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
        </div>
    </body>





</html>

Outcomes