Labeling Strategies

w/ Esri JavaScript APIs



@blueraster / blog.blueraster.com




Brendan Collins

@brendancol

brendancol.github.io/esri_uc_2014_label_strategies

Topics

Esri JavaScript APIs

Tiled Map Labels

Available Reference Layers

Dynamic Map Labels

Client-side Labels

Scale Dependent Rendering

Adding SVG Filters

Q & A

Not Covered

Cartographic Conventions

Typographic Conventions

ArcMap Label Manager

Labels vs. Annotations

Maplex Label Engine

Tile Cache Generation & Storage

Polygon Skeletons

JavaScript Developer Tools

Adobe Illustrator / InkScape

Esri JavaScript APIs!

Simple Map (Dojo)


var map;
require(["esri/map", "dojo/domReady!"], function(Map) {
	map = new Map("map", {basemap:"topo", center:[-122.45, 37.75], zoom:13});
});

Esri Sample

Simple Map (Esri Leaflet)


var map = L.map('map').setView([37.78, -92.85], 4);
L.esri.basemapLayer('Streets').addTo(map);

Esri Sample

Clients & Servers

Hello Server-side

Services Requests

Centralized Logic

Data Rich

Hello Client-side

Executes JavaScript

Distributed Logic

Limited Data

Tiled Map Labels

(Server-side)


Why Tiles?

  1. Generated Offline

  2. Static

  3. Scalable

  4. Expressive


Reference Layer


OceansLabels

GrayLabels

DarkGrayLabels

ImageryLabels

ShadedReliefLabels


Basemap


Oceans

Gray

DarkGray

Imagery

ShadedRelief

Basemap + Reference Layer



var map = L.map('map').setView([32.73, -117.17], 10);
L.esri.basemapLayer('DarkGray').addTo(map);
L.esri.basemapLayer('DarkGrayLabels').addTo(map);

Dynamic Labels

  1. Generated at runtime

  2. Dynamic image for viewport

  3. Utilitarian

  4. Less-Portable

Adding Dynamic Map


var map = L.map('map').setView([34.025, -116.203], 9);
L.esri.basemapLayer('Oceans').addTo(map);
var federalLands = L.esri.dynamicMapLayer('http://maps1.arcgisonline.com/ArcGIS/rest/services/USA_Federal_Lands/MapServer', {
    opacity: 1,
    useCors: false
  }).addTo(map);

Client-side Labeling

Using Label Layer


var labelField = "STATE_NAME";
var statesLabel = new TextSymbol().setColor(new Color("#C7C7C7"));
statesLabel.font.setSize("14pt");
statesLabel.font.setFamily("arial");
statesLabelRenderer = new SimpleRenderer(statesLabel);
var labels = new LabelLayer({ id: "labels" });
labels.addFeatureLayer(states, statesLabelRenderer, "${" + labelField + "}");
map.addLayer(labels);

Scale Dependant Rendering

Muliple Label Layers



var labelLayer = new LabelLayer({ id: "labels" });
labelLayer.addFeatureLayer(states, mediumLabelRenderer, "${STATE_NAME}");
labelLayer.addFeatureLayer(counties, mediumLabelRenderer, "${NAME}");
labelLayer.addFeatureLayer(groups, mediumLabelRenderer, "${BLKGRP}");
labelLayer.addFeatureLayer(blocks, mediumLabelRenderer, "${BLOCK}");

Client-side Drop Shadow

Drop Shadow SVG
http://github.com/patrickalrt

Client-side Glow Filter

Glow SVG
http://github.com/patrickalrt

Thank you


Brendan Collins / @brendancol


@blueraster / blog.blueraster.com