GeoDev DevLab
Allan Laframboise and John Foster

Welcome to the
GeoDev DevLab
What's a geodev lab?
Build a mapping app with ArcGIS
Beyond the documentation - Under the hood - Maps to apps
What are we building?
Santa Monica Parks and Trails App

Format
Demos & ArcGIS DevLabs
1) ArcGIS Online (web maps, layers, analyses)?
2) ArcGIS JavaScript development?
3) Other mapping development?
Questions
How familiar are you with:
Getting Started
ArcGIS Development
ArcGIS Platform


ArcGIS Dev Process
Data
Design
Develop
Desktop
Server
ArcGIS Pro
Map Viewer
Templates
App Builders
APIs
REST Services
Web Maps
Apps
Let's get started!
Voucher Code: xxx
Step 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
3. Spatial Analysis Data
- GeoEnrich Data
- Buffers
- Drive/walk time
- Spatial Analyses
Your turn!
Step 2
Design

ArcGIS Online
Create and style
web maps
Create a 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
Style 3d layers
- Use Scene viewer or JS API 4
- Access layers
- Apply 3D symbols
Style Vector Basemaps
- New Vector Tile Style Editor
- Update all colors
- Match your brand
Your turn!
Step 3
Develop

Apps from Web Maps
How to build apps from
Web Maps
- Reference web map ID
- Use all of it's configurations
- e.g. title, subtitle, legend, map, popups
- Re-use styles and configuration
- Can be updated independently of app code
1. ArcGIS JS API 3.x/4.x
- Powerful APIs for accessing ArcGIS
- Documentation and samples
- Access web maps by ID
- Add widgets
2. 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
3. Web AppBuilder
- Powerful app builder
- Mobile friendly apps
- Many themes and layouts
- Easy to configure, save, share
- Builder - custom widgets and themes
Part I: Create a mapping app

Your turn!
Extend your app
ArcGIS DevLabs
- Prepare data, layers and maps and analysis
- Mapping widgets (Legend, scalebar...)
- Style a vector tile basemap
- Geolocation
- Search and driving directions
- Graphics and geometry
- Authentication and security
Part II: Extend your mapping app

Your turn!
Using Web
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
Challenge: Use a framework - Calcite Maps/Bootstrap

Your turn!
- Data - Design - Develop
- ArcGIS services, spatial analyses and mapping tools
- ArcGIS APIs and frameworks
Use web maps to build apps quickly!
Geodev DevLab
Wrap-up
What did you think?
GeoDev Devlab
By alaframboise
GeoDev Devlab
- 1,925