00:01So, welcome to the tech session on ArcGIS app templates for JavaScript and also the ArcGIS API for JavaScript.

00:07So I'm James Cardona and I work for Esri in the DC office...

00:11...and just before we get started, let's get a show of hands.

00:14How many people here are currently JavaScript developers? Okay, so we've got a few.

00:20How many are using the Esri JavaScript API? Okay, good, not many of you.

00:26So, 'cause this is pretty much an introductory session.

00:30There's not going to be anything earth shattering here, no mind-blowing JavaScript tips.

00:37So, the first half we're going to look at these ArcGIS app templates for JavaScript.

00:40I guess if you were at the plenary yesterday, you saw a little bit of that.

00:44So we're going to look at what are they, how you can use them on ArcGIS Online...

00:48...and how you can actually download them and use them on your own web server locally.

00:55Second half, we're going to take a look at the actual JavaScript API.

00:59So, we're going to look at, you know, what can you build with it?

01:02What do you need to get started with it? Resources that are available to you.

01:07And also we're going to look at building a couple of simple applications.

01:13So let's look at the templates. So, first of all, what are the templates for JavaScript?

01:17So basically, they're just a set of web applications that our developers have written.

01:22They are using the JavaScript API that Esri has.

01:28The key thing to remember here is that they are written to use web maps.

01:33So, they leverage a web map that's either on ArcGIS Online, on the public version...

01:40...on a subscription version that's on Esri's cloud, or one that's hosted on your portal behind the firewall.

01:47And they are configurable. So we'll look a little bit about that and the different ways you can configure them.

01:54How do you access them? So, the simplest way to access them is to go to ArcGIS Online.

01:59You probably saw in the plenary, you go there, you open a web map up...

02:03...you click if you want to share it, and you publish it to ArcGIS Online.

02:08So when you're doing this, the application is just hosted on Esri's cloud...

02:15...and the configuration that's available to you is very basic.

02:21If you can see in the little diagram up there, when you go to these application templates...

02:25...anything that has a little gear on it is something that is configurable.

02:29And we'll look at how you can configure it. It's right through the UI.

02:33Second way you can access them is, you can actually download the web application.

02:38When you do this, you get the source code and you're going to put it on your own web server...

02:43...and again, it's going to access a web map...

02:45...and again, you can access a web map that's on the public ArcGIS Online or one that's on your portal.

02:50And since you're getting the source code, obviously you can configure it more.

02:53You can do anything you want to it, but we'll show the basic configuration...

02:57...that's very easy to do and is available to you.

03:02So that's the slides for the template. Pretty easy, huh?

03:05So, here's a couple of things about where you can get more information.

03:07There's actually a group for the templates though.

03:09If you go to ArcGIS Online, you do a keyword search on "web application templates"...

03:15...to come up, actually, you'll see a bunch of them, but there's a couple that are by Esri.

03:20I think there's one by Belize, too. I don't think that has anything to do with us, but it could be interesting to look at.

03:26The Resource Center is a good place to get details about JavaScript.

03:32So, let's just quickly jump into what the templates are.

03:38So, I'm not going to talk about web maps here and how to build them...

03:40...'cause I'm sure you've been inundated with that already.

03:43But first of all, let's look at publishing a template from ArcGIS Online.

03:49So, in my content here, I have a bunch of web maps as you can see, I have one about housing affordability...

03:56...and I've decided that I want to make a web application from this so people can access it...

03:59...without actually having to come and navigate through the user interface for ArcGIS Online.

04:05So, to do this, I'm just going to open up the web map...

04:11...and we have the Share link at the top, so I'm just going to share it.

04:14So this is where I would normally go in, I can share it with different groups...

04:19...share it with everyone as a public application, but in this case I'm going to come down here...

04:24...and I'm going to choose the option to make a web application.

04:27So you can see all the options that are available to me. There's actually quite a few.

04:31And like I said, anyone that has a little gear is configurable through the user interface of ArcGIS Online.

04:37And if you go through, there's some pretty interesting ones in here.

04:41And one thing that doesn't pop out that people look at sometimes is...

04:45...there's a side-by-side viewer in here, and people always see it with the three applications...

04:54...ah, there we go. So download to publish that. They always see that with the three applications.

04:57It's actually built so that you can put two in there as well, or three, and you can compare maps side by side.

05:04That's a pretty cool one.

05:06What we're going to look at is just the basic viewer today.

05:10And, so if I want to publish this, it's as simple as just click and publish...

05:13...entering the title on my map, and we can say, Housing...

05:18...give it some tags so everybody can search for it if they want to, save, and publish.

05:26And so right now it's generating an application for me. It's done.

05:29I can go to that and view all the information about it, get some details.

05:35So you can see, here's the URL that I can pass to people, if they want to see this application.

05:40I can edit details about it, the description, anything else I want to do to it...

05:45...put in a new thumbnail if I want, and I can configure it as well right through the UI.

05:51So if I want to configure this, the basic configuration that's available to me is, I can change the color scheme.

05:57So if I want to skin it with a different color, right now we've got the gray.

06:00That might be a little depressing for the housing market.

06:03Maybe we want to make it a little, you know, more upbeat, so maybe we want to go with an orange skin.

06:09By default it's going to take the title of your web map. Up there is the title of the application, but I can change that as well.

06:16Let's just change it to Housing Affordability, choose to include an overview map.

06:22I can change the logo as well if I don't want the Esri logo down there.

06:25Maybe I want my own logo of my company

06:28And I can take out any menu item I want. You can see there's a long list of them.

06:34Once I'm done with that, just simply save it, those are applied...

06:42...and you'll see the changes whenever you go to that application again.

06:46So we can just pass that URL to somebody, so now they're coming in through...

06:49...they didn't have to navigate through the user interface for ArcGIS Online.

06:53You can see it's changed my skin to an orange skin, and you'll see the application.

06:57It's a pretty nice application. It gives you a lot of functionality.

