Post on 09-Feb-2022
City of Mobile GIS
Web Mapping Applications: New Technology, New Expectations
Presenters : Scott Kearney GIS Manager Patricia Creamer GIS Analyst
2
• Developing web mapping apps since 1999
• All development is in-house by GIS staff
• ESRI user since 1996
• Centralized geodatabase
• Internal and Public web applications
Background: GIS Department
3
• Faster Maps
- Server upgrades
- Data caching
- Optimized map services
Goals Accomplished for 2011
4
• Improved Interface
- Adobe Flash
- Client-side
- Map centric
- Floating panels
- Rich graphics
- Desktop style controls
Goals Accomplished for 2011
5
• Consolidate Apps
- 6 into 1
- Multiple map themes
- Common interface
Goals Accomplished for 2011
iMap
UDD Permitting
ROW Viewer
SRO Spatial
Reporting
Address Selection
District Info
Facility Map
6
• Goals Accomplished
• Good Feedback
• Inline With Information From User Conferences
• Comparable To Other Local Governments
• Prepared To Build Upon Successes
Goals Accomplished for 2011
7
• August – Mayor’s Office Purchased iPads
• GIS Maps Not Working
• iPads Do Not Allow Adobe Flash
• Implemented iPad Version Within 2 Months
• Rethink All Apps
Blindsided by iPads
8
• How Many Desktop vs. Mobile Users?
• What Are The User’s Expectations?
• Are Existing Apps Mobile Friendly?
• Mobile Apps or Web Apps?
• Server-side Or Client-side Computing?
• Which Development Language?
• How Do You Maintain Uniformity Across Platforms?
• Do You Need A Universal Layout?
• Mobile Users: Tablet vs. Smartphone?
Research and Reevaluation
9
• Desktop vs. Mobile Users
- Currently: users are in a desktop environment
- Future: growth in mobile users
Research and Reevaluation
10
Consumer PC (Windows) Growth
-5%0%5%
10%15%20%25%30%35%
40%
Source: Citi Investment Research and Analysis, IDC, Company Reports (May 2011)
11
12
0
2
4
6
8
10
12
14
16
Q3 '10 Q4 '10 Q1 '11 Q2 '11 Q3 '11 Q4 '11 Q1 '12
3.27 4.18
7.33
4.69
9.25
11.12
15.43
iPad Sales
Source: www.apple.com(salesreports)
Mill
ions
iPad Released April 2010 iPad 2 Released March 2011
13
Mobile Device Users Projected Growth Rate 2010 to 2015
0%
20%
40%
60%
80%
100%
120%
Smartphone Portablegamingconsole
TabletLaptop and
netbook M2M module
24%
79%
105%
42% 53%
Source: Cisco VNI Mobile, 2011 http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
14
• Mobile Users’ Expectations
- Fast
- Performance
- Single purpose oriented
Research and Reevaluation
15
Percentage of users who will bounce after waiting 5 seconds for a mobile site to load.
0% 20% 40% 60% 80%
2009
2011
20%
74%
Source: Web Performance Today, 2012 www.webperformancetoday.com/2011/07/20/new-findings-mobile-web-users-are-more-disappointed-than-ever/
16
0% 20% 40% 60% 80%
2009
2011
58%
71%
Percentage of users who expect a site to load as quickly on their mobile device as it does on their desktop.
Source: Web Performance Today, 2012 www.webperformancetoday.com/2011/07/20/new-findings-mobile-web-users-are-more-disappointed-than-ever/
17
35%40%
45%50%
2009
2011
40%
46%
Percentage of users who would not return to a poorly performing mobile site.
Source: Web Performance Today, 2012 www.webperformancetoday.com/2011/07/20/new-findings-mobile-web-users-are-more-disappointed-than-ever/
18
• Mobile Friendly
- Not “thumb” friendly
- Mouse events
- Not taking advantage of
touch screen
- Content not readable
- Minimal typing
- Rollovers in menus
- Improved download times
- Number of tools
Research and Reevaluation
19
Mobile Apps Web Apps
Success Rate (Nielsen Norman Group Report) 76% 64%
Platform Dependent
Multiple builds for each Platform
Utilize Device Functions (Camera, GPS, etc…)
Interface: Responsive and Fast High Quality Good
Animation and Graphics High Quality Good
Research and Reevaluation
ArcGIS App - Interface not customizable - Map is customizable - Utilize local data
20
Server-side Client-side
Computing Environment Server Client
Secure Code
Network Traffic
Responsive Interface
Performance
Uniformity Across Browsers
Research and Reevaluation
21
• Development Language : JavaScript
- ArcGIS Server JavaScript API
- Client-side scripting
- Available in all browsers
- Open source
- Asynchronous data processing
- Mashup
Research and Reevaluation
22
• JavaScript Frameworks
- Cross-browser
- Dojo
ESRI’s JavaScript API is built on Dojo
Majority of ESRI sample code is Dojo
- jQuery Mobile
Lightweight code base
Standard user interface elements for smartphones
Research and Reevaluation
23
• HTML5
- Flash alternative
- World Wide Web Consortium (W3C) standard
- Backwards compatible
- Supports multimedia (without plugins such as Flash)
- Still in development
- Major browsers moving toward compliance
- JS GeoLocation API
- Application platform
- Uniformity across browsers
Research and Reevaluation
24
• ESRI Templates
- Public Maps Gallery template
- Utilizes ArcGIS online maps
- Customizable maps
- Limited customization
Research and Reevaluation
25
• Uniformity Across Platforms
- Web Apps
- Device and OS independent
- Browser focused
- HTML5, CSS, and JavaScript Dojo
- Test in multiple browsers
- Internet Explorer most used
Research and Reevaluation
26
0
10
20
30
40
50
60
IE
Firefox
Chrome
Safari
Opera
Other
Top 5 Browsers in the United States
Source: Statcounter.com 2/2012
Perc
ent %
27
• Universal Layout
- Across Devices
- Default to Tablet size
- Bulk of the page within 1024 x 768
- Smartphone: separate page
- Google Browser Size Tool (http://www.browsersize.googlelabs.com)
90% Google users: 950 x 500
Research and Reevaluation
Monitor Average 24” 1920 x 1080
Laptop Average 15” 1280 x 1024
iPad 9.7”
1024 x 768
iPhone 3.5”
960 x 640
28
• Mobile Users: Tablet Vs. Smartphone
Research and Reevaluation
29
Mobile-Only Internet Users
0
10,000,000
20,000,000
30,000,000
40,000,000
50,000,000
60,000,000
2010 2011 2012 2013 2014 2015
North America
Source: Cisco VNI Mobile, 2011 http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-520862.html
30
0%
10%
20%
30%
40%
50%
60%
70%
Q3 2010 Q4 2010 Q1 2011 Q2 2011 Q3 2011 Nov-11
Android
iOS
RIM
Windows Phone 7
Windows Mobile
All Others
Smartphone OS Sales
Source: The NDP Group, Business Insider
Perc
ent %
31
0
2,500
5,000
7,500
10,000
12,500
15,000
Q2'07
Q3'07
Q4'07
Q1'08
Q2'08
Q3'08
Q4'08
Q1'09
Q2'09
Q3'09
Q4'09
Q1'10
Q2'10
Q3'10
Q4'10
Q1'11
Q2'11
Q3'11
Q4'11
AT&T VERIZON SPRINT
Quarterly iPhone Activations By U.S. Operator
(in thousands)
Source: Asymco, 2011 http://www.asymco.com/2012/01/05/estimating-iphone-sales-in-the-us-during-q4/l
Repo
rted
Re
port
ed
Estim
ated
32
• Mobile Users: Tablet Vs. Smartphone
- Smartphone
Small screen
Creative interface
Single purpose
Fast apps
Simulate mobile apps
- Focus on Tablets first
Research and Reevaluation
33
Application Evaluation
• Purpose of application
• Identify users
• Primary functions
• Need met outside of an application
• Tool in an existing application
• Standalone web application
Development Standards
34
Map • Basemap
- Reusability
- Scale-dependent
- Optimize for speed
- Schedule cache updates
- ArcGIS Online Community Maps Program
Web Mercator coordinate system
Fast
Limited control over updates
Development Standards
35
Map • Operational layers
- Dynamic
- Limited features
- Avoid labeling
• No more detail than is needed
• Clean and clear cartography
• Highlight critical layer
Development Standards
36
Application Design • Layout
- Map centric
- Fast and responsive – page loads < 5 sec
- Limit user controls
- Critical content above the “fold”
- Consistency
- Printer friendly (or print page option)
- Repetition (common elements in standard locations)
Development Standards
37
Development Standards
Application Design • Map Control
- Simple navigation
- Avoid sliding scale controls
- Limited map tools
- User intuitive mouse gestures
Pan = click and drag
Select or Identify = click on feature
Zoom = two finger pinch or zoom
- Simplify / combine searches
38
Development Standards
Application Design • Mobile Friendly
- No Flash or Silverlight
- Tablet compatible
- Touchscreen friendly
- Readable content
- Vertical or horizontal
- Thumb friendly controls: 1cm x 1cm
- Increase spacing / clickable area
- Avoid complex widgets and controls
39
Development Standards
Application Design • Mobile Friendly (cont.)
- Limit typing (use check boxes and lists)
- Use mobile site redirects
- Increase “Select Feature” radius
- Avoid rollovers in menus
40
Live Demo