teaching web gis –lab design - recent proceedings · 2016-07-25 · teaching web gis – lab...

Teaching Web GIS – Lab Design

Pinde Fu

Team Lead and Senior GIS Developer

Platform Engineering Team

Professional Services Div.

Esri

Content

• Course overview

• Introducing the 2nd edition Getting to Know Web GIS- What’s new- Contents of the 10 chapters- Quick demos- Problems you may run into

• System requirements and setup

1962CGIS

Roger TomlinsonFather of GIS

1969Internet

1990WWW

Tim Berners-LeeFather of the Web

1993Web GIS

Xerox PARC Viewer

The web has changed GIS

2009ArcGIS Online

New Generation Web GIS

Knowledge Workers

Apps

Casual Users

Web GISDesktop

GIS Professional

Developers

Open Data Community

Web GIS extends GIS to the hands of billions

Global reach; large number of users; better cross-platform; low cost; easy to use; diverse applications

Why teach Web GIS?

• To utilize the immense applicability of Web GIS- Gov, business, science, & daily life

• To keep up with the latest GI Science & Tech. advances

• To meet the increasing demand from the job market - Students with solid knowledge of Web GIS have competitive advantage

• To better engage students

not a question of why, but a question of when

• Provide a comprehensive and up-to-date understanding of Web GIS- concepts, principles, impacts, & frontiers

• Inspire with real-world applications of Web GIS - e-Government- e-Business- daily life

• Teach state-of-the-art technical skills needed for developing applications &managing projects

Course Objectives

Challenges: rapidly evolving technologies

• From isolated websites to web services

• From client/server to cloud

• From Flash/Silverlight to HTML5

• From custom apps to configurable apps

• From all purpose apps to focused apps

• From self-collected data to online data and open data

• From wired to wireless (mobile becoming pervasive)

• From 2D to 3D

• From computer network to sensor network & Internet of Things

• From static data to real time data to big data

Lots of documents, but not systematic

Lots of online tutorials,but with overlaps and gaps

What to teach or not teach?

Need a textbook?

• 1st edition: - Released in 2015 March

• Book resources- Sample data- Supplement

• 2nd edition- Updates, additions …- e-Book version released in 2016 June- Print version available in 2016 Sept- Instructor slides available in 2016 Sept

Teach the new generation Web GIS Platform

Desktop Web Device

Server Online content and services

Client apps

Services

PortalArcGIS Online

Portal for ArcGIS

IntegrationConfigurationGateway to COTS appsAccess

Why is portal so important?

Chapter 1: Start with the cloud: build web apps using ArcGIS Online

Chapter 2: More on layers, maps, and apps

Smart mappingPop-ups

Chapter 3: Hosted feature layers and VGI

Chapter 4: Story Maps and more configurable apps

Chapter 5: Web AppBuilder for ArcGIS

Chapter 6: Publishing map services with ArcGIS for ServerCombined

On-Premise Web GIS

Chapter 7: Spatial analytics and geoprocessing services

Partially new

Chapter 8: Mobile GIS and real-time GIS

Partially new

Chapter 9: 3D web scenes New content

Chapter 10: Getting started with ArcGIS API for JavaScript

4.0

Chapter sections

• Conceptual discussion:- principles & applications

• System requirements- for lab setup

• Tutorial- with detailed instructions

• Q/A- Common questions and problems

• Assignment

• Resources - videos, blogs, trainings

1. Cloud GIS (ArcGIS Online)

• Learning Objectives- New generation Web GIS platform- Basic workflow for creating web apps

- GIS data in CSV (Comma Separate Values)- Web maps- Web apps- ArcGIS Online map tour template

Basic pattern

Layers Web map Web app

Created or discovered, and then added

Transformed using app template

Create a map tour

• Homework: mapping personal/classmates, campus, sales …Link Live Demo

- Common issues:- Account security settings

- Hosting images- Google drive

- Facebook…

- URL to images

2. More on layers, maps, and apps

• Learning Objectives- Learn basic components of a web GIS app.- Map a CSV file using geocoding.- Edit data in the map viewer.- Design maps using smart mapping.- Configure pop-ups with multimedia.- Explore Living Atlas contents.- Use ArcGIS basic map viewer web app template.

