Using EsriJS Collection as a Store

I talked a bit about Collections in the ArcGIS JS API 4.0beta. Remember, Collection is part of core in 4.0, so it’s helpful to get familiar with it.

To demonstrate how to do this, let’s play around with some free traffic camera data,from the Washington State DoT. You can sign up for an API key here.

You can find the full source code for this post on github.

Note This sample also shows how to add widgets to the view ui!

Now that you have an API key, let’s look at what a Collection as a Store might look like.

gist

We’re going to go ahead and extend Collection and add some properties for the API url and key that should be provided in the constructor. We also add a method called loadStore that will use esri/request to download the data and fill the collection with it. Now we can use this Store in various widgets.

gist

Here, we make a widget that adds a GraphicsLayer to the map and we are going to display some points or each of the traffic cameras that have been loaded into the store. Now what we can do is listen for change events on the store that will let the widget know when to update itself, in this case, to update the GraphicsLayer. We do some trickery in the update of the extent to account for zooming to a single point when dealing with extents.

Ok, so how might we make changes to the Collection that would propagate to this widget and update the layer? Maybe a search widget like this.

gist

Now we have a search box that will let you find a specific camera by id. We then iterate the Collection and set the visibility of everything to false and then find the specific camera and set it’s visibility to true. We even have a button to reset everything to being visible again. By removing/adding an item in a Collection will trigger a change event in the Collection, if the position actually changed. That’s why in the onRefresh method will remove/add a random feature.

You can see a demo of this application here.

Try searching for ids like 9203 and other numbers around that.

This is just one example of how you could use Collection as a data store for your application. I’m sure you can come up with some more use cases, so keep hacking away!