esri / geodev-hackerlabs

A place to learn how to build geo apps with the ArcGIS Platform.

ArcGIS Geodev Hackerlabs

A place to learn how to build geo apps with the ArcGIS platform.

Welcome

This repository contains short labs that step you through the process of developing applications with ArcGIS. The process described here uses ArcGIS Online and ArcGIS for Developers accounts, tools and services, and does not require the installation of desktop software for most labs. A handful have been reworked as ArcGIS DevLabs.

The process involves three steps:

1. Data - Prepare data for your apps with ArcGIS Online.
2. Design - Style maps and layers for your apps with the ArcGIS Online Map and Scene Viewer.
3. Develop - Use maps and layers in your apps with ArcGIS templates, builders and APIs.

Getting Started

Here's how to get started:

1. Sign up for a free ArcGIS Developer subscription - Your subscription allows you to download software, register apps, import data, create new services, store maps, perform spatial analysis and more. If you already have an ArcGIS Organization subscription (with at least publisher level permission) or access to ArcGIS Enterprise, that will work too.

Free public accounts and Organizational 'User' accounts are not sufficient to complete the Hackerlabs.

2. Start the labs - You can complete the labs in order or just pick and choose the ones you want to do. It will be easiest to use the data provided (Portland open data), but you feel free to substitute with your own data and augment the steps where necessary. The labs marked with an * are the minimum labs you need to complete to build your own custom app from ground zero.

3. Share your work - This is 100% optional, but as you are going through, feel free to share your work with others in this ArcGIS Online Group!

Resources

Here are the resources you will use for the labs.

• ArcGIS for Developers - Account, Documentation, Samples, Apps, Downloads
• Esri Open Source Projects - More source code
• ArcGIS Online Maps and Apps - Map Viewer, My Content, Item Management
• ArcGIS Online Help - Documentation and Tutorials
• JS Bin - Interactive JS coding
• A simple guide for setting up a local web server (optional)

NOTE: If you are brand new to ArcGIS, we recommend that you use your developer account to sign into developers.arcgis.com to familiarize yourself with the site and then sign into ArcGIS.com to learn how to create your first map.

Labs

The labs start from ground-zero and work through the Data - Design - Develop process. In this case we use Portland open data, but feel free to use your own data to work through and build your own custom solutions. You might find it helpful to follow along with the Hackerlab Slides.

NOTE: Labs marked with an * are the minimum required to build your own app from ground zero. The others are optional.

Let's get started!

1. Data

Creating and importing data interactively is a fast and effective way to prepare data for both prototype and production app development.

In these labs you will import, create and manage data using the ArcGIS Online and ArcGIS for Developers website and tools. You will also use the map viewer to perform data enrichment, the process of adding social demographic information to a dataset, and spatial analyses, the process of creating new data based on spatial criteria. You will also explore the feature service REST endpoints and use them in a simple web app to access and display spatial data.

ArcGIS Online and Developer Tools

• Import Data*
• Create and Edit Data
• Share Data
• View via REST
• View in a Map
• GeoEnrich Data*
• Create Buffers
• Create Walk Areas
• Extract Walkable Neighborhoods
• Filter Data
• Create Authenticated Traffic Layer

Code

• Add a layer to an app
• GeometryEngine Buffering

2. Design

Creating web maps with great cartography is one of the most important steps to building effective mapping applications. Styling maps interactively can also be huge time-saver in app development.

In these labs you will use ArcGIS Online and the map viewer to create and style web maps. You will create new maps, explore basemaps, search for layers, use smart mapping to change symbol styles, style popups, label data, show/hide fields, filter data, and more. You will also learn how to save web maps and featurelayers and use the JSON to achieve the same rich cartographic and popup experiences in your own custom apps.

ArcGIS Online Tools

• Create a New Web Map*
• Style a Web Map*
• Style Popups*
• Smart Mapping - Proportional Styling
• Copy and save a Layer
• Vector Basemaps
• Customize Vector Basemap
• Create a new 3D Scene

Code

• Add a styled layer to an app - Bonus section
• Style a layer with JSON
• Style a layer popup
• Style a layer with a renderer
• Add a vector tiled layer

3. Develop

One of the easiest ways to build an ArcGIS map app is to start with a web map.