Web GIS app Basemaps Operational layers Tools

Pop-ups

ChartsImages and Links

Layer style: Smart mapping and custom symbols

http://blogs.esri.com/esri/arcgis/2015/03/02/introducing-smart-mapping/

Desktop Web Device

Server

PortalArcGIS Online

Portal for ArcGIS

Client apps

Services

Access

Liv

ing

Atl

as o

f th

e W

orld

Imagery

Demographics and lifestyle

Boundaries and places

Landscape

Story Maps

Transportation

Urban systems

Earth observations

Historical maps

Online Content and Services

Basemaps

Living Atlas of the World

Lab 2

Demo

- Common issues:- Subscriber layers

- whose credits to use?

3. Hosted feature layers and volunteered geographic information

• Learning Objectives- Understand VGI and its applications- Publish hosted feature services- Define feature templates- Add and delete fields after a feature layer is created.- Create web apps that can collect VGI and authoritative data.

Read (query)

Write (add, delete, and update)

Feature services/layers Web clients

Lab 3

CSV feature layer enable editing and attachment define extent

create feature template edit fields web map web app

Demo

4. Story Maps and more configurable apps

Objectives

• Understand the suite of ArcGIS configurable apps

• Discover data in ArcGIS Open Data

• Symbolize two fields using smart mapping

• Create a side-by-side comparison template

• Create swipe and spy glass story map

• Create a map journal story map

StoryMaps Multimedia

Story Map

Comparison analysis

Demo

Story Map Journal

A map journal

- Common issues:- Not shared

- Subscriber layers

- Mixing HTTP and HTTPS contents

- Account security settings

5. ArcGIS Web AppBuilder

• Learning Objectives• Know why and when you need Web AppBuilder.• Understand the types of widgets and themes of Web AppBuilder.• Learn the workflow to create web apps using Web AppBuilder.• Configure and use various widgets

Design and preview

http://doc.arcgis.com/en/web-appbuilder/

Themes, widgets, devices

http://doc.arcgis.com/en/web-appbuilder/

Integrated edition vs. developer edition

Integrated edition: apps are hosted automatically

Developer edition: extensible, customizableDemo: Google Street View widget

6. Map services with ArcGIS for Server

• Learning Objectives- On-premises and hybrid Web GIS implementation.- Workflow to publish map services using ArcGIS for Server.- ArcGIS Services Directory- Create web apps with time animation.- Manage services with Portal for ArcGIS

ArcGIS for Server: on-premises Web GIS

Cloud deployment

On-premises deployment

ArcGIS DataAppliance

Portalfor ArcGIS

ArcGIS OnlineServices

ArcGIS Online(Hosted Servers)

ArcGIS Online(portal)

Portals GIS Servers Ready to use content

ArcGIS for Server

Server & Portal federation, ArcGIS Data Store, sharing server

• Can build on-premises and hybrid web GIS

• Can publish additional types of web serviceso Dynamic map serviceso Geoprocessing serviceso Geocoding serviceso Stream services (with GeoEvent extension) o Image services (with Image extension)

Workflow

Lab

Assignment

7. Spatial analytics and geoprocessing services

• Learning Objectives- Understand ArcGIS Online analysis capabilities. - Know collection of data available from ArcGIS Online.- Create web apps that use ArcGIS Online analysis.- Author and publish geoprocessing services with ArcGIS for Server.- Use geoprocessing services in web apps.

Lab (part 1): Select location for a new restaurant using ArcGIS Online analytics and Living Atlas

Lab (part 2): Select location for a new facgtoryby Publish and use your own geoprocessing service

http://esrimapbook.esri.com/arcgis/rest/services/GTKWebGIS/Planning/GPServer/Select_Sites

Model Builder or python

8. Mobile GIS and real-time GIS

• Learning Objectives- Understand the three approaches to building mobile apps.- Use Collector for ArcGIS to collect GIS data.- Use AppStudio for ArcGIS to build native apps.

- Understand real-time GIS and its related technologies.- Use Operations Dashboard for ArcGIS to monitor near real-time data.

