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>
