ArcGIS API for JavaScript Part 2: Starting Templates

Key Takeaways

hey everybody how's it going uh this is going to be the next part in working with the rgis API for JavaScript uh when we finished with the first part we had a basic map over here that just has a very simple gray background and it doesn't have any functionality if we uh look over here at the script that we used we just have a gray bass map with a zoom set to five and we put in a sample location here just a an easy walkthrough that we took through from uh from their examples um but now when a lot of people get to this point they don't really know where to go from here uh they want to add some functionality to the map um but they you know don't really know how to do that you maybe want to have a navigation bar up here uh you want to have some different buttons uh that do different things maybe you want to have some buttons in here that switch between base Maps uh within your map so that you don't have to do it within the code um so you know you could go in and start adding in you know some buttons and some functionality but it might look bad and it might not work the way that you expect it to work um so what I would recommend is uh starting with a with a template with a starting template um the most popular starting template that people use is a framework called bootstrap and getting the bootstrap framework to work with the maps is a little difficult but luckily uh ezri has already done that for us if we go over here to Google and type in rgis bootstrap then the top link here is a link to one of their GitHub repository called bootstrap map JS um really quick I'm just going to go over here to EZ's uh page on GitHub and you can see that they have a a lot of code that they put out here um so if you work with rgis a lot I highly recommend that you bookmark this page it's uh you know something useful to check out from time to time and it's not only JavaScript you can see here they have um some Java some action script some C and some python um bunch of different things so uh it's extremely useful but if we go back over here to this bootstrap map JS they have a sample here that we can take a look at and you can see they have two samples one is dojo plus jQuery and another one is pure Dojo uh I prefer to have jQuery I think it's easy to work with um and you know it's fairly popular with uh with JavaScript so if we click on here then we can see we have our top navigation bar and we have a basic map um so this top navigation bar is already responsive um right out of the box and what I mean by responsive is that it looks good on um mostly all screen sizes so uh say that someone was browsing your map on their mobile phone um then there's a lot of text up here on this navigation bar and you see if we get down to a small screen size that when this text text can't fit anymore it pops into a hamburger menu that just slides down and you know it's really smooth and all that's built in to where we don't have to uh code all this stuff ourselves from scratch um so that's really nice um let's see they also have a grid layout here where if you wanted to have a sidebar on the right with your map on the left um that's already set up you can do a center map with a sidebar on the left and a sidebar on the right and last one you can do a sidebar on the left uh with a map on the right um this is pretty neat this uh web map example that they have here loads in a uh map from RGS on line and um it already has functionality buildin where you can click on the map and you know look through different features here they also have a legend that can be maximized and minimized over here um yeah so uh a lot of good examples right out of the box um if you look at the main page here they also have uh this quickart map JS and this is another set of templates and I'm going to show you the difference between um between between the two downloads so let me go ahead and close this page and let's go ahead and uh just jump into it and download both of these repositories and put them onto our local server so that we can start playing around with them if you are familiar with Git and GitHub then you can go ahead and clone these repositories onto your desktop uh but if you're not familiar or if you just want to download a zip file then you can go ahead and download zip download the zip file here too and it's uh you know it's uh the same thing um so let's go ahead and download both of these and I will extract both of these files and I'm going to go ahead and drag these over to my local web server um if you watched part one then uh you should already know how to have your web server set up um uh so that we can view our uh view our websites locally um um let me I'm going to go ahead and call this quick start map I'm going to call it um I already have a part one so I'm going to call this part uh 2A and I'm going to call this bootstrap map part to B and now I'm going to go ahead and drag these over to my local web server okay and let's see what these look like okay so this is part one you can see up here in the address bar I have Local Host 888 and it's in a folder called arjs JavaScript and in a folder called part one so I'm going to navigate over to part 2A and this is the uh quick start map JS repository and if I go to to B then we should see okay now we can see the directory listing for the second repository that we downloaded and now if you click here on demo then you can see it takes us back to the demo that we saw before online at um through this link here in their reposit in EZ's repository but now it's running on our local web server so you can see up here it's running on Local Host um so let's go back over here to let's go to the part 2A folder and this was the Quick Start map repository through through ezri um now what this is is this is just uh a lot of samples to that you can keep referring back to if you need to look at specific code or if you want to start with one of these samples then you can do that too it's um it's a way to get you um you know just uh to dive right into it uh and have some specific functionality right out of the box so for example say that you want to switch through base Maps um so let's just click on the first B Bas Max Bas Maps example here and you can see this looks a lot like the map that we finished with in part one with the gray base map um but now we have some functionality up here uh in this base Maps menu that lets us toggle through different base Maps um if we go back we can do they have a base Maps widget where they replace the text Bas maps with these images so that you can get a preview of what it'll look like um they have I'm not going to go through every single one of these you can download it and look through them all yourselves but uh they have a lot of cool example here examples here they have the geoc coding um they have it to where you can load a geojson file using their uh terraformer uh repository another repository that they have up on GitHub um so a lot of nice functionality that you can use right off the bat um down here they have an HTML 5 geolocation sample uh so if you're browser has geolocation turned on then we can click up here on the geolocation button and it should yep Zoom to our location um so these are a lot of nice uh templates to get you started uh using any specific functionality and you can um you can uh dive in here if we look at uh Sublime Text you can go in and look at all this code you can look at all the examples that they have and see um exactly how they do so for example um you know the Geo search they have all the code here that you can look through um the starting templates that I like to start out with is if we go to part 2B this is the one that we downloaded that has the demo that was uh the same online but instead of going to this demo folder um go down here to this templates folder and within the templates folder uh you have uh four different templates here to get you started if we click on full map template uh then we can see we have a navigation bar up here at the top uh we have a way to switch through base maps and we have uh two links here that um are just dead links right now but uh just uh to get you started um let's go back and look at some of the others we have a Geo search template here which is almost exactly the same as the full map template it's instead but instead of having a base Maps drop down it has a Geo search button here that um yeah you can search for uh certain things in the area and it also has some default uh click functionality here to look at some extra metadata um and we have two more uh the starter template the start starter templates uh very similar to uh the full map template also uh except yeah you'll notice that the map doesn't take up the entire bottom of the screen here it has a map title and a description that you can add in here um which is nice if you're making an online map and you want to you know put in some text to uh describe what your application's about then um this will be how you do it and any of these samples um let me pull this up in Sublime Text if we go down to part 2 and templates and starter template any of these samples you can just open up the code and um and just start going through it and making modifications so uh say instead of project name I wanted this to be um you know awesome map and then um for instead of bootstrap starter template we could do my awesome map template and if we save that and reloaded over here on our local server you can see that the title up here changed awesome map and also our headlines changed here so um these can uh templates uh you can just jump right into and start making some changes quickly there's one last template that they give you here if I go out into the directory and go into this web map template this is just the um example that they have where you you can load in a map from art GS Online um so uh there and like the other examples there's a code that you can dig into here in Sublime Text and um and you can see exactly how they're doing that uh the template that I usually start off with is the full map template so let me go ahead and open this up again and let me go ahead and open over here in Sublime Text and I'll close down this other one okay now if we wanted to use one of these starting templates then we probably want to make a new separate project and then only bring in the code that we're going to use because there's a lot of extra code and we don't want all the templates in our own starting project uh so let's go ahead and walk through that really quickly um if I go over here to finder um within my local web server let's go ahead and make a new folder called um we'll just call this starter map and I'm going to open this up in a new tab okay so if I wanted to use one of these starter templates let me go ahead and open them up over here um we're going to need this Source folder so let's copy and paste this over um what that Source folder is is it has the bootstrap CSS and the bootstrap JavaScript um and let's go down here into the templates folder and so say for example I wanted to use the full map template let's open up the full map template and we can copy over the CSS and the HTML okay and now me close these down and um pulled up in Sublime here but now you'll notice if I um open up a new tab here with this new starter map it does not work and it doesn't work because uh from where we move stuff around we uh change the relative paths for a few of the things so let's go down to our starter map and let's open up the index.html file and now there's a few paths that are now different like for example um it's not in the uh our index file isn't in the templates folder anymore so we don't need to go up a few directories here um uh for this CSS stylesheet we can just um that's just going to be in source and CSS okay and let's see if there's another one here okay so here's another relative pth path that is no longer up a few directories anymore um so if we save that and then reload our map over here let's see if that works okay so now we have the map pulling up let's test the functionality and make sure that we can change these base Maps Okay so that's working well um now the only thing left to do if I was to start um with this template then like we did in our first tutorial um we want to separate out our main CS s and our main JavaScript into external files but um this tutorial is going on kind of long so I'm not going to walk through that I uh showed you how to do that in part one so if you want to know how to uh move your uh move this Javascript file and this starting CSS file here into an external CSS and JavaScript um uh files then uh you can just watch part one and check that out um so hopefully all this was clear if you guys have any questions uh don't hesitate to ask and um hopefully this was useful for you guys and thanks for watching