GeoDev DevLab

Allan Laframboise

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

 

 

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

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!

  1. Sign up at ArcGIS for Developers

  2. Redeem voucher

  3. Sign up at CodePen.io (JavaScript developers)

Voucher Code:  XXX

Part 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. 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

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

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!

What did you think?

Made with Slides.com