00:09Hi. My name's Matt Driscoll and I'm a web developer at Esri.

00:13I'm going to show you how you can create a customizable gallery of web maps…

00:17…just like you see here, using this template and ArcGIS Online.

00:23So I have this group of web maps that I've created on ArcGIS Online and I would like to showcase all of these maps.

00:32But I don't want to just send people a link to this group.

00:35I want to showcase these maps in my own personal website. And that's exactly what this template does.

00:43So, first I'm going to show you how you can take this template and showcase your own ArcGIS Online group…

00:49…and then I'm going to explain a little bit about the code structure and how you can customize it.

00:57So the first thing you're going to need to do is download the template.

01:00Now there'll be a link on the same page as this video where you can download it…

01:06…but you could also do a search for Public Maps Gallery Template…

01:09…and you should be able to find it on arcgis.com.

01:13So if you go up to this item and you go down to the bottom…

01:17…there's a download link right there, and that will download the ZIP file for you.

01:23Once you have that, you can extract it, open up this folder, and inside this folder…

01:30…if you go into the Scripts folder, there's a file called config.gis.

01:36Now the only thing we need to change in this file is the ID of our group, but first we need to know that ID.

01:43So within the template I've created this tool called the Group ID Finder.

01:48If you go to this, you can paste in the URL of your group and it will give you the ID.

01:54So if we go back to our group here, copy this URL, go back to the ID finder…

02:06…paste that in, hit Submit, and it returns our ID.

02:12So we'll need to copy this, go back to the file structure, open this config.gis, and you can use any text editor.

02:24And where you see map…Maps Group ID, just replace this ID with the ID of your group.

02:34Save it and close it out, and then if you go back to the home page of your template, it's now using your group ID.

02:44So these are all the California maps that I've added.

02:48And that's all you need to do to get this template to work with your own group.

02:56So now I'm going to show you how we can change this logo to say whatever we want it to say.

03:03So if we go back into the file structure, we go into this Resources folder.

03:09I have this Photoshop document that allows you to easily change what that logo says.

03:16So we're going to open that, turn on these background images so that we can see what we're typing.

03:26Then I'm just going to edit this to say California Maps.

03:35And I'm going to want to do the same thing right here.

03:37This is the hover image, so when you hover over the logo, this is what shows up.

03:48Then we're going to turn these off. Actually, we're going to crop it first, make sure it's the right size.

03:58So now the logo doesn't need to be as big. Then we'll turn these off.

04:08We're going to save this as a .png, and it should be named home.png. Go ahead and save that…

04:15…should save it inside the Graphics folder inside the file structure, and go ahead and replace home.png.

04:28So now if we go back and reload a page, it now says California Maps.

04:34But it's a little bit big, so what we're going to do is get the size of this image. We cropped it and it's now 271 pixels wide.

04:46Let's go into our styles, open up global.css, and if you do a search for home…

04:58…find home item, you'll see that the width was 390. We need to change it to 271.

05:14Go ahead and save that, reload the page, and now it's the right size. So that's how you can change the logo image.

05:28Now you might also want to change this green background…

05:31…and you can easily do that or replace them with your image of choice.

05:37So if we go back into the file structure and go into graphics, we have actually two background images.

05:45We're going to open those both in Photoshop. There's the first one and here is the second one.

05:57So this is the main one, and this one adds any extra size that it needs to be so that if you stretch this wide…

06:04…it starts repeating this image instead of this one. So what I'll do is I'll just change the color of each of them.

06:14I'm just going to change it from a green, make it maybe a blue. So I'll just change it to plus 60 on each.

06:37Now it's a nice cool blue. Save that, save that one, reload the page, now I've got a cool blue theme.

06:52So that's an easy way you can change this background image in the banner to be custom to whatever you need it to be.

06:59Now you also probably want to change these other colors, get rid of the green to be…

07:04…you know, to match this banner as well, and you can do that pretty easily going back into the styles…

07:12…opening up global.css, and you just look for the colors that you need to change…

07:24…and adjust them like…you can look for this green color. I see that it's…this color right here.

07:37I'll just do a search for that. There's one of them, and I can replace it.

