AnsweredAssumed Answered

measurement widget not work with editing widget

Question asked by msa3d007 on Dec 13, 2014
Latest reply on Dec 13, 2014 by rscheitlin

I am trying to add measurement tool to my existing code,  but the measurement widget didn't  appear ,

please help me to add this widget

Thanx

m-sa3d

 

 

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>new</title>

 

 

    <link rel="stylesheet" href="http://gis-server/arcgis_js_api/library/3.11/3.11/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://gis-server/arcgis_js_api/library/3.11/3.11/esri/css/esri.css">

    <style>

      html,body{height:100%;width:100%;margin:0;overflow:hidden;}

      #map{

        border:solid 2px #808775;

        -moz-border-radius:4px;

        -webkit-border-radius:4px;

        border-radius:4px;

        margin:5px;

        padding:0px;

      }

 

   #rightPane {

      width: 18.3%;

        border:solid 2px #808775;

        -moz-border-radius:4px;

        -webkit-border-radius:4px;

        border-radius:4px;

        margin:5px;

        padding:0px;

      }

     #titlePane{

        width:350px;

      }

   #mesurepane{

        width:350px;

      }

      #header{

        font-size: 1.1em;

        font-family: sans-serif;

        padding-left: 1em;

        padding-top:4px;

        color:#660000;

      }

      .templatePicker {

        border: none;

      }

 

 

     .claro .dijitTitlePaneTitle {

        -moz-border-radius:4px;

        -webkit-border-radius:4px;

        border-radius:4px;

        margin:5px;

        padding:5px;

      }

      .claro .dijitTitlePaneContentOuter {

        border:solid #97DCF2 1px;

        -moz-border-radius:4px;

        -webkit-border-radius:4px;

        border-radius:4px;

        margin:5px;

        padding:5px;

      }

 

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }

      .dj_ie .simpleInfoWindow .content {position: relative;}

    </style>

  

    <script src="http://gis-server/arcgis_js_api/library/3.11/3.11/init.js"></script>

    <script>

      var map;

    

      require([

        "esri/map",

        "esri/tasks/GeometryService",

        "esri/toolbars/edit",

        "esri/layers/ArcGISTiledMapServiceLayer",

        "esri/layers/FeatureLayer",

 

        "esri/Color",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol",

 

        "esri/dijit/editing/Editor",

        "esri/dijit/editing/TemplatePicker",

        "esri/config",

        "dojo/i18n!esri/nls/jsapi",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

"dojo/dom",

        "esri/sniff",     

        "esri/SnappingManager",

        "esri/dijit/Measurement",     

        "esri/renderers/SimpleRenderer",   

        "esri/symbols/SimpleFillSymbol",

        "esri/dijit/Scalebar",

        "dijit/TitlePane",

        "dijit/form/CheckBox",

 

 

        "dojo/domReady!"

 

 

      ], function(

        Map, GeometryService, Edit,

        ArcGISTiledMapServiceLayer, FeatureLayer,

        Color, SimpleMarkerSymbol, SimpleLineSymbol,

        Editor, TemplatePicker,

        esriConfig, jsapiBundle,

        arrayUtils, parser, keys, dom,

        has,SnappingManager, Measurement,SimpleRenderer,SimpleFillSymbol

 

      ) {

        parser.parse();     

 

 

        // snapping is enabled for this sample - change the tooltip to reflect this

        jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start +  "<br>Press <b>ALT</b> to enable snapping";

     

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html

        esriConfig.defaults.io.proxyUrl = "/proxy"; 

esriConfig.defaults.io.alwaysUseProxy = false;

 

 

        //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.

        esriConfig.defaults.geometryService = new GeometryService("http://gis-server:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

 

 

 

        map = new Map("map", {

          basemap: "satellite",

          center: [44.3, 18.2],

          zoom: 11,

        });

 

 

        map.on("layers-add-result", initEditor);

     

 

 

 

 

        var roads = new FeatureLayer("http://gis-server:6080/arcgis/rest/services/Thar_Map/MapServer/1",{

          mode: FeatureLayer.MODE_ONDEMAND,

          outFields: ['*']

        });

 

 

        var Landuse = new FeatureLayer("http://gis-server:6080/arcgis/rest/services/test/MapServer/10",{

          mode: FeatureLayer.MODE_ONDEMAND,

          outFields: ['*']

        });

           var CAD = new FeatureLayer("http://gis-server:6080/arcgis/rest/services/Thar_Map/MapServer/2", {

              mode: FeatureLayer.MODE_ONDEMAND,

              outFields: ["*"]

          });

          var Names = new FeatureLayer("http://gis-server:6080/arcgis/rest/services/Thar_Map/MapServer/0", {

              mode: FeatureLayer.MODE_ONDEMAND,

              outFields: ["*"]

          });

          var thar = new FeatureLayer("http://gis-server:6080/arcgis/rest/services/Thar_Map/MapServer/4", {

              mode: FeatureLayer.MODE_ONDEMAND,

              outFields: ["*"]

          });

 

 

 

 

        map.addLayers([Landuse,roads,CAD,Names,thar]);

 

  var measurement = new Measurement({

        map: map

        }, dom.byId("measurementDiv"));

        measurement.startup();

 

 

        function initEditor(evt) {

          var templateLayers = arrayUtils.map(evt.layers, function(result){

            return result.layer;

          });

          var templatePicker = new TemplatePicker({

            featureLayers: templateLayers,

            grouping: true,

            rows: "auto",

            columns: 3

          }, "templateDiv");

          templatePicker.startup();

 

 

          var layers = arrayUtils.map(evt.layers, function(result) {

            return { featureLayer: result.layer };

          });

          var settings = {

            map: map,

            templatePicker: templatePicker,

            layerInfos: layers,

            toolbarVisible: true,

            createOptions: {

              polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],

              polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,

                Editor.CREATE_TOOL_CIRCLE,

                Editor.CREATE_TOOL_TRIANGLE,

                Editor.CREATE_TOOL_RECTANGLE

              ]

            },

            toolbarOptions: {

              reshapeVisible: true

            }

          };

 

 

          var params = {settings: settings};  

          var myEditor = new Editor(params,'editorDiv');

          //define snapping options

          var symbol = new SimpleMarkerSymbol(

            SimpleMarkerSymbol.STYLE_CROSS,

            15,

            new SimpleLineSymbol(

              SimpleLineSymbol.STYLE_SOLID,

              new Color([255, 0, 0, 0.5]),

              5

            ),

            null

          );

          map.enableSnapping({

            snapPointSymbol: symbol,

            tolerance: 20,

            snapKey: keys.ALT

          });

  

          myEditor.startup();

        }

 

 

 

      });

    </script>

  </head>

  <body class="claro">

    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"

    style="width:100%; height:100%;">

      <div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">

        Edit Hydrography

      </div>

         <div id="rightPane"data-dojo-type="dijit/layout/ContentPane"  data-dojo-props="region:'right'">

          <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">

            <div id="measurementDiv"></div>

          </div>

 

 

 

         <div id="draw" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'draw',open:'false'">

         <div id="templateDiv"></div>

         <div id="editorDiv"></div>

          </div>

      </div>

            <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">

        <div style="position:absolute; right:20px; top:10px; z-Index:999;">

    </div>

  </body>

</html>

Attachments

Outcomes