07:00I get the legend, details that I've entered in my map, simple zoom controls.

07:06I can change my basemap on here. I get my Measure tool, you know, if that's appropriate for my map.

07:15If I have time data in here, that'll show up on the menu as well.

07:18If I have a feature layer that's editable, that'll show up on here as well, and you get the simple searching for an address.

07:25So, right off the bat, no coding required. I get a pretty nice-looking JavaScript app with some functionality in it...

07:31...that'll use my web map and give me the functionality that's in that web map as well, including pop-ups.

07:38So, that's the simple way to publish an application.

07:43So, now let's look at a different scenario. Maybe I want to bring this application over.

07:49I don't want just the, you know, real basic configuration.

07:53I want to do a little bit more to it or maybe I'm behind a firewall...

07:56...and I can't use an ArcGIS Online-hosted web map, so now I want to go in...

08:01...and actually download the source code and configure that.

08:05So I've got a different map in here, and in this case, I'm going to be a broccoli fanatic...

08:12...and I've found some data that shows the, you know, California is just, you know...

08:17...stomping everybody in terms of the amount of broccoli that's grown in the US.

08:21And I want to show farmers on the East Coast that maybe they want to cash in on a little bit of this.

08:26And I want to use a web application to show them that there's a lot of broccoli grown in the US.

08:32It's a popular crop. I've got time data to support it.

08:35We can see, you know, California's just taking off. It's bright green, and the Southwest is there...

08:40...so let me do a demonstration to them and show them how they can cash in on this awesome crop.

08:47So again, I'm going to go to Share, I'm going to say, "Make a web application"...

08:51...but this time instead of choosing to publish, I'm going to download it...

08:57...and I'm going to download it to my web server.

08:59So I'll just say OK, it'll come over, and when I say, "Download this"...

09:07...when I choose to make a web application, you'll see I get a map ID in here.

09:10So I'm going to copy that 'cause that's going to be key in my configuration file...

09:14...'cause that's going to point to what web map I want to use in my application.

09:19And if you forget to copy it in here, you can always get it through the URL as well here.

09:22Whenever you navigate to ArcGIS Online on a web map, the ID is always shown up here as web map equals.

09:29So I'll close that out, come over to my local server, and let's look at what got brought over.

09:36So I've got a ZIP file here named Basic Viewer and I can just open that up...

09:43...and I get a directory called Basic Viewer again that I'm just going to copy into the root directory of my web server.

09:53And what we get in there is, you'll see we get some CSS files that are going to be used to skin it.

10:00I get some images that are used in the skinning of the application.

10:05I get some simple JavaScript files in there.

10:09I get a Read Me that is going to tell me how I can actually deploy this application...

10:14...how to install it, how to configure it, how to specify more map options...

10:21...and the actual HTML page that's going to get hit when people come to this site, the index to that HTML.

10:27So here's where I'm going to do my configuration in this file.

10:29So I'm just going to open it up in Notepad++ and show you what I need to do to configure it.

10:36So it's as simple as going in here to the Config Option section and just pasting in my web map ID.

10:44And when I do that and save it, let's go over and take a look in the browser...

10:55...and look at the basic viewer. There we go. So now on my own web server...

11:01...I have a map that's just the same as it is on ArcGIS Online.

11:05You can see that I had a time-enabled web map in there, so I have the time slider available to me.

11:11Users coming in can use this. Again, you do the time sliding.

11:16So, exactly the same as it is on ArcGIS Online, but it's hosted on my own server.

11:21So, now I want to go a little bit more. I want to do just a little bit more tweaking to this application.

11:26So, what else is available to me? So, I can change the title in here just like I can through the user interface on ArcGIS Online.

11:34We'll change it to Broccoli. I can change the theme just like I did, so again I don't want gray.

11:39It's Broccoli, so we're going to go to a green theme this time.

11:42I can hide any of the user interface items I don't want people to see.

11:46So, if I don't them to be able to display basemaps, that kind of thing.

11:50And if I want to just clean it up a little bit and not make it, you know, them overwhelmed with options, I can do that.

11:56And, as well, I can come down here and...there we go. So I can put links on this page as well.

12:04So when I'm giving this demonstration to farmers, I want them to be able to link to some more information...

12:09...about projects in the east that are going to help them grow broccoli.

12:15So, I'll go ahead and paste those links in there. I can add a custom logo again, so I don't have to use the Esri logo...

12:26...and so I'm going to add the...add my mascot to it, which is the Brocco man.

12:38Hopefully, I spelled that right. And, so let's see what happened there.

12:42So, real simple to configure, go back to our web browser, we'll refresh it, and see what comes up.

12:50So there we go, different skin, got my nice little broccoli man down there that's supposed to inspire people...

12:56...and did a little bit of tweaking, got my links up there so when I'm giving the presentation...

13:01...and the people get excited about it, I can point them to Cornell University that has the eastern broccoli project.

13:06So, a little bit more tweaking of the application.

13:11But if I want to go a little bit more, you know, changing of it, we have the CSS files available to us.

13:17So, I have another CSS file in here that I've changed a little bit.

13:25And in here, I've just basically picked and choose between the Esri's colors that they supply.

13:30So you can see I'm referencing a green images, orange, blue, purple...

13:35...that kind of thing, just to mix and match it a little bit.

13:39So what I like to do to add a new CSS file is just copy it, go to my basic viewer application...

13:47...go into the CSS directory, and paste it in. So now I have a CSS file called broccoli.css...

13:55...and you notice they're all keyed against the theme I want to give my application.

14:02So I'll just go up here to the themes, and this time instead of choosing green, I'll choose Broccoli.

14:15Go to a web browser, we'll refresh it, and we'll see what happens.

14:24So there we go. There's my new skin theme.

14:25I have a little overcooked broccoli theme going on over here in the legend.

14:30You know, I've got some orange stuff going on here, some purple.