07:43Let's say I want to just make them all black. It's now replaced all those green colors with black.

08:03Go ahead and reload this, now I see that the green has become the black color.

08:10So those are pretty easy ways to change this template, customize it to match the look and feel of your site.

08:19Now we'll just dig into the code and the code structure a little bit…

08:21…so if you really want to customize this template, you can pretty easily.

08:26So if we go back to the file structure, start from the main folder, inside the graphics…

08:33…you probably won't want to change the carousel images, but if you do, they're right here.

08:40These are just simple buttons. You probably won't want to change any of those.

08:45Pagination. They're just arrows, easy to replace them.

08:50Geolocate buttons. Those are pretty self-explanatory.

08:55This Apple Touch icon, you probably want to replace with whatever your site design is…

09:00…so if someone goes to your site on an iPhone, for example, and they add it to their home screen…

09:07…this button will show up. So you want to replace that.

09:11This button is pretty similar. It's for Facebook. So if someone likes your page, it'll show this image on their feed.

09:21So as far as the resources, the only thing there, we already looked at the home Photoshop document.

09:26Styles. They're pretty separated; these were in the carousel. I think there's just a couple.

09:33Global's going to have most of this stuff that's site-wide, so you'll probably just want to change a global…

09:38…maybe a couple of things in this jQuery UI, but if you need to change, you know, like the map pop-up, that's there too.

09:48So the scripts are the main things I want to get into. The HTML's pretty straightforward.

09:54So the scripts…the main plug-in is this Query ArcGIS. Now this is the plug-in that gets the data with your group ID.

10:05So these are all the settings that you can customize that allows you to get your group in formatted.

10:14So what this function does is, it queries out to arcgis.com, sends your group ID, and gets all the items back from that group.

10:24And this is the pagination function if you wanted to customize that.

10:29This is just a simple truncate function that will basically cut the text.

10:34I use it for, for example, this Southern California surf is…the title's longer than this image size, so we're just truncating that.

10:46And then this URL lookup gets the parameter from the ID, so if I went to this map…

10:53…what this function does is grab this web map parameter and set the map…sets all these functions doing.

11:02But this is the main one because it goes and gets the information from arcgis.com.

11:08Now, the config, that does…those are all the settings that you want to customize if you just want to do simple changes.

11:13The group ID…the group ID for layers, the default web map.

11:19So if someone goes to the web map page without the web map parameter set, this is what map will show.

11:25The URL of your site. This is the URL to the iOS app for ArcGIS, so you probably want to change that.

11:37This active link script, all it does is set the current page that you're on.

11:43So if I go to this page, it just gives it this box. That's all that this function does.

11:55User agent. This one does mobile detection. So it gets your browser's user agent string…

12:02…sees if it's an iPhone, iPod, iPad, or Android or Windows Phone…

12:08…and there's a couple of functions for setting the iOS app link.

12:17And these two functions are for geolocate. So when I click that Geolocate button, it sets to my extent.

12:26Go back into this folder, there's a couple plug-ins. We use jCarousel for the carousel plug-in.

12:33This plug-in is just to help mobile devices with touch, just so they can touch some links better and it'll work.

12:43These scripts right here, they're just getting to do…the group finder you probably won't need to do anything with.

12:49The carousel script, these are pretty simple.

12:53I mean, the home one is the one that you might want to change.

12:57So these are the scripts that calls that function that we looked at, Query ArcGIS group, and it sets the settings right here.

13:07There's the layers one. This formats the map grid. This formats the layers.

13:18And on page load, it calls those functions, and then these are the listeners for the paginate.

13:25So when the Paginate is pushed, these functions get called. And that's pretty much it.

13:37So other than that, I don't think you really need to mess with any of the file structure files…

13:43…but if you do, now you know a little bit about what to do.

13:48So hopefully, that was helpful and you'll be able to take this template and customize it to your needs.

13:54If you have any questions, please go to this item and post a comment.

14:00We'll also have a link to a PDF instruction, so that if you get stuck somewhere…

14:04…it might be a little more detailed to help you get through.

14:07But any questions, please post them in the comments.

14:11Thank you.