Alison Sizer asizer

Multi-line labels on a Feature Layer

This is a workaround to add line breaks to the Label Layer

NOTE: I can't figure out a way to return all the labels for a Feature Layer here, unfortunately. The Label Layer only returns the labels that will fit into their elements, or not conflict with other labels, as calculated based on the original, single-line label. Splitting these labels into multiple lines might reduce conflicts, or allow them to fit properly within their polygons, but because they were conflicted out in the first place, we never see them.

This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.extent - compute domains
d3.svg.axis - display axes
d3.svg.line - display line shape

	<!DOCTYPE html>
	<html>

	<head>
	<title>Broken Basemap Gallery</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,width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css">

	<!DOCTYPE html>
	<html>

	<head>
	<title>Webmap Basemaps</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,width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css">

	<!DOCTYPE html>
	<html>

	<head>
	<title>Fixing Basemap Gallery</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,width=device-width" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<link rel="stylesheet" href="//js.arcgis.com/3.12/esri/css/esri.css">

	/global module:false/
	module.exports = function(grunt) {

	// Load grunt tasks automatically
	require('load-grunt-tasks')(grunt);

	// Project configuration.
	grunt.initConfig({

	// use esri_slurp to download api locally. This allows a custom build of the

	concat: {
	options: {
	banner: 'require({\ncache: {\n',
	process: function(src, filepath) {
	var returnStr = '// Source: ' + filepath + '\n';
	if (filepath.indexOf('.js') > 0) {
	// add file name
	returnStr += '\'' + filepath.replace('js/', '').replace('.js', '') + '\': ';
	// add function and file text
	returnStr += 'function() {\n' + src + '}';

	/* all this is around line 334 of SQLQuery/Widget.js */

	// option 1 is to query the rest endpoint for unique values.
	// option 2 is to store featureSet clientside (1000 limit)
	var tokenRequest = esri.id.findCredential(this.activeInfo.fLayerUrl); // THIS IS NEW!
	if (!this.activeInfo.featureSet) {
	dojoXhr(this.activeInfo.fLayerUrl + '/query', {
	query: {
	where: '1=1',
	outFields: fieldInfo.name,

	<!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;

	<!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;