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>
Solved! Go to Solution.
Mohamed,
Your issue was the order of your requires and vars. You should have dijit form and layout requires at the end of your requires list.
Below is the corrected order.
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", "dojo/dom", "esri/sniff", "esri/SnappingManager", "esri/dijit/Measurement", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/dijit/Scalebar", "dijit/TitlePane", "dijit/form/CheckBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, GeometryService, Edit, ArcGISTiledMapServiceLayer, FeatureLayer, Color, SimpleMarkerSymbol, SimpleLineSymbol, Editor, TemplatePicker, esriConfig, jsapiBundle, arrayUtils, parser, keys, dom,has, SnappingManager, Measurement, SimpleRenderer, SimpleFillSymbol, Scalebar ) {
Mohamed,
Your issue was the order of your requires and vars. You should have dijit form and layout requires at the end of your requires list.
Below is the corrected order.
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", "dojo/dom", "esri/sniff", "esri/SnappingManager", "esri/dijit/Measurement", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/dijit/Scalebar", "dijit/TitlePane", "dijit/form/CheckBox", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, GeometryService, Edit, ArcGISTiledMapServiceLayer, FeatureLayer, Color, SimpleMarkerSymbol, SimpleLineSymbol, Editor, TemplatePicker, esriConfig, jsapiBundle, arrayUtils, parser, keys, dom,has, SnappingManager, Measurement, SimpleRenderer, SimpleFillSymbol, Scalebar ) {
worked perfectly , Thank you
Mohamed,
You are welcome. Please make sure you mark this question as answered by clicking on the Correct answer link on my reply.