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.