Geodev
HackerLabs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/alaframboise/images/1234844/profilepic.jpg)
www.github.com/esri/geodev-hackerlabs
Sign up for a free developer subscription @ developers.arcgis.com
Agenda
- 12:30 - 5:00 PM Hackerlab
- 5:30 - 9:00 PM - Meetup
The format is flexible, but we do have a mission...
...to use tools to help us build powerful mapping apps!
Portland Neighborhood app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667219/pdxapps.png)
Who are you?
What experience do you have with mapping platforms, HTML, CSS, JS, ArcGIS...?
What are you looking for today?
Who has a web server running on their machine?
http://esriurl.com/webserver
Valuable Resources
- ArcGIS for Developers
- ArcGIS.com
- esri.github.io
Let's sign up for a free developer license
voucher code: [code goes here]
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/1754962/Screen_Shot_2015-09-23_at_9.15.12_AM.png)
http://developers.arcgis.com
voucher code: [code goes here]
http://developers.arcgis.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/1754976/Screen_Shot_2015-09-23_at_9.18.34_AM.png)
ArcGIS Platform
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667233/arcgis.png)
Building Mapping Apps can be hard!
...but it doesn't have to be.
1. Data
2. Design
3. Develop
12:30 - Sign-up, Overview
12:45 - Data Demo
1:00 - Data Hands-on
1:30 - Design Demo
1:45 - Design Hands-on
2:15 - Develop Demo
2:45-5:00 - Develop Hands-on
![](https://s3.amazonaws.com/media-p.slid.es/uploads/303551/images/1763423/FullSizeRender.jpg)
Data
Lesson #1: Get your data in the cloud!
what are Hosted Services?
- Feature Service
- Tile Service
![](https://s3.amazonaws.com/media-p.slid.es/uploads/252828/images/1667244/pasted-from-clipboard.png)
Import data
- ArcGIS Online
- Use "Add Item"
- View and Query REST endpoint
Create from Scratch
- ArcGIS for Developers
- Create Dataset
- Define schema interactively
- ArcGIS Online Map View to add data
Create data from Data
- Spatial Analyses
- Buffers
- GeoEnrich Data
Sharing Data
- ArcGIS Online "items"
- Levels - Everyone, Groups, Private
- Custom authentication - e.g. traffic layer
Design
Lesson #2: Design the (web) Map First!
What's a Web Map?
- ArcGIS Online Map Viewer
- Choose basemap
- Add layers
- Style layers
- Create, Edit, Share
Styling Map Layers
- Default Renderers
- Polygons
- Lines
- Points
- Your custom symbology
- Smart mapping
Saving Layer Styles
- In the Map
- In the Feature Service
Styling Popups
- Title
- Body
- Fields (override)
- Formatting
- Charts
Develop
Lesson #3: Build your App FOR YOUR Map
web map Apps
- Fastest and easiest way
- Re-use data, design and configuration
- Easy to get title, subtitle, legend, map, popups
3 patterns
- Templates
- Builders
- APIs
App Templates
- Share
- Configure
- Save
- Re-configure
- Download code
- Build/host your own
Web AppBuilder
- Share
- Configure
- Save
- Re-configure
- Download (option)
- Build/host your own
ArcGIS JS API
- ArcGIS for Developers
- Samples and sandbox
- Use your own webmapID!
Apps from Layers
ArcGIS JS API 3.x/4.0
- 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!
Geojson
- Access directly
- ArcGIS JS - geojson-layer-js
- Esri-Leaflet - geojson
Fancier map Apps
Bootstrap starter
- Load entire map or layers
- ArcGIS JS/Esri-Leaflet
- See ArcGIS JS 4.0 beta1 (2D/3D)
Custom WAb Apps
Web Appbuilder - Local
- Download and install
- Configure with organization
- Build or seal code (see GitHub)
Summary
- ArcGIS has tools to help build apps
- Store data in the cloud
- Design and style maps
- Use samples/templates/builders
What did you think?
GeoDev HackerLabs
By Jim Barry
GeoDev HackerLabs
- 2,006