27
Configuring WebMap Pop-Ups: Tips and Tricks Bonnie Stayer

Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

  • Upload
    others

  • View
    9

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Configuring WebMap Pop-Ups: Tips and

TricksBonnie Stayer

Page 2: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle
Page 3: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle
Page 4: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Planning and Design

Page 5: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Planning

• Message/Audience

- What are you trying to communicate?

- To whom are you trying to communicate it?

- General audience, technical audience, managers/decision makers

• Know the Data

- What are your attributes describing?

- What do their values mean?

- Numerical units

- String field values

Page 6: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

What to Include

• What is the most important piece of

information?

- Put at top; make it obvious

• Context

- How does data compare to some average or

benchmark?

• Should numeric data be displayed as raw

values or in a chart?

• Do you have images or hyperlinks?

Page 7: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

What Not to Includeor, WHY ARE YOU YELLING AND WHAT’S AN OBJECT ID?

• IDs or codes

• Lat/Long

• Raw field names (underscores,

abbreviations, all caps)

• Duplicate or redundant information

• Jargon or acronyms (for non-

technical audiences)

➢ Every attribute may not be

necessary!

Page 8: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Types of Pop-up Displays

• List of Field Attributes

- Recommended only for a

technical/SME audience

• Description from One Field

- Appropriate for things like project

descriptions

• Custom Attribute Display

- Recommended in most cases

Page 9: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Custom Attribute Displays

Page 10: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Use Fields within Sentences

Page 11: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Text Formatting

• Bold

• Italics

• Underlining

• Color

• Bulleted/Numbered Lists

Page 12: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Limit Use of Field Labels

Page 13: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Numeric Formatting

• Decimal places

• 1,000s separators

• Dollar signs in front of

currency values

Page 14: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Hyperlinks

• Put full URLs into hyperlinks, not

raw text

• If a link will be unique to each

feature, it must be an attribute

Example

Page 15: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Pop-Up Media

Page 16: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Charts

• Choose the right type:

- Column/Bar

- Line

- Pie

• Include good captions

- Units of measure

- Normalization basis

- Instructions

- Other attributes

Page 17: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Images

• Store unique image URLs as

attributes

• Use low-res images for thumbnails

• Use optional link to go to high-res

images or informational website

• Titles/Captions

- Credit sources

- Instruct users to click for larger photo

• Can also insert images into body of

the pop-up

- No hyperlinks

200 x 150

Example

Page 18: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Beyond Features

Page 19: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Related Table Fields

• One-to-one relationships:

- Attributes displayed as

usual

• One-to-many

relationships:

- String fields show count

- Numeric fields can show

choice of statistic

Page 20: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Pop-ups for Image Services

• Multiple Raster Processing Templates

available in one query (10.4+)

• Can display pixel values for other raster

functions besides the current renderer (e.g.

NDVI or moisture index)

• Attribute reference format:

- {raster.ServicePixelValue.ProcessingTemplate}

Page 21: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Power-User Tips

Page 22: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Handling Inconsistent or Missing Information

• Separate attributes onto different

lines and avoid labels to handle

empty fields

- Ex. {CITY}, {STATE}

- Ex. Phone numbers, websites

• Create different pop-ups for different

feature types

- Copy layer and set filters

Example

Page 23: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Using Arcade Expressions

• Dynamically create new attributes

• Reference attributes from other features in the layer

• Reference attributes from other layers in the map

Example

Page 24: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Using HTML

• HTML source editor OR Store

markup as column values

• Format text without a Rich Text

editor

• Add hyperlinked images to the

title or body

• Display other media besides

photos

• Include email links

Example

Page 25: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Resources

• ArcGIS Online Help: Configure Pop-ups

- http://doc.arcgis.com/en/arcgis-online/create-maps/configure-pop-ups.htm

• ArcGIS Online Blog

- https://www.esri.com/arcgis-blog/arcgis-online/

• ArcGIS Arcade

- https://developers.arcgis.com/arcade/

• Supported HTML

- https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm

Page 26: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Upcoming Sessions

• ArcGIS Online: Use Map Styles

to Discover and Define Your

Web Map’s Purpose

• ArcGIS Online: Exploring Your

Data with Smart Mapping

• ArcGIS Online: What’s New in

Hosted Feature Layers

• Arcade: An Introduction

• ArcGIS Online: Making Smarter

Maps with Arcade

WORKSHOP LOCATION

• SDCC – Room 17 B

• SDCC – Room 02

• SDCC – Room 17 B

• SDCC – Ballroom 06 B

• SDCC – Room 17 B

TIME FRAME

• Wednesday, 4:00pm – 5:00pm

• Thursday, 4:00pm – 5:00pm

• Wednesday, 2:30pm – 3:30pm

• Wednesday, 4:00pm – 5:00pm

• Wednesday, 10:00am – 11:00am

Page 27: Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or Missing Information •Separate attributes onto different lines and avoid labels to handle

Please Share Your Feedback in the App

Download the Esri

Events app and find

your event

Select the session

you attended

Scroll down to

“Survey”

Log in to access the

survey

Complete the survey

and select “Submit”