Developing Applications with ArcGIS API for JavaScript

Kelly Hutchins shows how to build web applications with ArcGIS API for JavaScript.

Mar 26th, 2012

Start From:
Player Color:

Right-click on these links to download and save this video.


00:01It's an exciting time to be a JavaScript developer with HTML5 and the intense competition between browser vendors... add improved performance and extra features.

00:10It's easier than ever to build impressive, nonplug-in-based web applications.

00:15Here's an example of an application built with the JavaScript API.

00:18Notice as we navigate around the map, the seamless tile display.

00:26This is that same map, but now we've added a layer on top of it.

00:30This layer is a layer of county population.

00:33These features are drawn dynamically on the client, and notice that we can still pan...

00:38...and we still get great performance as we move around the map.

00:42This is because we take advantage of the browser's powerful caching mechanism... retrieve information in the most efficient way possible.

00:52Another optimization we've made is to the geometry payload.

00:55This is an example of a response from the previous application.

01:00We've autogeneralized this geometry to one pixel per vertex...

01:05...and we've removed spurious precision to reduce the request size, or response size. Sorry.

01:13Earlier, Sud mentioned the release of the ArcGIS Portal API.

01:17The JavaScript team today released a lightweight version of this that allows you to work with your content from ArcGIS Online.

01:25In this example, we're looking at an application that shows a series of web maps from a group called Running Routes.

01:32We can display these in a gallery format.

01:36We can click on one of these maps.

01:39In this case, it's a running route for a trail up behind Palm Springs, and we view it in one of the templates.

01:45This template was written with the JavaScript API.

01:52Let's look at web maps a little bit more closely.

01:55Earlier, Jeremy showed you this web map showing recent earthquakes with a magnitude greater than 5.

02:03We can use that web map in an application built with the JavaScript API.

02:08Here's a sample from the Help that shows that same web map...

02:11...and we've added geodesic buffers of 2,000 kilometers around each earthquake.

02:17If we look at it, we can see we have those same symbols that the web map author created in

02:23If we click on it, we see that same nicely formatted pop-up...

02:29...and if we click on an area with multiple features, we see that we get this nice navigation capability.

02:40If we tried to write this application a few years ago, it would have taken us, I don't know, hundred, hundred and fifty lines of code.

02:49We would have had to add the layers to the map to find the symbology, format the pop-up content.

02:55Now, it's just a few lines of code.

02:58We use the Create Map method.

03:00We pass in the ID for that particular web map, and we've got a map that has all that capability for us.

03:08So now, we, the developers, can focus on writing that true GIS capabilities.

03:13We can add the geodesic buffering.

03:14We can perform the geoprocessing.

03:16We can focus our time on the important stuff.

03:22This is an example of an application that shows evacuation route analysis for tsunami-prone areas.

03:28So here we're looking at an area on the coast of Japan that's got potential for being impacted by a tsunami.

03:34And we've run a geoprocessing task that determines the max and average evacuation time from this zone.

03:41So these red dots are evacuation centers, and it takes approximately 2., or an average of .82 seconds...

03:49...and a maximum of 2.09 minutes to reach these evacuation zones.

03:55We can see that we have an area down here where it takes people a little bit longer.

03:59So let's see if we can improve the performance in that area by adding a new evacuation zone...

04:04...maybe constructing a high point in that area.

04:07So let's add a new point, and we'll rerun that geoprocessing task.

04:14While that task is executing, let's take a look at the source code.

04:19So the nice thing about ArcGIS Server 10.1 geoprocessing service is, is that we can get the results back as a layer.

04:26We can work with this layer like we would any other layer.

04:29We can add it to our map.

04:30We can toggle the layer visibility, and we can perform queries against it.

04:36So here we're using the query task to query that result layer, get the features...

04:42...and use statistical analysis to get back the maximum and average evacuation time.

04:53So now if we go back to our application, we can see that our second analysis has been performed...

04:59...and we've reduced our maximum evaluation time.

05:02We've cut it in half.

05:03We've also cut our average evacuation time quite a bit.

05:07So we can compare these two results on the map.

05:10But we might also want to use the 10.1 print service to create a high-quality PDF output that we can hand to an analyst... perform further analysis of that area.

05:23So here's an example of that.

05:30We've covered a lot of information in a really short period of time... we wanted to point you to the JavaScript resource center available at

05:40There you'll find out that 2.8 was released just this morning.

05:44And you can also browse the samples and look at the HTML5 samples that we have...

05:50...all the new samples we have showcasing 10.1 functionality.

05:54We have mobile samples, web maps, and samples working with the portal.

Copyright 2016 Esri
Auto Scroll (on)Enable or disable the automatic scrolling of the transcript text when the video is playing. You can save this option if you login


Nice applications


Dec 28th, 2012. 11:35:39 AM

Comment on this Video