In this post I\u2019ll explain a little about how I built this app and where you can get the code.<\/p>\n The raw fish count data came from the Fish Passage Center website,\u00a0www.fpc.org<\/a>. Here I was able to download comma-separated value (CSV) files showing fish counts for each dam in 2011. These CSV files are similar to what you might be able to export from Microsoft Excel. To make this data work on a map, I also had to have the dam locations, so I created a point feature class and heads-up digitized each dam.<\/p>\n Sometimes time-aware datasets are structured differently from traditional datasets you might use for a paper map. What I really needed for this web app was not one record for each dam, but rather, one record for each dam\u00a0for each day<\/i>. Thus, what looks like a simple dataset with only a handful of points, really contains over 800 records.<\/p>\n With a little bit of Python, I was able to read the fish counts out of the CSV files and write them as attributes for each dam for each day. Here\u2019s a portion of\u00a0the final table:<\/p>\n In order to make this type of data time-aware in ArcGIS, you have to add it to ArcMap. Then open the Layer Properties and click the Time tab. Here is where you tell ArcGIS about your dataset and how its time fields should be interpreted.<\/p>\n One of the first settings you need to choose is whether the layer has a single time field, or\u00a0both start and end time fields. Some phenomena, like fish counts, are taken at one point in time and just have one field. Other things might have a field recording both the start and end time of an event, such as a wildfire that begins on June 9 and ends on June 13.<\/p>\n You can also indicate which field holds the time values, as well as the time extent and intervals that should be displayed in the time slider.<\/p>\n In my particular map, I wanted the same service to expose data about four fish types. So I made four copies of the layer, symbolized them with proportional symbols, and made them all time aware. Below is what the final map looked like. (It\u2019s okay that all layers are turned on and overlap, because my app only requests one layer at a time from the map service.)<\/p>\n At this point I was ready to publish the map as a service. I saved a map service definition (MSD) file (yes, these support time-aware layers) and published it to ArcGIS Server in the usual way. All of the time information saved in the map is accessible through the map service. You can verify this by looking at a layer in the Services Directory:<\/p>\n One easy way to view a time-aware map service is to add it to the ArcGIS.com map viewer (go to\u00a0www.ArcGIS.com<\/a>\u00a0and click\u00a0Map<\/strong>\u00a0to get to this viewer). The viewer recognizes any time-aware services you add and automatically gives you a time slider. In my case, I wanted to go a little further and make my own web app with a time slider. I chose the ArcGIS API for JavaScript because I had a bit of previous experience with it, and my adjacent co-workers happen to know this API very well. (I can\u2019t deny asking for the occasional hint!)<\/p>\n When you\u2019re starting out with the ArcGIS web APIs, a good strategy is to find some of the online samples that do the things you want to do, combine them into an app, and then modify the result to fit your requirements. I decided I wanted to use elements from these two samples:<\/p>\n The fish counts update very quickly because the app uses client-side graphics to display them. In other words, the browser makes a request to the map service saying essentially: \u201cGive me all the point vertices for the dams from April 17 \u2013 June 30, and their attributes. I\u2019ll do the work of drawing them.\u201d After the server sends the response, the browser can draw the points and their symbols without ever having to go back to the server for more information. Because I\u2019m dealing with fewer than 1000 records, I don\u2019t have to worry about hitting the map service\u2019s default limit for how many features it will return, but at the same time I am not requesting an\u00a0unreasonable<\/a>\u00a0number of points for the browser to display.<\/p>\n The key to displaying the graphics this easily is to use the FeatureLayer class. Here\u2019s where I create it in my code:<\/p>\n When you connect a FeatureLayer to a TimeSlider, the time slider does all the work for you of requesting and displaying the appropriate features for the currently displayed time slice.<\/p>\n The time slider is a widget included with the ArcGIS API for JavaScript. To use it, I had to put the following at the top of my code:<\/p>\n Then, I had to create the time slider and set some properties on it, such as the thumb moving rate (how fast the slider plays) and whether the time slider should replay itself when it gets to the end (accomplished with the setLoop method).<\/p>\n If you use the time slider in the ArcGIS API s for Flex or Silverlight, you\u2019ll see similar properties.<\/p>\n You can handle events on the time slider to control what happens when the \u201cthumb\u201d on the slider moves. The drawing of the fish counts is handled automatically, but I did add some code to change the date label that appears directly below the slider.<\/p>\n The above code results in a label that changes as the slider moves:<\/p>\n![\"Daily](\"http:\/\/downloads.esri.com\/blogs\/arcgisserver\/images\/time_web_app.png\")
<\/a><\/p>\nGetting the data and making it time-aware<\/h3>\n
![\"Digitized](\"http:\/\/downloads.esri.com\/blogs\/arcgisserver\/images\/time_raw_data.png\")
<\/p>\n![\"Attribute](\"http:\/\/downloads.esri.com\/blogs\/arcgisserver\/images\/time_attribute_table.png\")
<\/p>\n![\"Time](\"http:\/\/downloads.esri.com\/blogs\/arcgisserver\/images\/time_layer_properties.png\")
<\/p>\n![\"Map](\"http:\/\/downloads.esri.com\/blogs\/arcgisserver\/images\/time_arcmap.png\")
<\/p>\nExposing time-aware layers through a web service<\/h3>\n
![\"Time-aware](\"http:\/\/downloads.esri.com\/blogs\/arcgisserver\/images\/time_services_directory.png\")
<\/p>\nBuilding a time-aware web map with JavaScript<\/h3>\n
\n
var fishLayer = new esri.layers.FeatureLayer(initialFishLayerUrl, {\r\n mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,\r\n outFields: [\"*\"]\r\n});<\/pre>\ndojo.require(\"esri.dijit.TimeSlider\");<\/pre>\n
\/\/ Create and configure the time slider\r\nvar timeSlider = new esri.dijit.TimeSlider({\r\n}, dojo.byId(\"timeSliderDiv\"));\r\nmap.setTimeSlider(timeSlider);\r\ntimeSlider.setThumbCount(1);\r\nvar layerTimeExtent = results[0].layer.timeInfo.timeExtent;\r\ntimeSlider.createTimeStopsByTimeInterval(layerTimeExtent, 1, 'esriTimeUnitsDays');\r\ntimeSlider.setThumbMovingRate(350);\r\ntimeSlider.singleThumbAsTimeInstant(true);\r\ntimeSlider.setLoop(false);\r\ntimeSlider.startup();<\/pre>\n\/\/ Report the date whenever the time slider moves\r\ndojo.connect(timeSlider, \"onTimeExtentChange\", function(timeExtent){\r\n map.infoWindow.hide();\r\n dojo.byId(\"timeSliderLabel\").innerHTML = dojo.string.substitute(\"<b>${startTime}, 2011<\/b>\", timeExtent, function(val) {\r\n\r\n return dojo.date.locale.format(dojo.date.add(val, \"hour\", hourOffset), {\r\n selector: 'date',\r\n datePattern: 'MMM dd' \/\/ http:\/\/www.unicode.org\/reports\/tr35\/tr35-4.html#Date_Format_Patterns\r\n });\r\n });\r\n});<\/pre>\n![\"Label](\"http:\/\/downloads.esri.com\/blogs\/arcgisserver\/images\/time_label.png\")
<\/p>\nConclusion and download link<\/h3>\n
"}],"related_articles":"","card_image":false,"wide_image":false},"yoast_head":"\n