In these labs you will use the Configurable App Templates, the ArcGIS Web App Builder, and the APIs to build custom mapping apps. You will use the web maps with the Web AppBuilder to create an HTML5 responsive app or AppStudio to build and deploy a native app for iOS and Android. Or you can just build a custom app from the ground up with the ArcGIS JS API, Esri-Leaflet or the ArcGIS Runtime APIs.

Web Map Apps

• Create a Configurable App*
• Create a Web AppBuilder App
• Create a JS API App
• Create a Esri Leaflet App
• Create a Calcite Maps - Bootstrap App
• Create an AppStudio App

JS API

• Build a Starter Map
• Build a Starter 3D Map
• Add Feature Layer
• Add Vector Tile Layer
• Style Feature Layer
• Style Feature Layer with JSON
• Extrude data as Polygons in 3D
• Style a layer popup
• Search with a Widget
• Search with a Widget 3D
• Search with a Query Task
• Client-side Buffering
• Client-side Buffering with UI
• Working with ArcGIS Online Proxy

The above labs all use the 4.x JS API. If you would rather learn about the 3.x JS API, check here.

ArcGIS API for Python

• Set up your developer environment
• Create a map
• Add a layer to a map

Esri-Leaflet

• Build a Starter Map
• Add Feature Layers
• GeoEnrich address searches
• Add Geolocation
• Use Geolocation to Query
• Use Geolocation (and turf) to Query

Web AppBuilder Developer Edition

• Setup Development Environment
• Add a Custom Widget
• Add a Custom Configurable Widget
• Add a Custom Theme
• Deploy to ArcGIS Online

Want to share your work?

1. Login to ArcGIS Online.

• Search for Geodev Hackerlabs Share > Search Groups.
• Uncheck Only search in my account/organization.
• Join the group.
• Share your own items.

Want to help?

1. Sign up for a GitHub account (if you don't already have one).
2. Let us know what works for you and what doesn't in an issue
3. If you're already savvy with git (or want an excuse to start learning), feel free to fork the repo and send us a pull request! There is lots on the web to help you get started, but we especially like the stuff here.

Data and Terms of Use

Please see www.civicapps.org, developer.trimet.org/gis and http://www.portlandoregon.gov/bts for the data terms of use.

Licensing

Copyright 2017 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file.

geodev-hackerlabs's Issues

Clarify step 3

For step 3:

1. In the table of contents, hover over the selected layer and click More Options > Copy

You might want to mention that you have to hover over the three '•••' else, 'More options' will not appear.

Consider moving longer labs to it's own sub-category of labs

Let's see if we can put the longer, instructor-led labs in a section all on it's own. As we discussed, these labs are a little different than the others and require a lot more coaching.

@jgravois

Simplify JS Client-Side Buffer Lab

We should probably remove the slider and make it an extra. This will be half the code.

https://github.com/Esri/geodev-hackerlabs/blob/gh-pages/develop/geometry_engine_buffer_jsapi.md

Missing fields in PDX Neighborhood layer

The "Style Popups" exercise relies on the PDX Neighborhoods feature service to contain fields with population, income, and age data, but those fields seem to be missing now.

Create a New 3D Scene: "Layer cannot be added"

Follow the steps at https://github.com/Esri/geodev-hackerlabs/blob/gh-pages/design/create_a_new_3d_scene/lab.md to create a new 3D scene. Step 4.i. says to add a layer with the URL http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Lines/FeatureServer/0 . But that layer is not added to the scene, and an error message appears:

Layer cannot be added: PDX Rail Lines
Unable to load http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Lines/FeatureServer/0?f=json status: 0 http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Lines/FeatureServer/0

I get a similar error message for http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/PDX_Rail_Stops/FeatureServer/0 .

add a 3D jsapi 4.x sample

Text fix

Under Develop, JS API, Add a Vector Tile Layer Basemap exercise, Step 3, first line, says,
"function(Map, FeatureLayer) { "

It should say,
"function(Map, FeatureLayer) { "

Clarification needed in text, pls

While participating in the HackerLab, there was a surprise while working in the Data section, in the REST exercise.
There was no explanation that one could not form a REST service from a KML file. I uploaded a KML instead of, say, a shapefile, and was confused when I clicked on the URL that resulted.

Update all URLs to HTTPS

We live in the future now and all URLs should really be HTTPS if poss.

This raises its head if you are in an HTTPS visit to ArcGIS Online but paste in an HTTP service URL (at least for the Scene Viewer). Chrome and other browsers will throw an error. Sometimes you might not know you're at HTTPS if it happened automatically because your Org is configured to only allow HTTPS access.

@alaframboise: It would also be good to replace HTTP with HTTPS in the pre-made Web Maps that are referenced from the labs. It's really easy to do that with AGO Assistant.

Consider building in unit tests

Use case: when updating to a new level of library, such as the ArcGIS JS API, or making a quick fix or update it would be nice to make sure we aren't breaking anything.

Plus, unit tests + automation is a nice productivity bonus.

Suggestion: Import Data

Hi guys!

What about adding some sources to the Import Data page, like our Open Data Portal and a few more to help developers understand where they can find geolocated data?

Add a JSAPI 3.15 vector tiles sample

Wiki page of additional dev resources

Got a suggestion to have a page that contains links to additional dev resources. It could be divided up into categories.

Errors when trying to add vector basemap

Getting errors when trying to add vector basemap when following this exercise

geodev-hackerlabs/design/apply_vector_basemap/lab.md

Error
The layer, World Street Map (Night - WGS84), can not be added to the map because its coordinate system or tiling scheme can't be adjusted to align properly with the basemap.

Got the same error when trying other vector basemaps

Public Information Template missing

In the "Create a Template App" exercise, it asks you to choose the Public Information template. But that template doesn't seem to exist anymore(?)

Create a 3d layers lab

Add Python sample(s)

esri leaflet samples need leaflet version bumped

the 'latest' cdn flag in our CDN script tag is now causing an incompatible version of esri-leaflet to be loaded in our samples. time to upgrade to leaflet-1.0.0beta.1

<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>

Live 3d link not working

The link to the demo 3d site gives a 404 error.
The url it sends you to is:
http://esri.github.io/geodev-hackerlabs/develop/src/starter_3Dmap_jsapi4b3.html

Add FeatureLayers labs only add one layer

Essentially the JS API and Leaflet Add Feature Layers labs are identical to the Add Feature Layer labs.

Create a 4.0 Visual Variables lab.

Extrude lab should use pdx neighborhoods data

Broken leaflet link

https://github.com/Esri/geodev-hackerlabs/blob/gh-pages/src/build_starter_map_leaflet.html

This link is bad, 2nd exercise in leaflet tutorials...

create and edit data lab needs refresh

https://github.com/Esri/geodev-hackerlabs/blob/gh-pages/data/create_and_edit_data.md#steps

1. Click the Hosted Data icon

now the tooltip is Layers. not sure if anything else needs updated.

We need a web server tutorial

We need a quick way to:
a. confirm that hacker's machine has a web server installed, configd, and running
b. (if not a) the simplest possible way to get a web server-like thing onto their machine

Update Saved WebMaps with new Vector Tile Layers

I think this is the only saved map: http://www.arcgis.com/home/webmap/viewer.html?webmap=11e2285a131540f792c58565db996b4b

However, it uses the original beta vector tiles which are now flagged as Mature Support.

It should be updated with this: http://www.arcgis.com/home/item.html?id=bf79e422e9454565ae0cbe9553cf6471

BTW owner:esri_vector -mature is a great search term :)

I think @alaframboise has to do this.

Update buffer hackerlab to use unit names

3.14 introduced unit names

Fix steps for create authenticated traffic layer

Click My Contents > My Traffic Layer > Advanced Options select Limit Usage and set the checkbox to enable rate limiting to 1000 requests per second.

It is now refresh interval with the newest ArcGIS Online update.

Be clearer about credit usage in create_walk_areas.md

I've had several users overrun their accounts doing this demo. Some tweaks to the content need to be made:

• Move the note about credit consumption to the top rather then the bottom
• Add a note about being careful to not overrun credits to step 5.

This should solve the issue.

Update wording in README > design section

Orgs can disable Share Everyone permission

Someone in DC at the FSBS Hackerlab was a member of an Org where "Share with Everyone" is disabled.

This is a problem for doing the labs. We just need to mention this so that people can better decide if they should be creating a Developer Account or using their Org account.

Combine 2D and 3D search widget labs

Whichever is chosen as the primary, 2D or 3D, be sure to mention how easy it is to switch between the different types.

Break out searching on a feature layer into a separate lab. That way we have a lab for using the default widget, and another lab for searching against a feature layer.

All geolocation samples broken in Chrome

They need to be updated to HTTPS

Reference: https://geonet.esri.com/people/agup-esristaff/blog/2015/05/11/using-a-secure-origin-with-browser-based-geolocation

Upgrade all exercises to ArcGIS JS API 4.x when it's final

steps for UCB to bypass lab security and set up your own web server

windows command prompt

cd C:\inetpub\wwwroot
C:\python27\ArcGIS10.3\python.exe -m SimpleHTTPServer 80

browser

http://localhost/hello_world.html

Light Green Vector Basemap - Example Live Map does not load

2. Design
   "Customize Vector Basemap" lab

At the bottom after going through the lab - the "Live Map" link that is supposed to let you compare your map to, doesn't seem to load up.
Layer name: "Light Green Canvas"

add calcite maps sample

Consider advertising hackerlabs as Enterprise-ready.

Currently, Hackerlabs are advertised to an ArcGIS Online only audience. Many could also be conducted using ArcGIS Enterprise. Please consider adding a statement in the read-me that many labs can also be accomplished using ArcGIS Enterprise.

I found that a majority from the first two sections are either portal-ready or require just a few additional steps (e.g., hosting a web app locally vs. using online developer sandbox.)

As a starting point, it could be as simple as adding an asterisk in the Getting Started, step 1 like this:

Sign up for a free ArcGIS Developer subscription – Your subscription allows you to download software, register apps, import data, create new services, store maps, perform spatial analysis and more. If you already have an ArcGIS Organizational* subscription (with at least publisher level permission) you can use that too….

*If you are using ArcGIS Enterprise (including Portal for ArcGIS), you may also complete many of the labs as-is or with a few additional steps.

Update 3D scene lab for smart mapping capabilities

For the 3D scene lab, it would be cool if you updated step 5ii (PXD rail stops) to use the 3D object drawing style.

link to join GeoDev Hackerlabs Share is set up for ESRI org login

The link to join GeoDev Hackerlabs Share is set up for ESRI org login

outline for event at UC Berkeley on 1/15

morning

introduction (30 min) - @alaframboise

1. navigate this repo
2. navigate developer site (and AGOL)
3. vouchers

data (1 hour) - @alaframboise

1. publish dataset from .zipped shapefile
2. create new empty schema
3. run drivetime/buffer/etc. analysis in AGOL

design (1 hour) - @alaframboise

1. use Map Viewer to define advanced symbology on layer

develop (1 hour)

1. demo publishing templates/wab from Map Viewer - @alaframboise
2. set up local webserver - @jgravois

afternoon

develop (4 hours)

1. make an esri leaflet app to share the services created in the morning - @jgravois

Update to JS API 4.2

;-)

Design > Customize Vector Basemap (misspelling on step 7)

On step:

1. Go to arcgis.com and login if necessary. Click My Content > click the Light Green Canvas tile layer > click UPDATE > Choose File > select the root.json file > UPDATE ITEM.

-----"UPDATE ITEM" is actually called "Update Style File"-----

Update JS API labs to reference 3.14

Currently at 3.13

Add an Arcade sample

Reference: Arcade

more python labs

• add layer to webmap
• use docker to get started instead
• save changes webmap?
• ??

Changing description on meetup.com events

Dave Martinez and I worked on re-writing the description that we post out onto meetup.com so that it better reflects what attendees can expect to do at a HackerLab and why, which will better prepare them, and will better attract those who can learn what we're doing. For example, I removed the requirement that attendees much have a Github account and Git installed. That was setting the wrong impression for those going to HackerLabs and especially those who decided because of it that they wouldn't go or that it wasn't for them. Take a look at the new description. Let's discuss improving it further:

http://www.meetup.com/DevMeetUpNortheast/events/226818553/

Calcite Maps App lab: layers do not display

Follow the steps in the Calcite Maps App lab. The basemap displays, but the neighborhoods, rail lines, and rail stops layers do not display. The completed app also has this issue, as does an app created from the solution source code.

In addition, some gray text appears over the top left corner of the map:

Esri-Leaflet lab doesn't render layers in correct order

missing curly bracket Custom Widget step 6

Under the Web App Builder Custom Widget, step 6. there is a missing ending curly bracket. I spent a long time trying to figure out why this wasn't working! thanks