Labeling Strategies – w/ Esri JavaScript APIs

View Github Repository Open presentation in a new window

brendancol

See all presentation from brendancol

Labeling Strategies – w/ Esri JavaScript APIs

0 0

esri_uc_2014_label_strategies

My presentation for Esri User Conference 2014 on Label Strategies

On Github brendancol / esri_uc_2014_label_strategies

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?

Generated Offline

Static

Scalable

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

Generated at runtime

Dynamic image for viewport

Utilitarian

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