Select to view content in your preferred language

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

2155
4
Jump to solution
11-19-2014 02:01 PM
ChrisSergent
Deactivated User

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>

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
OwenEarley
Frequent Contributor

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

4 Replies
OwenEarley
Frequent Contributor

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

    ...

});

0 Kudos
ChrisSergent
Deactivated User

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>

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

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

0 Kudos
OwenEarley
Frequent Contributor

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

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.

0 Kudos