What is the least complex way to label a arcgisdynamic service layer that is using a map service comprised of two grids covering two counties with a minzoom of 40000? The label would be the id for each grid. Let me know if more information is needed.
Solved! Go to Solution.
Brandon,
Here is a sample.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css" />
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var app = {};
require([
"esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/LayerDrawingOptions", "esri/layers/LabelClass", "esri/symbols/TextSymbol",
"dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
LayerDrawingOptions, LabelClass, TextSymbol, parser
) {
parser.parse();
app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";
app.defaultFrom = "#ffffcc";
app.defaultTo = "#006837";
app.map = new Map("map", {
center: [-85.787, 39.782],
zoom: 9,
slider: false
});
var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
app.map.addLayer(basemap);
var ref = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");
urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
id: "us_counties",
opacity: 0.7,
visible: false
});
usaLayer.setVisibleLayers([2]);
app.map.addLayer(usaLayer);
var optionsArray = [];
var drawingOptions = new LayerDrawingOptions();
var labelClass = new LabelClass({
labelExpression: '[' + "POP2000" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol(),
minScale: 840000
});
drawingOptions.labelingInfo = [labelClass];
drawingOptions.showLabels = true;
optionsArray[2] = drawingOptions;
app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray);
app.map.getLayer("us_counties").show();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
Brandon,
Here is a sample.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css" />
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var app = {};
require([
"esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/LayerDrawingOptions", "esri/layers/LabelClass", "esri/symbols/TextSymbol",
"dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
LayerDrawingOptions, LabelClass, TextSymbol, parser
) {
parser.parse();
app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";
app.defaultFrom = "#ffffcc";
app.defaultTo = "#006837";
app.map = new Map("map", {
center: [-85.787, 39.782],
zoom: 9,
slider: false
});
var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
app.map.addLayer(basemap);
var ref = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");
urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
id: "us_counties",
opacity: 0.7,
visible: false
});
usaLayer.setVisibleLayers([2]);
app.map.addLayer(usaLayer);
var optionsArray = [];
var drawingOptions = new LayerDrawingOptions();
var labelClass = new LabelClass({
labelExpression: '[' + "POP2000" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol(),
minScale: 840000
});
drawingOptions.labelingInfo = [labelClass];
drawingOptions.showLabels = true;
optionsArray[2] = drawingOptions;
app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray);
app.map.getLayer("us_counties").show();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
my version is as follows:
Both set visible layers in the array are shown in the map although the label only shows for the 3rd layer in the array. Also the halo settings are not shown. What am I missing?
urlDyn = "https://sv07gdchfeat10.ct.dot.ca.gov/server/rest/services/D7Geospatial/CirgisLariacIndex2018"; homelandSecurity = new ArcGISDynamicMapServiceLayer(urlDyn, { id: "index_filenames", opacity: 0.7, visible: true }); homelandSecurity.setVisibleLayers([1,3]); map.addLayer(homelandSecurity); var optionsArray = []; var drawingOptions = new LayerDrawingOptions(); var labelClass = new LabelClass({ labelExpression: '[' + "FILENAME" + ']', labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal', symbol: new TextSymbol({ haloSize: 2, haloColor: [255,255,255] }), minScale: 30000 }); drawingOptions.labelingInfo = [labelClass]; drawingOptions.showLabels = true; optionsArray[1,3] = drawingOptions; map.getLayer("
index_filenames
").setLayerDrawingOptions(optionsArray);
map.getLayer("
index_filenames
").show(); });
Brandon,
Do both layers in the map service have the same field name "FILENAME"?
Yes
exact same casing also
This should work then right?
Brandon,
No
optionsArray[1,3] = drawingOptions;
is not valid code.
You would need
optionsArray[1] = drawingOptions;
optionsArray[3] = drawingOptions;
But I would use a whole other LayerDrawingOptions class for the other layer.
Here is another working sample labeling two different layers:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css" />
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
var app = {};
require([
"esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/LayerDrawingOptions", "esri/layers/LabelClass", "esri/symbols/TextSymbol",
"dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
LayerDrawingOptions, LabelClass, TextSymbol, parser
) {
parser.parse();
app.dataUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2";
app.defaultFrom = "#ffffcc";
app.defaultTo = "#006837";
app.map = new Map("map", {
center: [-85.787, 39.782],
zoom: 9,
slider: false
});
var basemap = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
app.map.addLayer(basemap);
var ref = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");
urlDyn = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
usaLayer = new ArcGISDynamicMapServiceLayer(urlDyn, {
id: "us_counties",
opacity: 0.7,
visible: false
});
usaLayer.setVisibleLayers([1,3]);
app.map.addLayer(usaLayer);
var optionsArray = [];
var drawingOptions = new LayerDrawingOptions();
var labelClass = new LabelClass({
labelExpression: '[' + "POP2000" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol(),
maxScale: 840000
});
drawingOptions.labelingInfo = [labelClass];
drawingOptions.showLabels = true;
var labelClass2 = new LabelClass({
labelExpression: '[' + "POP2000" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol(),
minScale: 540000
});
var drawingOptions2 = new LayerDrawingOptions();
drawingOptions2.labelingInfo = [labelClass2];
drawingOptions2.showLabels = true;
optionsArray[1] = drawingOptions2;
optionsArray[3] = drawingOptions;
app.map.getLayer("us_counties").setLayerDrawingOptions(optionsArray);
app.map.getLayer("us_counties").show();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
Thanks Robert. I can't get the halos to show.
var homelandSecurity = new ArcGISDynamicMapServiceLayer("https://sv07gdchfeat10.ct.dot.ca.gov/server/rest/services/D7Geospatial/CirgisLariacIndex2018/MapServ...", {
id: "index_filenames",
visible: true
}); //D7 Server
homelandSecurity.setVisibleLayers([1,3]);
map.addLayer(homelandSecurity);
var optionsArray = [];
var drawingOptions = new LayerDrawingOptions();
var labelClass = new LabelClass({
labelExpression: '[' + "FILENAME" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol({
type: "esriTS",
color: [0,0,0],
haloColor: [0,245,255],
haloSize: 2,
"font": {
"family": "Arial",
"weight": "bold",
"size": "14px"
}
}),
minScale: 35000
});
drawingOptions.labelingInfo = [labelClass];
drawingOptions.showLabels = true;
var labelClass2 = new LabelClass({
labelExpression: '[' + "FILENAME" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol({
"type": "esriTS",
"color": [0,0,0],
"haloColor": [0,245,255],
"haloSize": 2,
"font": {
"family": "Arial",
"weight": "bold",
"size": "14px"
}
}),
minScale: 35000
});
var drawingOptions2 = new LayerDrawingOptions();
drawingOptions2.labelingInfo = [labelClass2];
drawingOptions2.showLabels = true;
optionsArray[1] = drawingOptions;
optionsArray[3] = drawingOptions2;
map.getLayer("index_filenames").setLayerDrawingOptions(optionsArray);
map.getLayer("index_filenames").show()
Brandon,
Replace your:
var labelClass2 = new LabelClass({
labelExpression: '[' + "FILENAME" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: new TextSymbol({
"type": "esriTS",
"color": [0,0,0],
"haloColor": [0,245,255],
"haloSize": 2,
"font": {
"family": "Arial",
"weight": "bold",
"size": "14px"
}
}),
minScale: 35000
});
with:
var labelClass2 = new LabelClass({
labelExpression: '[' + "FILENAME" + ']',
labelPlacement: 'esriServerPolygonPlacementAlwaysHorizontal',
symbol: {
"type": "esriTS",
"color": [0,0,0],
"haloColor": [0,245,255],
"haloSize": 2,
"font": {
"family": "Arial",
"size": "14px",
"weight": "bold"
}
},
minScale: 35000
});