Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or...
Transcript of Configuring WebMap Pop-Ups: Tips and Tricks€¦ · Power-User Tips. Handling Inconsistent or...
![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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/1.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/2.jpg)
![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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/3.jpg)
![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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/5.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/6.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/7.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/8.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/9.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/10.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/12.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/13.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/14.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/15.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/16.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/17.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/18.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/19.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/20.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/21.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/22.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/23.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/24.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/25.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/26.jpg)
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](https://reader031.fdocuments.us/reader031/viewer/2022011903/5f168dda94f47a5b7d438506/html5/thumbnails/27.jpg)
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”