14:32So you can really tweak the site to make it your own, and in this case...

14:36...you see why the developers don't ask me about colors with the user interfaces when they're consulting people.

14:43But, I just want to say one more thing. So we're assuming here that the web map is public and everybody can get to it.

14:51If that is not the case, suppose you've got a web map in there that you're working on...

14:57...and you don't want everybody to see it, but you want a few people to see it.

15:03Well, in that case, there's a couple of things you have to do.

15:08And just so they don't catch you by surprise, 'cause they caught me by surprise, I'll show you what happens.

15:13So I have another web map in here that I haven't shared with everybody.

15:17So I'm going to take that ID and paste that in, and we'll see what happens.

15:24So you would think it would just all work again, go to our browser, we'll refresh it...

15:34...and you'll see I get an error, Unable to create the map and aborted the sign-in.

15:37So, what's going on here and what do I need to do to change this to make it access a nonpublic web map?

15:44So, two things I have to do. When I look at the config options in here, I'll look down a little bit and I'll see a proxy URL.

15:55So this is going to be a proxy that I'm hosting on my web server and it says when you're editing you need to specify it.

16:01And this is going to send certain requests through this proxy and it's going to post them.

16:07It's going to send the request as a post.

16:10So, in this case, I actually need a proxy and I have one set up, and in the instructions there's a...

16:14...in the Read Me document, there's instructions about how to set it up.

16:18So, I'll just point to my proxy. There we go.

16:29So, I'm pointing to a proxy on my machine. But then there's one more thing that you need to do...

16:33...because at version 2.7 that we're using here, they changed a little widget.

16:38There's an Identify widget...an Identity widget that's going to be popped up...

16:43...when you try to access a nonpublic web map, and it's going to ask for your credentials.

16:48And in 2.7, they added some functionality to it that's going to say...

16:51...You cannot run the Identity widget against a web server that doesn't have HTTPS enabled.

17:01And I'm on a development server here and I don't have it...

17:04...and I don't want to go to the bother of getting a certificate for it...

17:07...so what I've done is, I'm just telling the widget that's it's okay.

17:13So I'm going to return True from this function instead of returning False...

17:18...and it's going to allow me to override that default.

17:22So, now when I come to my browser, go to look at a nonpublic web map...

17:30...see I get a little Identity widget here, and there we go.

17:41So now it'll sign me in, take those credentials, pass it over to ArcGIS Online...

17:45...and allow me to access that nonpublic web map as long as I have permissions to look at it.

17:53So, that's the application templates. Real simple. So, you know, if you're not a JavaScript developer...

18:00...and you want to get some web maps up, it's a really good way to go.

18:06So now let's move on and actually look at the JavaScript API.

18:24Alright. So what can you do with the JavaScript API?

18:28So, the simplest thing you can do is, you can make a map and integrate it into your web application.

18:34So, at Esri, whenever we're showing things, the map is always up front, centered in your face. It's everything.

18:39But, obviously, that's not always going to be the case.

18:41So, if you have a current application that you have, and you just want to insert a map that, you know...

18:46...isn't the be-all and end-all in the application, but you think it might add to it...

18:49...then JavaScript API's a really simple way to go in there and add a simple map.

18:55And you can display an interactive map very easily.

18:58You can put any of your geographic data that you have onto an existing ArcGIS Online basemap...

19:03...and as...if you were at the plenary, you saw Tasha show all those new basemaps that we have.

19:08So there's a lot of choice you have with your basemap. You don't have to worry about that.

19:13You can execute a task as well, and you can display the results.

19:16So, when I say a task, I'm talking about, you know, asking the server to do something...

19:20...like look for an address, and I can display the results on the map. I can run a model on the map.

19:26Maybe I have just a network analysis functionality on there, and I can do that as well.

19:30Those are all considered tasks in the JavaScript API. So I can run any of those through it...

19:36...and then take the results and put them right on my map.

19:41And you can make some really nice applications as well.

19:45See if this comes up fairly quick and I'll show it to you. But when people think about the JavaScript...

19:50...a lot of times they don't think about some really nice...

19:51...slick-looking applications with charting and everything.

19:55So I just want to show you this one. It's out of New South Wales...

19:59...and it gives you the functionality to come in here, look at the different areas, bring up information about them.

20:08So there's population information in here. You get some charting functionality that's pretty slick...

20:16...you know, it kind of looks kind of Flexy or Silverlighty, but it's all being done using JavaScript.

20:22So you can do a lot with it.

20:30And before we talk about the JavaScript API, you have to talk about the REST API.

20:36And what the REST API is, it's basically...it's a simple view into an ArcGIS Server instance.

20:41So, every time you install ArcGIS Server, this happens actually at 9.3.

20:45So at 9.3, they introduced this REST API and whenever you install Server...

20:50...you get a services directory that you can go to and a developer can go there...

20:55...and see what is on the ArcGIS server in a simple way, and get a feel for what's there...

21:01...what attributes do, do layers have, what functionality has been exposed...

21:07...what version of the server is running, and is able to see all that.

21:11And, we'll just take a quick look at it, what one of them looks like.

21:17So when they go here, we can see is, what the home directory here...

21:21...the services directory of an ArcGIS Server instance running version 10.1.

21:26You can see what services I have available to me. I have a couple of map services, a geometry service...

21:32...and I can drill down in here and look at details about this.

21:36So if I want to drill into the Detail Countries map service, I can look, I can see what layers there are...

21:42...there aren't many in this one, but what layers are available, whether it's cached or not...

21:48...whether...an initial extent, what the spatial reference is, drill down into the layers...

21:54...see what attributes are available, what operations the GIS server is exposed on this.

22:01I have a query task on here, generate data classes.

22:07So it's a good place for the developer to go and get information about the service.

22:12And it's all URL driven, so at the top you can see the URL is changing as I go to the different sections of this service.

22:20And that's key, because a developer can come in here and copy and paste the URLs...

