GeoDev DevLab
Allan Laframboise
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/2355152/esri-white-trans.png)
Welcome to the
GeoDev DevLab
What's a geodev lab?
Build geo apps with ArcGIS
Beyond the documentation - Under the hood - Maps to apps
Informal - Interactive - Tips & tricks - Follow along or try yourself
Format
Demos & Short labs
What are we building?
Santa Monica Mountains App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/2404972/portland-app.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 Development
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 Dev Process
Data
Design
Develop
Desktop
Server
ArcGIS Pro
Map Viewer
Templates
App Builders
APIs
REST Services
Web Maps
Apps
Let's get set up!
-
Sign up at ArcGIS for Developers
-
Redeem voucher
-
Sign up at CodePen.io (JavaScript developers)
Voucher Code: XXX
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
2. Create New 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
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
- Reference web map and it's configurations
- e.g. title, subtitle, legend, map, popups
- Re-use styles and configuration
- Can be updated independently of app code
Apps from Web Maps
1. Configurable Apps
- Specific apps that bring your maps to life
- Many to choose from
- Configure, save, share, reconfigure
- Source code on GitHub
- Download, customize and host
2. Web AppBuilder
- Powerful app builder
- Mobile friendly apps
- Many themes and layouts
- Easy to configure, save, share
- Builder - custom widgets and themes
3. ArcGIS JS API 3.x/4.x
- Powerful APIs for accessing ArcGIS
- Documentation and samples
- Access web maps by ID
- Widgets
Apps from Layers
Esri-Leaflet
- Plugin for accessing ArcGIS services
- Basemaps, feature services, geo services
- Access REST endpoints
- Pure JS API
Apps in
Frameworks
Calcite Maps - Bootstrap
- Modern framework for map apps
- CSS for different layouts
- Optional custom Sass build
- Support for ArcGIS JS 3.x, 4.x & Esri-Leaflet
Native Apps
from Maps
App Studio
- Tool for building native apps - no code!
- Create from web maps and templates
- Build for iOS, Android, Windows, Mac
- Player for testing and distribution
- Builder for local development
Your turn!
- ArcGIS Dev Process: Data - Design - Develop
- ArcGIS services, spatial analyses and mapping tools
- ArcGIS Templates, Builders and APIs
Use web maps to build apps quickly!
Geodev Hackerlab
Wrap-up
The end!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/2404972/portland-app.png)
What did you think?
GeoDev Hackerlabs
By alaframboise
GeoDev Hackerlabs
- 5,923