Geodev
HackerLabs
slides.com/jimbarry/geodev-hackerlabs-june-2016
Jim Barry @JimBarry
Amy Niessen @EsriGeoDev

Welcome to the
Geodev hackerlabs
What's a geodev hackerlab?
Build geo apps with ArcGIS
Beyond the documentation, Under the hood
Informal - Interactive - Tips & tricks - Follow along or try yourself
Format
Demos & Short labs

What are we building?
Portland Neighborhoods App

1) ArcGIS Online (maps, data, services, analyses)?
2) ArcGIS JavaScript development?
Scale of 1-10...
Questions
How familiar are you with:
Getting Started
ArcGIS Developer Resources
ArcGIS Platform


ArcGIS Development Process
Data
Design
Develop
Let's get set up!
-
Sign up and explore ArcGIS for Developers
-
Explore projects on esri.github.io
-
Explore ArcGIS.com and login
-
Go to jsbin.com
Voucher Code: FAL1016GEODEV
http://arcg.is/geodev-hackerlabs
developers.arcgis.com

developers.arcgis.com

Voucher Code: FAL1016GEODEV
esri.github.io or github.com/esri


jsbin.com


Part 1
Data

ArcGIS Online
Store data
in the cloud
Hosted Services
- Feature Service
- Tile Service

1. Import Data
- ArcGIS Online
- Use "Add Item"
- View and Query REST endpoint



2. Create New Data
- ArcGIS for Developers
- Create Dataset
- Define schema interactively
- ArcGIS Online Map View to add data

CREATE









COLLECT
3. Make Data from Data
- GeoEnrich Data
- Buffers
- Drive/walk time
- Spatial Analyses

Text
DATA FROM DATA
CODE
- Use feature service URLs
- Add as a layer to the map
- Uses default styling

Your turn!
Part 2
Design

ArcGIS Online
Create and style
web maps
Create a new web map
- ArcGIS Online Map Viewer
- Add layers and basemaps
- Create, Edit, Share data
- Use in apps
- Stored and accessible as JSON
Style Layers
- Default Renderers
- Points
- Lines
- Polygons
- Use custom symbology
Style Popups
- Override default popup settings
- Format - title, body, fields, values
- Charts
Smart Mapping
- "Smart" styling of layers based on data
- Apply symbols and colors
- Based on fields, data, formulas
- Color ramps with breaks
- Override
Save Layer Styles
- Copy and save layers with custom symbology
- Save as new items
- Inspect JSON
- Use JSON in apps
Style Vector Tiles
- New basemaps in ArcGIS Online (Beta)
- Easy to edit and style root.json
- Re-upload to update your layer
Style 3d layers
- Use Scene viewer or JS API 4.0
- Access layers
- Apply 3D symbols
Code
- Add a styled layer to an app
- Style a layer with JSON
- Style a layer popup
- Add vector tile basemap
Your turn!
Part 3
Develop

Templates, Builders & APIs
Build apps from
maps and layers
Web Map Apps
- Fastest and easiest way
- Re-use data, design (symbols) and configuration
- Easy to get title, subtitle, legend, map, popups
Edit remotely, no need to update apps!
Apps from Web Maps
1. App Templates
- Share
- Configure
- Save
- Re-configure
- Download code (My Contents)
- Build/host your own
2. Web AppBuilder
- Share
- Configure
- Save
- Re-configure
- Download (option)
- Build/host your own
Custom WAB Apps
Web AppBuilder - Local
- Download and install
- Configure with organization
- Build or seal code (see GitHub)
3. ArcGIS JS API
- ArcGIS for Developers
- Samples and sandbox
- Use your own webmapID!
Apps from Layers
ArcGIS JS API 4.0 (or 3.x)
- Get REST endpoints
- Load into map
- Sort/order
- Default symbols or override
Esri-Leaflet
- Get REST endpoints
- Load into map
- Sort/order
- Default symbols or override
- HINT: Use Esri-Leaflet-Renderer!
Apps in
Frameworks
Calcite Maps - Bootstrap
- Load entire map or layers
- ArcGIS JS or Esri-Leaflet
- See ArcGIS JS 4.0 beta3 (2D/3D)
Your turn!
Summary
- ArcGIS Dev Pattern: Data, Design, Develop
- Cloud services, Web maps and ArcGIS APIs
- Create and share apps quickly
- Apps/APIs/OS can access REST API and Services...
- Homework! Finish the other exercises!
Thanks!!




GeoDev Hackerlabs - June 2016
By Jim Barry
GeoDev Hackerlabs - June 2016
- 1,943