Skip to content

Instantly share code, notes, and snippets.

@asizer

asizer/index.html

Created November 7, 2014 01:13
Show Gist options
  • Save asizer/147d10114e9f02aa2c05 to your computer and use it in GitHub Desktop.
Save asizer/147d10114e9f02aa2c05 to your computer and use it in GitHub Desktop.
Download ZIP
Colors for labels
Raw
index.html
<!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>Feature Layer Multi-Line Labels</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;
}
#map.dark text {
fill: lime;
}
#map.light text {
fill: red;
}
</style>
<script src="//js.arcgis.com/3.10/"></script>
<script src="main.js"></script>
</head>
<body>
<div id="map" class="light"></div>
</body>
</html>
Raw
main.js
var map;
require([
'dojo/dom-class',
'esri/map',
'esri/layers/FeatureLayer',
'esri/layers/ArcGISDynamicMapServiceLayer',
'esri/symbols/SimpleFillSymbol',
'esri/symbols/TextSymbol',
'esri/renderers/SimpleRenderer',
'esri/layers/LabelLayer',
'esri/Color',
'dojo/domReady!'],
function(domClass,
Map, FeatureLayer, DynamicLayer,
SFS, TextSymbol, SimpleRenderer,
LabelLayer,
Color) {
var config = {
mapCenter: [-117.1963, 34.0571], // longitude, latitude
mapZoom: 23,
basemapUrl: 'http://arcgis-tenone2012-1974758903.us-west-1.elb.amazonaws.com/arcgis/rest/services/Campus/MapServer',
serviceUrl: 'http://arcgis-localgov-61933129.us-west-1.elb.amazonaws.com/arcgis/rest/services/CampusPlaceFinder/BuildingInterior/MapServer/',
roomsLayerId: 1,
bldg: 'M',
flr: '2',
visibleLayers: [0, 3], // lines, buildings. not including rooms layer because it already has a label on it.
defExprFunction: function() {
// defexpr array for map service. here, 'this' is this config object.
return [
'BUILDINGKEY = \'' + this.bldg + '\' AND FLOOR = \'' + this.flr + '\''
];
},
roomDefExpr: function() {
return 'BUILDING = \'' + this.bldg + '\' AND FLOOR = \'' + this.flr + '\'';
},
labelField: 'SPACEID'
};
// be able to zoom in past the regular 0-19 zoom levels.
var lods = [
{ 'level': 0, 'resolution': 156543.033928, 'scale': 591657527.591555 },
{ 'level': 1, 'resolution': 78271.5169639999, 'scale': 295828763.795777 },
{ 'level': 2, 'resolution': 39135.7584820001, 'scale': 147914381.897889 },
{ 'level': 3, 'resolution': 19567.8792409999, 'scale': 73957190.948944 },
{ 'level': 4, 'resolution': 9783.93962049996, 'scale': 36978595.474472 },
{ 'level': 5, 'resolution': 4891.96981024998, 'scale': 18489297.737236 },
{ 'level': 6, 'resolution': 2445.98490512499, 'scale': 9244648.868618 },
{ 'level': 7, 'resolution': 1222.99245256249, 'scale': 4622324.434309 },
{ 'level': 8, 'resolution': 611.49622628138, 'scale': 2311162.217155 },
{ 'level': 9, 'resolution': 305.748113140558, 'scale': 1155581.108577 },
{ 'level': 10, 'resolution': 152.874056570411, 'scale': 577790.554289 },
{ 'level': 11, 'resolution': 76.4370282850732, 'scale': 288895.277144 },
{ 'level': 12, 'resolution': 38.2185141425366, 'scale': 144447.638572 },
{ 'level': 13, 'resolution': 19.1092570712683, 'scale': 72223.819286 },
{ 'level': 14, 'resolution': 9.55462853563415, 'scale': 36111.909643 },
{ 'level': 15, 'resolution': 4.77731426794937, 'scale': 18055.954822 },
{ 'level': 16, 'resolution': 2.38865713397468, 'scale': 9027.977411 },
{ 'level': 17, 'resolution': 1.19432856685505, 'scale': 4513.988705 },
{ 'level': 18, 'resolution': 0.59716428355982, 'scale': 2256.994353 },
{ 'level': 19, 'resolution': 0.29858214164762, 'scale': 1128.497176 },
{ 'level': 20, 'resolution': 0.14929144441622, 'scale': 564.25 },
{ 'level': 21, 'resolution': 0.07464439928880, 'scale': 282.12 },
{ 'level': 22, 'resolution': 0.03747036660734, 'scale': 141.62 },
{ 'level': 23, 'resolution': 0.0187351833037, 'scale': 70.8 }
];
map = new Map('map', {
center: config.mapCenter,
zoom: config.mapZoom,
lods: lods
});
// set up basemaps
esriConfig.defaults.map.basemaps.Campus = {
'title': 'Campus',
'thumbnailUrl': 'src/resources/TopoCampus.png',
'baseMapLayers': [{
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer'
}, {
url: config.basemapUrl
}]
};
map.setBasemap('Campus');
// add map service layer for building, floor, room
var mapServiceLayer = new DynamicLayer(config.serviceUrl);
mapServiceLayer.setVisibleLayers(config.visibleLayers);
mapServiceLayer.setLayerDefinitions(config.defExprFunction());
map.addLayer(mapServiceLayer);
// create an invisible feature layer for labeling
var roomsColor = new Color('#666');
var roomsSymbol = new SFS('solid', null, null);
var roomsRenderer = new SimpleRenderer(roomsSymbol);
var roomUrl = config.serviceUrl + config.roomsLayerId;
roomLayer = new FeatureLayer(roomUrl, {
id: 'rooms',
outFields: [config.labelField]
});
roomLayer.setRenderer(roomsRenderer);
roomLayer.setDefinitionExpression(config.roomDefExpr());
map.addLayer(roomLayer);
// create a text symbol to define the style of labels
var labelSymbol = new TextSymbol().setColor(roomsColor);
labelSymbol.font.setSize('10pt');
labelSymbol.font.setFamily('arial');
roomsLabelRenderer = new SimpleRenderer(labelSymbol);
labelsLayer = new LabelLayer({ id: 'labels' });
labelsLayer.addFeatureLayer(roomLayer, roomsLabelRenderer, '{' + config.labelField + '}');
// add the label layer to the map
map.addLayer(labelsLayer);
setInterval(function() {
domClass.toggle(map.container, 'light dark');
}, 5000);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment