ArcGIS API for JavaScript Part 1: Our First Web Map

Key Takeaways

hey what's going on everybody this is going to be part one in a series of working with the arjs API for JavaScript in this tutorial we're going to create our first web map it's going to be very basic but we're going to hook up their API with our HTML files we're going to set up an external Javascript file an external CSS file um so with that let's go ahead and get started uh I'm already over here at the developers. arcgis.com uh website it is a a website where if you're going to be working with this API a lot then you should definitely bookmark it it has tutorials uh the API references some samples a lot of good stuff so let's go ahead and go over to tutorials and we will click on the link here that says build your first web application okay so uh they say right here before you begin uh that you need to set up a development environment so you need to set up a a web server and have a text editor or an IDE uh to write your code in I'm not going to walk through how to set up a web server uh if you need to do that then you can click on this link here and they have a lot of good recommendations uh as far as the text editor goes uh I'm in I'm doing the coding over here in Sublime Text uh I highly recommend it it's very popular it has a ton of features um and I have a video on uh setting up development environment deir environment in Sublime Text if you would like to take a look at that I'll put the link in the description uh so let's go ahead and get started with our map here okay so right now if I go over to my tab here on Local Host I have a very basic website running that says this is a demo page and this is the HTML for that web page so you can see here uh this is a demo so pretty much starting from scratch and we're g to use their walkthrough here to get our web map up and running so the first thing is they say to take this HTML and we'll go ahead and paste that in ours that save it okay and now we need to uh reference their API and to reference their API we just take this code here and we paste this into the head of our HTML file and what we just pasted in there was this is a link to their stylesheet and so that will style their map and their map container and things like that and this is their actual Javascript file that's going to give us access to uh to their whole API um so if we keep scrolling down here they also have some other styles that you can add in but we're going to skip that right now so loading modules here um so on you'll see this a lot on their samples uh that they just put these script tags directly into the HTML and that's fine with the samples because they're all small documents but if you're going to be making uh if you're going to be making large applications then it gets too hard to manage all of your HTML and all of your JavaScript in one file so instead of doing what they do here and putting a script tag let's go ahead and make a body of our HTML and put that script tag in there so in instead of putting the script tag in here like they do we are going to take that out and we are going to link to our uh external Javascript file right here and it's in the same folder as our HTML file so all we need to do is Source equals script.js and now in script.js which I have open in this tab right here now we can add in any of the JavaScript code that that uh that they provide for us um so we're actually let's not add this in right now because they give a more complete version down here at the bottom okay let's take this one here and the code that we just added in uh requires the modules that we're going to need for our application so uh this is the path to the module the ezri map and this Dojo Dom ready uh pretty much just make sure that the website is ready to go before we load up our code so that we're not referencing anything that doesn't exist yet um and then this map here that we pass into the function that's just an alias for this ezri map here so we can actually call this whatever we want but you know uh just keep it something that you're going to know what it is so map I think is fine so let's go ahead and move down here to step five create the map so let's take this Global variable from map and paste that in there and then they give some code for the actual map itself copy and we'll paste that right in here where they put their comment and clean up that indentation okay let's scroll down and the last thing that we need to do before this will show up on our web page is to drop this div into our HTML with the ID of mapd and in our JavaScript you can see here um this doesn't have to be named map div in your HTML it's that's just the name that we assigned to it in our JavaScript so we can change that to whatever we want I'm going to STI go ahead and stick with mapd so go back over to our HTML file here and then within our body above the script tag uh put that div ID with the ID of map div and go ahead and save that and let's reload up our web page and see if we see anything okay so we have our our first map working now so um but you can see that it doesn't take up the entire web page uh that's because we haven't added any style or anything to it yet it's just uh extremely basic so let's go ahead and go back to their tutorial and you can see the uh bottom link here is uh style the page and just like I said before with their JavaScript they will also usually drop in uh these end line Styles into the HTML file but just like with the JavaScript we want to uh make that CSS file and external file so that we can manage all that stuff separate from the HTML we don't want to mix and match our HTML and JavaScript and CSS we want all those to be separate so that it's easy to maintain so instead of we don't need this style tag here all we need to do is in the head of our document at the very bottom underneath uh their screen script and stylesheet we can put in our own stylesheet so link with a rail stylesheet and the href is just the styles.css file and save that okay so now we can copy their Styles here without the style tags and paste that directly into our styles.css file and save that and as you can see all that does is gives zero padding zero margin and uh height 100% to our HTML body and the map div and okay now that's uh now we have a full screen map in our web browser and you know zoom in and if we go back you can already start messing with this if you want if we go back to our Javascript file you know this uh uh new map right here had a few options that it already added in so uh for base maps you can change this they have a few different base maps you can use uh but if we change that to Gray and then reload our map over here now we have the gray base map uh you can change the starting Zoom point to five you can change your center location to uh you know a different latitude and longitude and just kind of experiment with it and and see what it does so that's where we're going to end it for part one in the next video we will add some more styles to this map We'll add in a top menu bar here with some buttons so that we can add in some functionality uh put in some more modules so that we can do some more cool stuff with the map so uh definitely check that out and hopefully this was useful for you guys and thanks for watching