Hello, JavaScript World!

When considering how to design your feature classes for a given project, it is good to start with an example application.

In this post, let’s take a look at the Hello, World introduction to JavaScript API (link).

The first step is to create a new text document (name it index.html) and copy-and-paste the example HTML (hypertext markup language) from Step 3. For testing purposes, I will start a local HTTP (hypertext transfer protocol) service using Python 3. From the command line, navigate to the directory where you have your HTML file (using the cd command) and then run the following to evoke a simple Python-based HTTP server:

python -m http.server

You should see a response similar to:

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000)

Now, if you open a web browser and copy the URL above (e.g., http://0.0.0.0:8000 or http://localhost:8000), you should see a map similar to the image in the tutorial.

Continuing with the Quick Start, I went through the following tutorials:

1. Create a starter app
2. Select a basemap
3. Add layers to a map
4. Style feature layers
5. Configure pop-ups
6. Configure layers

Here’s my example: Hello, World (html).

Presently, it draws points, lines, and polygons. The points have a custom symbology (graphic) and pop-up. The lines have a query to only highlight trails with bike access, custom symbology, and popup. The polygons have custom symbology (unique values) and popups.

Important take-aways:

• Every hosted feature class has a unique REST (representational state transfer) service URL that we can use to access within our app (i.e., we create a feature class, host it, share publicly, and grab the service URL)
• Renderers give you access to symbology properties
• Pop-ups are quite similar to that in ArcGIS Online web maps
• Map drawing order can be manually controlled (e.g., map.add(trailsLayer, 0); puts the trailsLayer at the bottom of the drawing order because of the , 0 added to the map.add function)

Important references:

• Arcade Expressions
• Reference Arcade expressions in Popup Template
• Autocasting
• Simple Renderer

Next steps:

1. Display and track your location.

   I found the Locate and Track widgets that show/track a user’s location on a web app. What is nice about these widgets is that they both have Graphic properties, which have Geometry properties. Geometry is the base class for Point, Line, and Polygon features and, assuming that our location is a point feature, Point has numeric properties of longitude and latitude—this could be a potential path to identifying whether a location is within a geofence.

2. Arcade Expressions for Popup Template.

   I feel a good first step would be to see if I can get a popup to indicate whether I’m within a certain geofence or not. There is a UniqueValueRenderer that pairs with Arcade Logic in the geofencing demo, but I’m not sure how it all ties together yet.

---

Update 2020-04-15

This is where I got: Test Locations (html).

• I can load a polygon feature shared publicly from my ArcGIS Online account (parcels in Williamsburg, VA)
• I can add Track and Locate widgets to identify my location
• I can create an Arcade-based pop-up

Challenge:

• Not sure how to test geometry between Track or Locate and the polygons

Moving Forward:

• Maybe, every time the Locate button is clicked, save that location to a list
  • We can track the locate() event trigger
  • Can we store location as a geometry (e.g., Point) to a list?
  • Can we save all these points to a feature?
  • Can we test the intersection of this feature with our polygons?
  • Can we use the geofence demo to apply unique symbology based on the intersection?

More to follow…

CGA at William & Mary (2021)