Geodev Hackerlab

slides.com/jimbarry/
geodev-hackerlab-portland-july-2017

Jim Barry @JimBarry

@EsriGeoDev #geodev

Welcome to the

Geodev Hackerlab

 

What's a geodev hackerlab?

Build geo apps with ArcGIS

Beyond the documentation,  Under the hood

 

Informal - Interactive - Tips & tricks - Follow along or try yourself

Format

Demos & Short labs

What are we building?

Portland Neighborhoods 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 Developer Resources

ArcGIS Platform

Sign up for developer account:

Voucher Code: PORHACKLAB617

http://developers.arcgis.com

Then go here for labs:

http://github.com/Esri/geodev-hackerlabs

developers.arcgis.com

developers.arcgis.com

Voucher Code:  BERLINHACK

HackerLabs on Github

http://github.com/Esri/geodev-hackerlabs

jsbin.com or IDE

Meetup Tonight

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 and Edit 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

 1. Import Data

 2. Create and Edit Data

 3. GeoEnrich Data

Labs to Do for Data Section

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 4x
  • 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

 1. Create a New Web Map

 2. Style a Web Map

 3. Style Popups

Labs to Do for Design Section

Your turn!

Part 3

Develop

Three Patterns

Templates

Builders

APIs

Templates, Builders & APIs

Build apps from

maps and layers

Web Map Apps

  • Fastest and easiest way
  • Re-use data, design (symbols) and configuration
  • Easy to get title, subtitle, legend, map, popups

Edit remotely, no need to update apps!

Apps from Web Maps

1. App Templates

  • Share
  • Configure
  • Save
  • Re-configure
  • Download code (My Contents)
  • Build/host your own

Calcite Maps - Bootstrap

  • Load entire map or layers
  • ArcGIS JS or Esri-Leaflet
  • See ArcGIS JS 4.x (2D/3D)

2. Web AppBuilder

  • Share
  • Configure
  • Save
  • Re-configure
  • Download (option)
  • Build/host your own

Custom WAB Apps

Web AppBuilder - Developer

  • Download and install
  • Configure with organization
  • Build or seal code (see GitHub)

3. ArcGIS JavaScript API

  • ArcGIS for Developers 
  • Samples and sandbox
  • Use your own webmapID!

Apps from Layers

ArcGIS JS API 4.x (or 3.x)

  • Get REST endpoints
  • Load into map
  • Sort/order
  • Default symbols or override

Esri-Leaflet

  • Get REST endpoints
  • Load into map
  • Sort/order
  • Default symbols or override
  • HINT: Use Esri-Leaflet-Renderer!

 1. Create a Configurable App

 2. Build a Starter Map

 3. Search with Query Task

Labs to Do for Develop Section

Your turn!

Summary

  • ArcGIS Dev Pattern: Data, Design, Develop
  • ArcGIS Online, Web maps and ArcGIS APIs
  • Create and share apps quickly
  • Apps/APIs access REST API and Services...
  • Homework! Finish the other exercises!

Meetup Tonight

GeoDev HackerLab - Portland July 2017

By Jim Barry

GeoDev HackerLab - Portland July 2017

  • 1,111