Geodev Hackerlab
slides.com/dmart/geodev-hackerlabs-berlin-2016
John Gravois @geogangster
David Martinez @DavidJMart
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/2355152/esri-white-trans.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/308165/images/1437331/hackereyes.png)
Welcome to the
Geodev Hackerlab
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
![](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/308165/images/3073360/arcgis-processg.png)
Sign up for developer account:
Voucher Code: BERLINHACK
http://developers.arcgis.com
Then go here for labs:
http://github.com/Esri/geodev-hackerlabs
![](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
developers.arcgis.com
Voucher Code: BERLINHACK
HackerLabs on Github
![](https://s3.amazonaws.com/media-p.slid.es/uploads/jimbarry/images/1235061/geodev_hash.jpeg)
http://github.com/Esri/geodev-hackerlabs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/1473862/Screen_Shot_2015-06-09_at_10.14.44_AM.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/1473865/Screen_Shot_2015-06-09_at_10.16.09_AM.png)
jsbin.com or IDE
![](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
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
2. Create and Edit Data
- ArcGIS for Developers
- Create Dataset
- Define schema interactively
- ArcGIS Online Map View to add data
3. Make Data from Data
- GeoEnrich Data
- Buffers
- Drive/walk time
- Spatial Analyses
CODE
- Use feature service URLs
- Add as a layer to the map
- Uses default styling
1. Import Data
2. Create and Edit Data
3. GeoEnrich Data
Labs to Do for Data Section
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 4x
- 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
1. Create a New Web Map
2. Style a Web Map
3. Style Popups
Labs to Do for Design Section
Your turn!
Part 3
Develop
Three Patterns
![](https://s3.amazonaws.com/media-p.slid.es/uploads/308165/images/3142814/greenarrow3d.jpg)
Templates
Builders
APIs
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
Calcite Maps - Bootstrap
- Load entire map or layers
- ArcGIS JS or Esri-Leaflet
- See ArcGIS JS 4.x (2D/3D)
2. Web AppBuilder
- Share
- Configure
- Save
- Re-configure
- Download (option)
- Build/host your own
Custom WAB Apps
Web AppBuilder - Developer
- Download and install
- Configure with organization
- Build or seal code (see GitHub)
3. ArcGIS JavaScript API
- ArcGIS for Developers
- Samples and sandbox
- Use your own webmapID!
Apps from Layers
ArcGIS JS API 4.x (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!
1. Create a Configurable App
2. Build a Starter Map
3. Search with Query Task
Labs to Do for Develop Section
Your turn!
Summary
- ArcGIS Dev Pattern: Data, Design, Develop
- ArcGIS Online, Web maps and ArcGIS APIs
- Create and share apps quickly
- Apps/APIs access REST API and Services...
- Homework! Finish the other exercises!
GeoDev Meetup Tonight!
Galavanize Atrium
5:30 - 8:30p
GeoDev Hackerlabs - Berlin 2016
By dmart
GeoDev Hackerlabs - Berlin 2016
- 1,729