I was having trouble figuring out how to make the measurement example with a dynamic map service work, so I tried publishing a feature service and using it like a dynamic map service. Apparently that won't work. I tried this because I had not gotten a response on how to make the dynamic map service work.
Here is my code using a dynamic map service:
<!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
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>
