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: BERLINHACK

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

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

github.com/esri/geodev-hackerlabs

2. Create and Edit Data

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

github.com/esri/geodev-hackerlabs

3. Make Data from Data

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

github.com/esri/geodev-hackerlabs

CODE

• Use feature service URLs
• Add as a layer to the map
• Uses default styling

github.com/esri/geodev-hackerlabs

 1. Import Data

 2. Create and Edit Data

 3. GeoEnrich Data

github.com/esri/geodev-hackerlabs

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

github.com/esri/geodev-hackerlabs

Style Layers

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

github.com/esri/geodev-hackerlabs

Style Popups

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

github.com/esri/geodev-hackerlabs

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/esri/geodev-hackerlabs

Save Layer Styles

• Copy and save layers with custom symbology
• Save as new items
• Inspect JSON
• Use JSON in apps

github.com/esri/geodev-hackerlabs

Style Vector Tiles

• New basemaps in ArcGIS Online (beta)
• Easy to edit and style root.json
• Re-upload to update your layer

github.com/esri/geodev-hackerlabs

Style 3D layers 

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

github.com/esri/geodev-hackerlabs

Code

• Add a styled layer to an app
• Style a layer with JSON
• Style a layer popup
• Add vector tile basemap

github.com/esri/geodev-hackerlabs

 1. Create a New Web Map

 2. Style a Web Map

 3. Style Popups

github.com/esri/geodev-hackerlabs

Labs to Do for Design Section

Your turn!

github.com/esri/geodev-hackerlabs

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

github.com/esri/geodev-hackerlabs

Calcite Maps - Bootstrap

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

github.com/esri/geodev-hackerlabs

2. Web AppBuilder

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

github.com/esri/geodev-hackerlabs

Custom WAB Apps

Web AppBuilder - Developer

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

github.com/esri/geodev-hackerlabs

3. ArcGIS JavaScript API

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

github.com/esri/geodev-hackerlabs

Apps from Layers

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

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

github.com/esri/geodev-hackerlabs

Esri-Leaflet

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

github.com/esri/geodev-hackerlabs

 1. Create a Configurable App

 2. Build a Starter Map

 3. Search with Query Task

github.com/esri/geodev-hackerlabs

Labs to Do for Develop Section

Your turn!

github.com/esri/geodev-hackerlabs