Configuring the Public Maps Gallery Template

Matt Driscoll shows how to create a customizable gallery of web maps using ArcGIS Online.

Aug 30th, 2011

Embed
Download
Transcript
480x270
960x540
Custom
Width:
Height:
Start From:
Player Color:

Right-click on these links to download and save this video.

Transcript

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.

Copyright 2014 Esri
Auto Scroll (on)Enable or disable the automatic scrolling of the transcript text when the video is playing. You can save this option if you login

Comments

Hi burns, If you download the code, there is a readme.html inside showing how to configure the app since it has changed since this video was made. You could also use Arcgis.com to share a group and have it hosted there and configured online.

MattDriscoll

Dec 4th, 2013. 1:30:41 PM

Thanks Matt, the file structure seems to have changed with the most current zip file. I don't have a config.js file within a 'scripts' folder. Please advise. Thanks!

burns

Dec 4th, 2013. 11:53:45 AM

The most current is linked in the video description above.

You can get the ID of the group with this tool: http://developers.arcgis.com/en/javascript/samples/portal_getgroupamd/

MattDriscoll

Dec 4th, 2013. 9:07:43 AM

Is this still the most current template?
If so where is the tool to locate the group ID?
Thanks!

burns

Dec 4th, 2013. 7:03:58 AM

You can download the latest template here: http://www.arcgis.com/home/item.html?id=34505d89a3b34be09b65b98938974390

MattDriscoll

Sep 10th, 2013. 1:32:27 PM

where is the download link...

steve794

Sep 10th, 2013. 12:45:49 PM

like this

ajaychauhan

Feb 9th, 2012. 3:39:33 AM

Comment on this Video