22:24...and that's what's going to be needed in the JavaScript API to point to the different services on an ArcGIS Server...

22:29...'cause the JavaScript API is using this REST...these REST endpoints...

22:34...and it's basically translating your requests in the JavaScript API into a URL, sending it to the server...

22:41...the server's going to send back some JSON strings, the JavaScript API is taking all that and parsing it...

22:46...and sending it back to you as objects.

22:48So, it kind of abstracts this REST API and makes it easier for you to develop.

22:52And this REST API is what powers all of the web APIs, Flex 1, Silverlight 1 also.

23:02And in this REST API...so, all those services are exposed as a resource, as you saw.

23:07There's different metadata at the different service levels...

23:10...and all of those resources are going to have operations you can do against it.

23:14So, like if I go to a map service, I can export an image at a certain extent...

23:19...I can find features within layers, I can identify on features.

23:24Image services. I can actually export images, if that's actually been enabled, and the image service...

23:29...I can find addresses in a geocode service, execute a model on a geoprocessing service, et cetera, et cetera.

23:36Geometry service is a really good one, because that is a really powerful way to go in.

23:40You can do projections, buffers, that kind of thing, and it's very key for when you want to do editing through the web.

23:52So then, another question you're come up with is, you know...

23:53...Why would I want to use JavaScript? You know, what's the reason behind it?

23:59And, here they are. So, JavaScript is one of the most-used programming languages in the world.

24:04So, you know, if everybody else is using it, why shouldn't I?

24:07But one of the things it does is, it gives you a really good community out there.

24:11There's lots of places you can find out information about JavaScript...

24:15...anything you're having trouble coding with, you can go onto the Internet and find answers to it.

24:20Somebody else has had that problem before.

24:22Lots of books available, you know, tons of stuff available to use.

24:26And another key thing is that the applications are going to run in the browser.

24:29They're not going to be using a plug-in like Flex and Silverlight. Everything is in here right in the browser.

24:38And, there's a bunch of frameworks as well.

24:40Everybody's who worked with JavaScript know there's all kind of things about, Well, am I in Firefox?

24:44Am I in IE? Am I in Chrome? All sorts of "if...then" statements and everything.

24:49So, you know, programmers have realized that this is a real pain...

24:53...and so there's frameworks out there that kind of abstract all that stuff away from you...

24:57...and allow you to just call the functions on the framework...

25:00...and then they handle the browser differences for you.

25:04And it's a very accessible programming language.

25:06I don't need to download something, any fancy IDE, or a compiler or anything like that.

25:10I can open up Notepad, fire away some stuff, and I've got JavaScript down.

25:17And, that being said, the IDEs are getting much better as well.

25:21One of the things with JavaScript was always, Oh, I don't get Intelesense.

25:24Oh, It's hard to, you know, figure out what's going on. But the IDEs are getting much better.

25:28There's Aptana, there's Notepad++. Visual Studio is actually getting better and better...

25:33...and I think as we see HTML 5 and JavaScript catching on, becoming more prevalent...

25:38...then we're going to see Microsoft coming in there and upping their game as far as IDEs go.

25:47Another reason is that there's all these companies out there.

25:49There's Google, there's Microsoft, there's Mozilla, you know...

25:52...they're all fighting to get you to use their browser.

25:55And one of the ways they're getting you to use their browser is that they're going for the fastest one.

25:59And one of the ways they make it faster is to deal with JavaScript better...

26:04...so they're doing just-in-time compilation of it to byte code.

26:08They're doing more efficient garbage collection and they're improving graphics incredibly...

26:15...which there used to be a huge bog-down in the client's browser-based applications.

26:21They're just doing incredible things with that to make them be able to handle graphics better.

26:26And with CSS3, there's lots of stuff coming in there that give developers an opportunity...

26:31...to make stuff look like what they would consider to be what a Flex application would be, all using CSS.

26:38So, things are getting much better now.

26:43So, that means that let's go and look at the JavaScript API.

26:46So we talked a little bit about what you can do with it and it says here...

26:50...you can embed maps and tasks from any ArcGIS server into your website.

26:53So we'll caveat that with say anything after 9. because that's when the REST API was introduced.

26:58You're not just limited to ArcGIS Server services.

27:01It also supports KML, WMS, WMTS services and you can use the basemaps provided by Esri.

27:09You can use your own basemap if you want, your own geospatial data.

27:13One nice thing is it can be in any supported projection. For our desktop product, supports the projection.

27:19It has a well-known ID or well-known text for the projection. Then we're going to be able to support it.

27:25You can put it on any...on a basemap that's in one projection, the JavaScript API will handle requesting it...

27:31...in a different projection than the map service might be in, and putting it right on top of your map.

27:38And, I just have to tell you, it's built on top the Dojo JavaScript toolkit.

27:45When I say that, lots of people are always like, what's Dojo?

27:49Well, it's a JavaScript toolkit like I was talking about...

27:52So, it helps you abstract a lot of the browser differences if you call stuff against Dojo. It's one of the older toolkits around.

27:59So there's a large, active community. So that's one of the reasons that the developers decided to use Dojo.

28:05And another reason is that...because of these things called Dojo Dijits...

28:09...and what they are, it's a widgeting system and it's very powerful in Dojo...

28:15...and our developers have leveraged that to give you a bunch of widgets...

28:18...that you can plug into your applications very easily.

28:21One of those is going to be the...you saw the time slider in there, there's an overview map, an editor...

28:27...and these are just widgets that they've done, put a lot of functionality into...

28:31...and they're very easy to put in your application.

28:33You just wire them up to another component in your map, like the overview map, you'll tie it to another map...

28:37...and boom, they just give you functionality. So they're really nice.

28:43And as well, that it has a really powerful Aventi model and in the JavaScript API...

28:47...every request that you make to the server is going to be an asynchronous request...

28:50...so that you don't bog down the UI while it's waiting for a response.

28:54And so Dojo has a good Aventi model to handle those asynchronous requests.

28:59As well, it's very powerful with client-side graphics, which is key with the GIS applications.

29:08And as far as what you can do with integrating the Dijits into your application...

29:12...ArcGIS Online is all written using the JavaScript API.

29:16It's got some pretty slick and powerful stuff in there...

29:18...so you can see what you can do with those Dojo Dijits and the JavaScript API.

29:27And all the web APIs are on a...you know, they're on a fast development cycle and the JavaScript API is no different.

29:33So, the initial release was in 2008, so almost four years ago...

29:39...and we're already up to version 2.7, which was just released this month.

29:45And the newest release, 2.7, it works with Server 10, 9.3, also works with the 10.1...

29:53...well, it says beta here, but it's up to prerelease right now.

29:56And one of the things about going from version to version is they don't break the old versions.

30:02They try not to break the old versions, so they do make every effort not to.

30:06So if you have an old application that's referencing version 2.1, we're at 2.7...

30:12...you don't have to change that if you don't want to.

30:14But you might want to take advantage of some new functionality that they put in.

30:19One example is that the switch from 2.2 to 2.3, that was when IE 9 was supported.

30:25So if you have people using IE 9, you want to be at least up to 2.3...

30:29...and then with the newest release, they added the functionality to generalize feature layers.

30:36So, by default, any feature layer brought over using the JavaScript API will not be generalized.

30:43You're not bringing over all the vertices, so it makes your application much more efficient.

30:48So, that's one reason to think about going to 2.7.

30:54And what do you get in the JavaScript API? Well, obviously, you get a map control. That's going to be key.

30:59Like I said, you get the widgets, here's a couple of examples, you get an attribute inspector measurement widget.

31:07You get all these different kinds of layers, so whether you're going against the cached basemap...

31:11...you're going to use a tiled layer, graphics layers, you know, all different kinds.

31:18You get the tasks like I was talking about, whether you're doing a query against a layer for features...

31:24...whether you're doing the locator to find an address.

31:27You get geometry tasks as well, lots of symbology for doing your features, and you get toolbars...

31:37...which are really handy for activating the toolbar and then drawing graphics on your map.

31:46So with all that, let's actually take a look through and take a look at some stuff that could help.

31:58So, the first thing we're going to do is, we're going to look at the Resource Center.

32:00So this is the first place you're going to look for information when you're starting the JavaScript API.

32:06And it's right off of the ArcGIS Resource Center, you're going to go to Developer SDKs, web...

32:14...and click on JavaScript, then you get right to here.

32:16And on the landing page you're able to get to the recent blog posts...

32:19...you're able to see that the API for JavaScript version 2.7 was just released.

32:25And on the Concepts tab, this is a good place to start. It's got tons of information in here.

32:31If I go under the, well, just on the overview page, actually a good place to start...

32:35...if you're not a JavaScript developer or haven't started yet.

32:39Then they have some good links in here about where to find out information...

32:43...about coding in HTML 5 and in JavaScript.

32:48As well, under System Requirements, you're able to see which browsers are supported...

32:53...which versions of the browser, see the little asterisk here...

32:55...so which version of the JavaScript API is necessary to support that certain browser.

33:05If I go into Getting Started, one of the key things is setting up a development environment.

33:08So we have step-by-step instructions about how to set up...

33:11...the different development environments I was talking about.

33:13So if I want to set up Aptana, it has a link where I can download it...

33:18...and a really nice thing is, you can download a Codises plug-in.

33:20So if I download this and start Aptana, I'll get IntelliSense in there to help me out when I'm coding.

33:27So, very handy. I love that 'cause I'm usually using Visual Studio and I'm addicted to IntelliSense.

33:33And there's a spot here that says how you can get the JavaScript API.

33:39Easiest way to get it is just to put a tag in your application...

33:43...that's going to download the JavaScript API from ArcGIS Online.

33:46So, we host all the different versions on ArcGIS Online and this is the recommended way to get it.

33:53It's up 24/7. It's behind Content Delivery Network. It's got [unintelligible] going on there...

34:00...so it's being cached all over the world, so chances are wherever you are in the world...

34:04...there's a JavaScript API somewhere near you.

34:08And you're don't have to worry, you know, it's easy to reference and change versions as well.

34:14If you can't get to an outside version, then you can also download it...

34:20...or request it from customer service and they'll send you a DVD. There's also What's New in here.

34:29You can go back to all the archives, see how it's changed through the different releases.

34:33Inside the API is a really good place to go because it has more detailed...

34:36...kind of overview looks at different aspects of the API.

34:40So be it Net map navigation, we were talking about the Aventi model that was important...

34:46...so they talk about the event-driven API, how it's asynchronous requests...

34:51...how to remove event listeners, add event listeners.

34:55So it's a good place to, you know, without diving...deep dive into the different classes...

34:58...you can get kind of an overview of things.

35:02And, as well, you can see about graphics and feature layers. I was talking about feature layers.

35:07Any of you who are using the API right now, I've heard people talk about it...

35:11...and they're talking about querying against map layers and bringing over client-side graphics using a query task.

35:17Don't do that. If it's a layer in a map, you want to use a feature layer. It's much more efficient.

35:22I'm going to actually take a look at this in the code example.

35:26So you can get information about the feature layers, how to use the geoprocessor.

35:32There's also something in here called a Compact Build.

35:34This is really nice because if I specify that I want the Compact Build, then it's not going to download everything.

35:41When I was talking about...we use Dojo, so we actually bundle up the Dojo libraries with the JavaScript toolkit.

35:48And certain ones of those are going to get downloaded just when you reference the JavaScript API in your application.

35:54So if I specify the Compact Build of the API, the Dijits of Dojo are not going to get transferred over.

36:01So it's going to be a smaller download to my browser initially.

36:05So if you're on a slow network, that's key, so that's a good thing to know.

