Geodev
HackerLabs
slides.com/jimbarry/geodev-hackerlabs-june-2016
Jim Barry @JimBarry
Amy Niessen @EsriGeoDev
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/2355152/esri-white-trans.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2397728/Screen_Shot_2016-03-28_at_3.50.32_PM.png)
What are we building?
Portland Neighborhoods App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2411510/Screen_Shot_2016-03-31_at_12.24.19_PM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667233/arcgis.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667234/datadesigndevelop.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2713848/Screen_Shot_2016-06-06_at_8.16.18_AM.png)
developers.arcgis.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2713891/Screen_Shot_2016-06-06_at_8.23.32_AM.png)
Voucher Code: FAL1016GEODEV
esri.github.io or github.com/esri
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2713981/Screen_Shot_2016-06-06_at_8.42.57_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2713992/Screen_Shot_2016-06-06_at_8.47.42_AM.png)
jsbin.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2714879/Screen_Shot_2016-06-06_at_12.04.34_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2714885/Screen_Shot_2016-06-06_at_12.06.18_PM.png)
Part 1
Data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667234/datadesigndevelop.png)
ArcGIS Online
Store data
in the cloud
Hosted Services
- Feature Service
- Tile Service
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667244/pasted-from-clipboard.png)
1. Import Data
- ArcGIS Online
- Use "Add Item"
- View and Query REST endpoint
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2714979/Screen_Shot_2016-06-06_at_12.28.13_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2714980/Screen_Shot_2016-06-06_at_12.29.01_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2714983/Screen_Shot_2016-06-06_at_12.30.24_PM.png)
2. Create New Data
- ArcGIS for Developers
- Create Dataset
- Define schema interactively
- ArcGIS Online Map View to add data
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715022/Screen_Shot_2016-06-06_at_12.39.48_PM.png)
CREATE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715028/Screen_Shot_2016-06-06_at_12.41.57_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2714988/Screen_Shot_2016-06-06_at_12.31.52_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715129/Screen_Shot_2016-06-06_at_12.57.38_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715130/Screen_Shot_2016-06-06_at_12.58.14_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715144/Screen_Shot_2016-06-06_at_1.00.21_PM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715194/Photo_Jun_06__16_06_04.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715197/Photo_Jun_06__16_04_44.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715200/Photo_Jun_06__16_04_38.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715204/Photo_Jun_06__16_04_38.png)
COLLECT
3. Make Data from Data
- GeoEnrich Data
- Buffers
- Drive/walk time
- Spatial Analyses
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2714987/Screen_Shot_2016-06-06_at_12.31.04_PM.png)
Text
DATA FROM DATA
CODE
- Use feature service URLs
- Add as a layer to the map
- Uses default styling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2715265/Screen_Shot_2016-06-06_at_1.21.41_PM.png)
Your turn!
Part 2
Design
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667234/datadesigndevelop.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667234/datadesigndevelop.png)
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!!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2718800/Screen_Shot_2016-06-07_at_8.11.56_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2718821/Screen_Shot_2016-06-07_at_8.14.25_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2718891/Screen_Shot_2016-06-07_at_8.22.32_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/2718867/Screen_Shot_2016-06-07_at_8.19.40_AM.png)
GeoDev Hackerlabs - June 2016
By Jim Barry
GeoDev Hackerlabs - June 2016
- 1,942