Skip to content

Instantly share code, notes, and snippets.

@asizer
Created September 11, 2014 03:13
Show Gist options
  • Save asizer/f1d7a5704a4f7005115f to your computer and use it in GitHub Desktop.
Save asizer/f1d7a5704a4f7005115f to your computer and use it in GitHub Desktop.
LabelClass on DynamicLayer
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%; width: 100%; margin: 0; padding: 0;
}
</style>
<script src="//js.arcgis.com/3.10/"></script>
<script>
require([
'esri/map',
'esri/layers/ArcGISDynamicMapServiceLayer',
'esri/symbols/TextSymbol',
'esri/layers/LabelClass',
'esri/layers/LayerDrawingOptions',
'dojo/_base/Color',
'dojo/domReady!'],
function(Map, DynamicLayer,
TextSymbol, LabelClass, LayerDrawingOptions,
Color) {
var config = {
mapCenter: [-117.4963, 34.0571],
mapZoom: 10,
serviceUrl: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/'
};
esriConfig.defaults.io.proxyUrl = '/fillin-proxy/proxy.php';
globalMap = new Map('map', {
center: config.mapCenter, // longitude, latitude
zoom: config.mapZoom,
basemap: 'satellite'
});
var labelSymbol = new TextSymbol().setColor(new Color('#0F0'));
labelSymbol.font.setSize('8pt');
labelSymbol.font.setFamily('arial');
var mapServiceLayer = new DynamicLayer(config.serviceUrl);
mapServiceLayer.setVisibleLayers([2]);
globalMap.addLayer(mapServiceLayer);
var labelClass = new LabelClass({
labelExpression: '[NAME] CONCAT NEWLINE CONCAT "FIPS: " CONCAT [FIPS] CONCAT NEWLINE CONCAT "2007 Pop: " CONCAT [POP2007]',
symbol: labelSymbol
});
labelClass.labelPlacement = 'esriServerPolygonPlacementAlwaysHorizontal';
var layerDrawingOption = new LayerDrawingOptions({
labelingInfo: [labelClass],
showLabels: true
});
var layerDrawingOptionsArr = [undefined, undefined, layerDrawingOption];
mapServiceLayer.setLayerDrawingOptions(layerDrawingOptionsArr);
}
);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment