AnsweredAssumed Answered

Latitude and longitude do not update in my measurement widget

Question asked by csergent08 Champion on Dec 8, 2014
Latest reply on Dec 10, 2014 by csergent08

Upon initial click I will receive the latitude and longitude using the point on my measurement widget. After that the latitude and longitude won't update. Any ideas why?

 

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/soria/soria.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;

                left:20px;

                bottom: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",

                     "dojo/dom",

                     "dojo/keys",

                     "dojo/on",

                     "dijit/layout/BorderContainer",

                     "dijit/layout/ContentPane",

                     "dijit/TitlePane",

                     "dijit/form/CheckBox",

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

                             logo:false

                         });

 

 

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

 

 

 

 

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