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


Demos & ArcGIS DevLabs



1) ArcGIS Online (web maps, layers, analyses)?     

2) ArcGIS JavaScript development?                           

3) Other mapping development?                             




How familiar are you with:

Getting Started

ArcGIS Development

ArcGIS Platform

ArcGIS Dev Process






ArcGIS Pro

Map Viewer


App Builders


REST Services

Web Maps


Let's get started!

Voucher Code:  xxx

Step 1


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


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


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


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


What did you think?

GeoDev Devlab

By alaframboise

GeoDev Devlab

  • 1,529