Creating Great Apps - Recent Proceedings
Transcript of Creating Great Apps - Recent Proceedings
![Page 1: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/1.jpg)
GIS CONFERENCEMAKING PLACE MATTER
Creating Great Apps
September 2015, Atlanta, Georgia
Bern [email protected]
@bernszukalski
![Page 2: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/2.jpg)
ArcGIS Web MapThe building block of the WebGIS ecosystem
![Page 3: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/3.jpg)
Map Viewer (for authoring)
ArcGIS for Desktop
Configurable Apps
Story Maps
ArcGIS Apps
Devices
ArcGIS Web MapAuthor and use anytime, anywhere, on any device
![Page 4: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/4.jpg)
Map viewer vs. appsDeliver your map in the right context for the intended audience
Map viewer (for authoring)
Storytelling Basic
Public Information (PIM)Story Map Tour
![Page 5: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/5.jpg)
Apps complete the user experience
• Public viewing• Internal communication• Decision makers• Common workflows• Deliver tools and/or data for tasks
Map App Template Configured Application
![Page 6: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/6.jpg)
Web App Advantages
• No programming, easy to configure• Hosted• Responsive• Can be configured into your organization• Source available• Can be used everywhere
- Browser- Device- Embedded- Native apps
![Page 7: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/7.jpg)
A great app starts with a great map
![Page 8: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/8.jpg)
Crafting the map experience
Pop-ups
Transparency
Display Scale RangeStyles
Options depend on layer type
![Page 9: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/9.jpg)
Styling layersSmart, data-driven layer styling
![Page 10: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/10.jpg)
Item Best Practices For your web map and your app
Good Thumbnail
Concise Summary
Great Description
Good TagsUsage Notes
Etc...
![Page 11: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/11.jpg)
User Profiles
![Page 12: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/12.jpg)
Delete Protection
• Delete protection for any item• Prevents accidental deletion when housecleaning• Helps prevent broken apps
![Page 13: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/13.jpg)
Where to find app templates
• Create a New Web App gallery• Story Maps
- storymaps.arcgis.com
• Solution templates- solutions.arcgis.com
• ArcGIS Online items• Web AppBuilder
• ArcGIS Applications- Collector, Dashboard, Explorer- Navigator
![Page 14: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/14.jpg)
Supported Workflows
1. Start with a web map2. Start at the Story Maps website3. Download source and self-host
CREATE A WEB APP
![Page 15: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/15.jpg)
Supported Workflows
1. Start with a web map2. Start at the Story Maps website3. Download source and self-host
![Page 16: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/16.jpg)
Supported Workflows
1. Start with a web map2. Start at the Story Maps website3. Download source and self-host
![Page 17: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/17.jpg)
Start with a map and…Create a Web App
Ian
![Page 18: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/18.jpg)
Make a Web Application GalleryChoose from gallery to preview, publish, or download
CREATE A WEB APP
![Page 19: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/19.jpg)
Publish, Download, Preview
Preview application
Download source tocustomize and host
on your own
Click create to coupleand host your map with the
application template
Preview is great for a “quick share”
![Page 20: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/20.jpg)
Configure and publish from your accountConfiguration Settings
Configuration options will vary from app to app
![Page 21: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/21.jpg)
DEMONSTRATION
![Page 22: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/22.jpg)
Story Maps
![Page 23: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/23.jpg)
Story MapsMake it easy to harness the power of maps to tell stories
• Combine interactive maps and multimedia• Story-focused user experience• Configure via builder• Responsive design
![Page 24: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/24.jpg)
What do you need?
An idea and thinking…
Media & Storage
Web Map(s)
Story Map App Template
![Page 25: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/25.jpg)
storymaps.arcgis.comEverything you need
![Page 26: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/26.jpg)
Story Map application templatesFound at Story Map Apps
• Map Tour• Map Journal• Map Series• Swipe & Spyglass• Shortlist• Basic• Playlist• Countdown
Source Hosted Builder Responsive
![Page 27: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/27.jpg)
Two Workflows
1. Start with a web map2. Start at the Story Maps website
CREATE A WEB APP
![Page 28: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/28.jpg)
Two Workflows
1. Start with a web map2. Start at the Story Maps website
![Page 29: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/29.jpg)
Recommended workflow
1. Visit gallery to get ideas and choose a story map template2. Assemble and warehouse needed components*3. Go to the Story Maps Apps page
![Page 30: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/30.jpg)
Popular Story Maps
Map Journal
Map Series
Map Tour
![Page 31: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/31.jpg)
Story Map Layout Options – Example Story Map Series
Bulleted
Side AccordionTabbed
![Page 32: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/32.jpg)
DEMONSTRATION
![Page 33: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/33.jpg)
Web AppBuilder for ArcGIS
Ian
![Page 34: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/34.jpg)
Web AppBuilder
• Create a custom configured responsive application using widgets
CREATE A WEB APP
![Page 35: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/35.jpg)
Web AppBuilder Features
• Fully integrated into ArcGIS Platform • No coding required• Deploy to browsers, mobile devices• Extensible• Easiest way to make web app templates
Widgets
![Page 36: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/36.jpg)
DEMONSTRATION
![Page 37: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/37.jpg)
Custom App Galleriesfor your Organization
Ian
![Page 38: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/38.jpg)
Configuring your organizationGroups are building blocks
Custom Template Group
Replace Esri Default in Map tab
![Page 39: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/39.jpg)
DEMONSTRATION
![Page 40: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/40.jpg)
Embedding Maps
Ian
![Page 41: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/41.jpg)
Embed a Web MapEmbed maps or presentations using a choice of options
EMBED IN WEBSITE
![Page 42: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/42.jpg)
Embed in Website – Map Options
• Content (map or presentation)• Choose size and options
![Page 43: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/43.jpg)
Embed in Website – Add Symbol
• Add symbol at a specified location• Title, description
![Page 44: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/44.jpg)
DEMONSTRATION
![Page 45: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/45.jpg)
Embedding Web Apps
![Page 46: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/46.jpg)
Embedded Apps
![Page 47: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/47.jpg)
Embedding Apps
• Any application can be embedded using <iFrame>• Use 100% to fill out width of fluid page
<p><iframe width=100% height="600" frameborder="1"
scrolling="no" marginheight="0" marginwidth="0"
src="http://storymaps.esri.com/stories/maptour-
palmsprings/"></iframe></p>
Dimensions
App URL
![Page 48: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/48.jpg)
Embedding Story Maps
• Minimizing the UI using &embed
&embed
![Page 49: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/49.jpg)
DEMONSTRATION
![Page 50: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/50.jpg)
Group Apps
![Page 51: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/51.jpg)
GroupsOrganize your content and help you collaborate with others
![Page 52: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/52.jpg)
Configurable group gallery applications
CREATE A WEB APP
![Page 53: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/53.jpg)
Embedding GroupsEmbed group contents using a variety of options
• Only for public items• Choice of layouts• Choice of viewer
EMBED IN WEBSITE
![Page 54: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/54.jpg)
DEMONSTRATION
![Page 55: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/55.jpg)
App Source Code
![Page 56: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/56.jpg)
Web app template source codeFor App templates and Story Maps
• Source download from GitHub• Delivered as Zip file• Edit using any text editor• Can be highly customized• Must host from own server
![Page 57: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/57.jpg)
Map IDEach map has a unique identifier, like a social security number
![Page 58: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/58.jpg)
Insert web map ID into source code
Web map ID
![Page 59: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/59.jpg)
DEMONSTRATION
![Page 60: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/60.jpg)
![Page 61: Creating Great Apps - Recent Proceedings](https://reader031.fdocuments.net/reader031/viewer/2022012510/6187c5e1d0aeb94e04158118/html5/thumbnails/61.jpg)