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

ChrisSergent · ‎11-19-2014

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>

OwenEarley · ‎11-20-2014

There is a syntax error on the line that is throwing the error. However, you don't need to wrap the layer drawing options code in a function - my example was just taken from the ESRI documentation.

    // start measurement tool - the current layer we are measuring is the operational layer
    // error follows this line
    // function (LayerDrawingOptions, SimpleRenderer) {  <-- Remove this line
    var layerDrawingOptions = [];
    var layerDrawingOption = new LayerDrawingOptions();
    var sfs = new SimpleFillSymbol(
         "solid",
         new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
         null
    );
    // } <-- Remove function closure

    layerDrawingOption.renderer = new SimpleRenderer(sfs);

    // The dynamicData object does not exist in your code - it is from the ESRI sample:
    //dynamicData.setLayerDrawingOptions(layerDrawingOptions);
    operationalLayer.setLayerDrawingOptions(layerDrawingOptions);

There still appear to be some issues with the measure functionality.

View solution in original post

OwenEarley · ‎11-19-2014

Your operationalLayer is an ArcGISDynamicMapServiceLayer and this object does not have a setRenderer() method. You should use the setLayerDrawingOptions() method instead:

require([
  "esri/layers/LayerDrawingOptions", "esri/renderers/SimpleRenderer", ...
], function(LayerDrawingOptions, SimpleRenderer, ... ) {
    var layerDrawingOptions = [];
    var layerDrawingOption = new LayerDrawingOptions();
    var sfs = new SimpleFillSymbol( 
                    "solid", 
                    new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2), 
                    null 
                    );

    layerDrawingOption.renderer = new SimpleRenderer(sfs);

    // change 1 to the layer index that you want to modify:
    layerDrawingOptions[1] = layerDrawingOption;

    dynamicData.setLayerDrawingOptions(layerDrawingOptions);
    ...
});

ChrisSergent · ‎11-20-2014

I updated my code as follows, but I get the error Uncaught SyntaxError: Unexpected token ( at the line where I say error occurs here:

<!DOCTYPE html>

<html>

<head>

<title>Create a Map</title>

<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>

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/LayerDrawingOptions",

"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, LayerDrawingOptions, 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

// error follows this line

function (LayerDrawingOptions, SimpleRenderer) {

var layerDrawingOptions = [];

var layerDrawingOption = new LayerDrawingOptions();

var sfs = new SimpleFillSymbol(

"solid",

new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),

null

);

}

layerDrawingOption.renderer = new SimpleRenderer(sfs);

// change 1 to the layer index that you want to modify:

layerDrawingOptions[1] = layerDrawingOption;

dynamicData.setLayerDrawingOptions(layerDrawingOptions);

//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>

<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>

</div>

</body>

</html>

OwenEarley · ‎11-20-2014

There is a syntax error on the line that is throwing the error. However, you don't need to wrap the layer drawing options code in a function - my example was just taken from the ESRI documentation.

    // start measurement tool - the current layer we are measuring is the operational layer
    // error follows this line
    // function (LayerDrawingOptions, SimpleRenderer) {  <-- Remove this line
    var layerDrawingOptions = [];
    var layerDrawingOption = new LayerDrawingOptions();
    var sfs = new SimpleFillSymbol(
         "solid",
         new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),
         null
    );
    // } <-- Remove function closure

    layerDrawingOption.renderer = new SimpleRenderer(sfs);

    // The dynamicData object does not exist in your code - it is from the ESRI sample:
    //dynamicData.setLayerDrawingOptions(layerDrawingOptions);
    operationalLayer.setLayerDrawingOptions(layerDrawingOptions);

There still appear to be some issues with the measure functionality.

ChrisSergent · ‎11-20-2014

Your updated code worked. I just needed to move my dojo require statements above the dijits to line up with the declarations in the function.