36:09And also, if you're using another framework that's not Dojo, like maybe you want to use jQuery...

36:15...then you can use this Compact version and then leverage the framework toolkit that you want.

36:22And then there's a nice chart down here that says what exactly is in the Compact versus the standard.

36:27So, one thing is that the info window you get with the Compact is going to be different...

36:31...than the info window you get with the full-on version.

36:37It talks about working with ArcGIS Server services, so here's where you can go to get more information...

36:41...about the REST interfaces that it leverages and how a developer can use them.

36:48And then, what I liked, 'cause I was a little freaked out when I first started using the JavaScript API...

36:51...I was like, Oh my gosh! Dojo? That's something else I have to learn.

36:55But they have a little section here to put you at ease, so working with Dojo, and it says, you know...

37:00...How much do I actually have to know of Dojo to actually work with this stuff, and the answer is very little.

37:05So I was relieved at that. So four things basically you have to know.

37:09You have to know the Require statement, and that's going to tell the application which libraries you want to download.

37:20The dojo.ready or onload. What this is going to do is, it's going to register a script block in your application...

37:27...that's going to get called when your page actually is done loading.

37:30And this is where most of the functionality is going to get written for your Esri JavaScript API functionality.

37:38And then we talked about the Aventi model. So to actually register events with different elements on your page...

37:44...you're going to use dojo.connect and that's going to connect a certain event.

37:48In this case, you're connecting maps onload event to a map element in the page.

37:54And then the dojo.byID is going to find an HTML element on your page by the ID you've given it.

38:02So, this is just like the document.get element by ID. So really that's all you need to know about Dojo. So that's pretty cool.

38:12And then by far, the place you're going to spend most of time, I'm sure, is in the samples.

38:15They've got hundreds of samples in here that...they do a lot in here.

38:21You can cobble together an entire application just by going in, looking at the samples...

38:26...cutting and pasting, and never writing any code...

38:30...except for just to cut and paste a URL that you want to use for...to point to your services.

38:35So there's tons of information in here.

38:37And it goes from the basics of building a map, so, you know, I want to put a basemap in there to...more...

38:47...you know, different stuff about using widgets, HTML 5.

38:51I want to use feature layers and the different ways I can use a feature layer, on and on and on.

39:00And all the sample sections follow the same basic outline.

39:07You're going to get a gallery of some of the samples, either all of the samples or the most recent ones...

39:12...so you can kind of get a feel before you actually go there, you know...

39:16...what's it going to look like, what exactly...a little summary about what's it doing.

39:20You can click on any of those thumbnails that it's giving you and you get into the actual details for that sample.

39:25And then all the details are going to follow the same thing.

39:27It's going to give you a description about it. It's going to give you any key code...

39:32...that's going to be used in the sample that you need to know about.

39:36So in here it's going to tell you how to instantiate a feature layer.

39:40And then it gives you the full code as well. So I can go in here, copy this, paste it into an HTML page...

39:47...and I have a running application right away that I can look at.

39:53And then, to dive deeper into the individual classes, I can go to the API reference and in here...

40:02...it gives you the nitty-gritty about every class in here.

40:08So I can look at the map class, see what the Require statement is on Dojo...

40:12...that I need to need to download the library that this class is in.

40:16I can see every method, every property on here, and get information about that.

40:24And the nice thing that they just added is, from here, once I'm doing reading about it...

40:31...I can search for samples that actually use this class.

40:35So, I can immediately jump to a sample that actually has this class in it...

40:40...and then see how you would actually use that in code in an application.

40:45So, that's a nice thing that they just added. So, there's the...a little bit about where you can find resources.

40:56And let's now look at what an application is going to look like.

41:03So, an application...it's going to basically boil down to just a couple of things...

41:07...that you need to know that's going to be in every application that you're going to write.

41:12So, what I have here is code that I actually cut and paste, it's just the Add a Basemap sample that I cut...

41:19...and pasted into an HTML page, and added some comments to it just so I would know what to point out.

41:26So the first thing is, this is a line that you're going to want to put in every application you write.

41:32I think it's in, probably in every sample that we have, and it's just a little tag.

41:36You'll see it says, Parce On Load True? What this is doing is, it's telling Dojo...it's setting a flag in there...

41:43...for Dojo to parse information and where it's key is if you're actually using Dojo's layout functionality.

41:54So, Dojo has this idea of where you can place things inside of zones of your page...

42:00...so I can tell Dojo I want it in the center of my page, I want it on the right gutter of my page, left gutter of my page.

42:05You can easily place things in different zones of your page and get a nice layout...

42:09...but that won't work unless you have this tag in your application.

42:12You'll have all the nice layout code, but your stuff will just show up as a little thin bar at the top of your application.

42:18So this is a key little piece here.

42:21Then you're going to want to reference the JavaScript API.

42:23So here we're doing the online way. We're referencing version 2.7 on ArcGIS Online.

42:29And then you want to reference a style sheet as well.

42:32And here we're referencing style sheet, it's Claro. I think there are four choices you get.

42:40There's like Claro, Tundra, and Hilo. They're all slightly different and that's the style...

42:45...that your map and your different widgets are going to use inside of your application.

42:54And then comes the script block that we're going to actually use...

42:57...that's going to be where we're going to write all of our functionality.

43:00And in here, just like I said, we're going to use our Require statements in here...

43:04...to tell what libraries we're going to bring over.

43:05So here you can see we're using the layout functionality in Dojo.

43:10I'm going to declare any variables that are going to be used throughout my application here.

43:15And I'm going to have a function that's going to get called when my page is done loading.

43:20And in here is where I'm going to set up my map, and my layers, my tasks, and that kind of thing.

43:26So here I have a map is equal to a new map, and you notice it has a string after it called Map.

43:33And what that's referencing is the Div tag in my HTML page where that map is actually going to get housed.

43:40So if I scroll down here and look at the actual HTML in my page, I'd practically have nothing.

43:45I have basically one Div in here that's called Map, and so the JavaScript API is just going to...

43:50...insert everything into there that's going to give me my mapping functionality.

43:56Once I have that map, I'm going to get some layers.

43:58So here I'm making a tiled layer and you can see I'm giving it the URL to an ArcGIS Online basemap.

44:06So from the REST endpoint I've gotten that URL to the map service, I've just cut and pasted it into here.

44:15And then I'm going to connect up the Onload event of my map...

44:18...and what I'm doing in here is another little thing you're probably going to want to add in your applications...

44:22...is I am connecting a Resize event to actually resize the map inside my browser.

44:28So whenever I resize my browser, the map won't just be hanging out like in the upper-left corner.

44:33If I resize it, it'll actually dynamically expand to fill your browser where it'll fill your Div tag that your map is in.

44:42And that's it. So, you know, hardly any code really.

44:47And we can just go in here and get our basemap.

44:54And you'll see with just that one Div tag and very little bit of code, I mean...

44:58...I've got a functioning map that I can use for viewing...

45:01...and all the map navigation is built into it, the zoom slider is built into it.

45:08Since we used that Resize, you can see I can resize my browser and it'll automatically fill my browser.

45:14So, very simple. I mean really, I could have just cut and pasted this from the samples page...

45:19...and we have an up and functioning map that we can then build onto if we want to.

45:26So building onto it, suppose we want to add some more functionality.

45:30You want to actually add a task in here, or...well, actually before we do that...

45:33...let's just add our own information in here as well.

45:36So, let's just go in here and uncomment this and you can see now I have a new layer.

45:42Instead of adding a tiled layer, I'm adding a dynamic layer that's going to point to a map service.

45:47And it is pointing to my Broccoli service that I used before in my ArcGIS Online template.

45:54So I've just gone to the REST endpoint of that and copied and pasted it in there.

46:01Look at our browser, I'll do a quick refresh, and we've got dynamic data sitting on top of an ArcGIS Online basemap.

46:10So there's my broccoli information, and you'll also notice you can adjust the opacity of the layers at this point as well.

46:21So very simply, I can just go in and say I want to, you know, see through that a little bit...

46:25...so I can still see my basemap so I can get my state names behind it.

46:30So very simply, you can just get a quick map showing dynamic information on top of the basemap.

46:36So, you probably want to go a little bit beyond that...

46:40...so let's look at actually wiring up some different events and using a task.

46:46So in here I'm going to want to go in and I'm going to want to whenever the user clicks on a map...

46:51...I'm going to want to capture that user click event, take the point, feed it to a geometry service...

46:56...buffer that out, and then place the buffer on the map. Of course, we have to do buffer.

47:03So in here you'll notice the...I mean, it's basically the same application I had before to begin with.

47:08So I've got some Require statements in here, I'm referencing the online version of the JavaScript API, I have a map.

47:15In this case, I'm going to have a task after my map that I'm going to initialize.

47:22I've said I want a new map, I've added a layer to it, and here's where I make my task.

47:28So here I have this variable called G service and it's going to be a geometry service task.

47:34And you know, so it takes a URL to a REST endpoint for a geometry server.

47:39And I can point that to my machine as well.

47:42And then we are wiring up here instead of...wiring up the Onload event...

47:48...we're wiring up the onClick event to the map, and we're telling it we want...

47:52...whenever a user clicks on a map, we're going to go to this function called Do Buffer.

47:58And if we look at the onClick event in the Help for the API reference...

48:03...we'll see that when that event gets fired, what gets passed to that event.

48:07It'll pass the screen point where the users click, so I'll have the pixels on the page where the users clicked.

48:12It'll pass a map point, which is the geographic coordinates of where the user clicked on the map...

48:20...and I'll add one more thing, I forget what it is.

48:23But anyway, what we're going to do with this is we're going to grab the map point of that event...

48:27...and we're going to use that to feed to our geometry service and get it buffered.

48:31And the tasks are always going to follow the same framework as well.

48:35We're going to unstantiate a task using the URL to REST endpoint...

48:40...and then that task is going to have parameters that we're going feed to it.

48:43In this case, since we're buffering, we're using a buffer parameters class...

48:48...and that's going to take an array of geometries that we want to buffer.

48:51It's going to take distances, and then it's going to take what unit those distances are in.

48:57So, in this case, we're saying I want to buffer them 5 and 10 kilometers...

49:01...and then I'm going to say what spatial reference we want to get out.

49:04And usually, you're going to want to get them out in the same spatial references as your map is in.

49:09And in this case, we can just say, map that spatial reference to say what spatial reference we want to get out.

49:15And then you're going to fire a method on that task.

49:18So, in this case, we're firing the buffer method. It's going to ask for the parameters we want to feed to it...

49:24...and then it's going to ask for a function that's going to get fired when that asynchronous request comes back.

49:31So, we're going to say, when you're done, fire off the Show Buffer event, Show Buffer function.

49:38So, what the JavaScript API's going to do is it's going to take those parameters and that URL...

49:43...and it's going to basically parce it all out and make yourself a long URL that's going to...

49:48...have all the JSON information in there that's going to get passed to the REST endpoint...

49:51...and then it's going to listen, it's going to take the information back...

49:54...and it's going to fire off this Show Buffer function that is going to send us an array of geometries.

50:01This takes polygons that have been buffered.

50:03And all I'm going to do is just handle that and loop through them.

50:07I'm going to make a new symbol, and I'm going to loop through them and add them to the graphics on my map.

50:13So every map always has one graphics layer just inherent to it that you can access by saying, "Map that graphics."

50:20So if I want to just throw graphics on a map, just kind of ad hoc...

50:23...I can use that and not have to unstantiate a new graphics layer.

50:27So in this case, I'm just adding to that, and then I'm telling fire off this event...

50:31...when the page is done loading using the Dojo.add onload.