Three approaches to build mobile GIS apps

• Browser-based

• Native-based

• Hybrid

Lab (part 1): Collector for ArcGIS

Demo: Map tour with mobile input

Lab (part 2): create native apps using AppStudio for ArcGIS

• Cross-platform• Template-based• Widget-based (future)

Demo

Lab (part 3): Operations DashboardMonitor data collection in near real-time

Search for 311 incidents operation viewDemo

http://www.arcgis.com/home/item.html?id=6689c681877c4ec6a74d34e17f02544f

9. 3D web scenes

• Learning Objectives

- Understand 3D scene terminology.

- View and create scenes using ArcGIS scene viewer.

- Create scenes in ArcGIS Pro.

- Configure 3D symbols in ArcGIS Pro

- Share web scenes.

Author scenes in ArcGIS Pro

ArcGIS scene viewer

3D across the platform

ArcGIS Web AppBuilderArcGIS Earth

Mobile Runtime SDK ArcGIS API for JavaScript 4.x

Demo:- Find the earthquake scene in your content- Open it- Add layer- Change symbol

10. ArcGIS JavaScript API

• Learning Objectives- Understand the basics of ArcGIS API for JavaScript.- Debug JavaScript.- Adapt a JavaScript sample.- Combine multiple JavaScript samples.- Develop 2D and 3D GIS apps using JavaScript.

teaches ArcGIS API for JavaScript 4.0

• Goals: - Get students started with JavaScript. Put them on the right track.- Stimulate students' interest (“Feel the freedom to be creative and unique”)

rather than teach them everything.

• Methods:- Top down, instead of from the ground up

- teach how to adapt and combine samples; quickly see something working

- Teach how to debug (or they will bug you for a simple error)- Assure students:

- “You don’t have to understand every single line of the code in a sample”- “The ability to identify the samples you need and re-use these samples” is not

steal, it’s smart and agile.- “It’s normal you feel frustrated”- “Your code doesn’t have to be perfect” “Ideas are more important”

Goals and methods

Make it easy

Replace the web service/layer URL(s), or the

portal URL and web map/scene id

Replace the attribute field

names

Replace the related

symbol(s)

Steps to adapt a sample

Teach how to debug

Demo debug Link

Combine samples

2D 3D linked Demo

System requirements• Server Side:

- ArcGIS Online: - Org account: publisher or admin level

- Free 60 day trial accounts are sufficient - pay attention to security settings (anonymous access, not HTTPS only)

- Join groups to share web apps and learn from each other

- ArcGIS for Server- Optionally: Portal for ArcGIS, federated with ArcGIS for Server

• On students’ computers:- Web browsers: Pay attention to WebGL requirements

- Notepad++ (or sublime or other text/JavaScript editors)

- ArcGIS Desktop and ArcGIS Pro: (install Windows on Mac OS)

- Microsoft IIS (or other web servers, optional)

• Smartphones or tablets for instructors and students- Consider AirServer (mirror your phone to your computer)

Harvard Extension system setup

Share one ArcGIS for Server(public, can be accessed

anywhere)

ArcGIS Online

Students:

ArcMap & ArcGIS ProNotePad++IIS (optional)Mobile devices

Redlands University system setup

Student VMs: ArcGIS Server

Can be accessed on campus, or off campus via VPN

ArcGIS Online

Student laptops:

ArcMap & ArcGIS ProNotePad++

IIS (optional)Mobile devices

Slides: 11 PPTs release in Sept.

• 1 course overview: ~25 slides

• 10 chapter PPTs, one for each chapter:- Chapter objectives: 1 slide- Concepts, technology overview, and applications: ~15 slides- Tutorial: 3 slides

- User case scenario

- System requirements

- Demo

- What has changed since the publication of the book? 0 – 3 slides- Lists the main updates, additions, and corrections because of new ArcGIS product releases

- Helps bridge the discrepancy between the book (which has a slower release cycle of ~1 year) and our products (which has a faster release cycles of ~ 3 months)

- Summary: 1 slide

Add Web GIS to your curriculum

Questions?

Pinde Fupfu@esri.com

Please submit your feedback for this session

My syllabus