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

github.com/alaframboise/geodev-devlab

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

github.com/alaframboise/geodev-devlab

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

github.com/alaframboise/geodev-devlab

2. Create New Data

• ArcGIS for Developers
• Create Dataset
• Define schema interactively
• ArcGIS Online Map View to add data

github.com/alaframboise/geodev-devlab

3. Spatial Analysis Data

• GeoEnrich Data
• Buffers
• Drive/walk time
• Spatial Analyses

github.com/alaframboise/geodev-devlab

Your turn!

github.com/alaframboise/geodev-devlab

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

github.com/alaframboise/geodev-devlab

Style Layers

• Default Renderers
  • Points
  • Lines
  • Polygons 
• Use custom symbology

github.com/alaframboise/geodev-devlab

Style Popups

• Override default popup settings
• Format - title, body, fields, values
• Charts

github.com/alaframboise/geodev-devlab

Smart Mapping

• "Smart" styling of layers based on data
• Apply symbols and colors
• Based on fields, data, formulas
• Color ramps with breaks
• Override

github.com/alaframboise/geodev-devlab

Style 3d layers 

• Use Scene viewer or JS API 4
• Access layers
• Apply 3D symbols

github.com/alaframboise/geodev-devlab

Style Vector Basemaps

• New Vector Tile Style Editor
• Update all colors
• Match your brand

github.com/alaframboise/geodev-devlab

Your turn!

github.com/alaframboise/geodev-devlab

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

github.com/alaframboise/geodev-devlab

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

developers.arcgis.com/building-apps

doc.arcgis.com/web-appbuilder

Part I: Create a mapping app

Solution

Your turn!

github.com/alaframboise/geodev-devlab

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

Solution

Your turn!

github.com/alaframboise/geodev-devlab

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

esri.github.io

Challenge: Use a framework -  Calcite Maps/Bootstrap

Solution

Your turn!

github.com/alaframboise/geodev-devlab