50:36So, not too complicated and look at that, quickly in a web browser.

50:43There we go, got my basemap, click on there, and we're firing the buffer.

50:51And we're handling it when we get back. So, real simple, we're adding a task to this application.

50:58And just to kind of show you how you would handle the call to it and the asynchronous callback.

51:05So now let's look at a different one.

51:09So in this case, this kind of came about because I was flying somewhere with my son...

51:12...and we were going to be flying across the United States...

51:17...and we were looking at the little maps that the airline hands out...

51:20...and he was like, Well, why are the maps kind of curved...why are they curve...why do the lines curve like that?

51:25And I had to explain to him, well, you know, it's not always a straight line going from point to point.

51:29You want to follow the globe. It's a great circle route.

51:32So I thought it'd be kind of cool to fire up a little web application...

51:34...that you could do to kind of have your start city, your end city...

51:39...you would see how the airplane was going to fly, and then he was...

51:41...Well, you could find out, Ooh, what states or countries am I going to fly over?

51:45So, as a starting point for that, I just took a sample in the Samples page, which will actually handle quite a bit of this.

51:57If I go to Map and I go to Continuous Pan Across Dateline, what they're showing here...

52:04...they're showing the new functionality that's the Wraparound 180, which will allow you...

52:08...if your map is in Web Locator or WGS84, it's not going to just have an edge there.

52:15You can actually dynamically pan and just keep going.

52:18So that's a new functionality they were trying to show...

52:20...but actually it also shows geodesic densification of a line in here as well.

52:26And the whole functionality in this sample is to allow you to drag from point to point and show a great circle wrap.

52:35So, after I'd gone to the geodesic densification, I clicked on Find the Samples, and I found this.

52:43So that was a great starting point for me. And so, you're going to have to watch me two-finger type.

52:50I'm just going to show you a little bit about this sample here.

52:53So, the basic application I just cut and paste from that sample.

52:58And if I run this, you'll be able to see, open with the web browser, I got a couple of buttons on there.

53:07So this is what just came out of the box with the sample.

53:11So you can see as I'm dragging along there capturing my mouse-drag event...

53:15...they're feeding this to a geometry server, actually, no, not a geometry service...

53:19...'cause client-side they now have geodesic densification...

53:22...so it's just making a great circle route for me right there.

53:24So that was where I started and then I just added a little bit of functionality in here...

53:31...'cause I knew I wanted to bring up the countries I was flying over.

53:34So I wanted to add a feature layer to my map and so I just instantiate a feature layer...

53:39...and I'm also instantiating a query, because a feature layer has a nice functionality in here...

53:47...that I don't have to show all the features all the time. It has a mode to it and it has a mode selection.

53:55So, what this is nice for is, it'll only show the features that I want...that I say to select...

54:01...and that can be through an attribute query or a spatial query.

54:04So, I've set up this query to take the geometry of the great circle route...

54:09...and just select the countries that are underneath it and show them as selected.

54:12So this is really nice if you've got a lot of features in a service, in a map service layer...

54:18...and you want to show those on the map with, you know, client-side functionality...

54:22...but you don't want to bring them all over at once.

54:24You can just bring over certain ones. So, I just create the feature layer, set the selection symbol on it...

54:31...I have an info template, which is the...you know, fancy way of saying...

54:35...a little information window that's going to pop up and show me attribute information.

54:39The feature layer also takes what attributes I want to bring out...

54:42...and I found those at the REST endpoint, which showed me all the attributes that are in that feature.

54:50Other thing with the feature layer is, it's not pointing to a map service.

54:52It's pointing to a layer within a map service.

54:55So here I'm pointing to the first layer within that country's map service...

54:59...and then I just wire up a couple of events on here.

55:04This Select Countries is going to get fired, that every graphics layer has an onClick event...

55:08...which is going to get fired whenever a user actually clicks on a graphic within that layer.

55:13So, whenever I click on that great circle route, this is what's going to get fired.

55:16It's going to pass me a graphic that I've clicked on, and I can just grab that, add it to the query...

55:23...and it'll do a spatial query when I call Select Features against that country feature layer.

55:28So, just one call to a feature layer and I can automatically switch the selection.

55:31Much easier than firing a query, handling the return on it, parsing through the graphics...

55:35...adding them to the map. Just one call, whoop, and it handles everything for you.

55:39And then when I want to get rid of them, I just say, Clear Selection.

55:42So, there's a reason to use the feature layer, right there.

55:48So, by just adding a couple of functions and wiring up a new event on my graphics layer...

55:56...so map.graphics now has that onClick event, and it's going to fire that Select Countries.

56:01And, if you're using feature layers, don't forget to add the Dojo.require, because...

56:06...on the feature layer, because nothing will work unless you add that.

56:11So once we've done that, open it up again, quickly add it, so add a whoop, and now when we click on it...

56:20...hopefully it'll work. Boom. I get my selected countries in there underneath, and so if we're flying from...

56:27...Germany to somewhere near Delhi, India, we can see which countries we're flying over...

56:33...get some information about it as well in our pop-up window...

56:36...and we've got a pretty slick little application just starting from a sample on ArcGIS...on the JavaScrip API.

56:45So, that's a quick look at the basic, you know, kind of stuff you'll always follow, in terms of the code...

56:56...and how to find stuff on the Samples pages.

57:00Here's some links. These will all be posted as well, so you don't have to worry about these links right now.

57:04But Esri has a whole bunch of sample servers out there with different versions of the software running...

57:08...and some basic services, so if you just want to test the API and you want to make some simple applications...

57:13...you don't have to have an ArcGIS server available to you. You can use our sample server.

57:18And there's blogs as well. They always come out with some great information that the developers...

57:24...the developers kind of know and they pass along to you, because like, oh, maybe that would be handy for you.

57:29One of the things they passed along was that feature layer generalization...

57:32...that helped a lot of people speed up their applications.

57:36Here's links where you can access the JavaScript API.