00:01My name is Wes Jones. This is Mamata Akella and we work in the Mapping Center team, and this is Designing Multiscale Maps for the Web.
00:08Just to let you know that we've got all these slides and the bottom notes will be posted on the Mapping Center website shortly after the UC...
00:16...so if you don't want to take notes you don't have to; if you do obviously you can, but they will be posted there.
00:21So this is about designing multiscale maps for the web.
00:25What I'm going to do first is I'm going to show you 5 different maps and we'll look at each of them for about 2 or 3 seconds.
00:30I want you to look at these maps and think to yourself, well, what do these maps have in common?
00:35So we're going to start here with a geology map; like I said, about 2 or 3 seconds on each one.
00:42Next we have a hydro map, and here's a fan map that we made during the Super Bowl.
00:53This is a soils map, and the last one up is a census map.
01:02Now here they are all together.
01:03Now what do these maps have in common?
01:05Well, technically they have a few commonalities, they're all made in ArcGIS.
01:10They're all multiscaled, they're all cached, they're all made up of a variety of services.
01:14So technically they have these similarities.
01:16But sometimes the design is a little bit more abstract, and we want to look at that a little bit more.
01:21So what do these have in common from a design perspective?
01:24So when we were looking is we thought they had four important design variables in common.
01:29They all used an appropriate basemap, all these maps.
01:32They all showed content at the appropriate scale, 'cause remember these are multiscale maps.
01:35They all use suitable symbology and each one of them was its own compelling web map experience.
01:41It was all unique, but they're all part of a compelling web map experience.
01:46So what we're going to do is we're going to look at the census map, that last map as our example, just to sort of look at those four ideas.
01:53Give you a little background what's going on in the census map.
01:56It's made up of three services, at the bottom is this terrain service, so it's not showing up too well...
02:02...in the middle is a demographic layer that you swap in or out, in and out.
02:06So that would have population or if you want to show housing or income, you'd swap that demographic layer in...
02:11...and that's really the heart of this census map.
02:13And on the top you have a reference overlay...
02:16...and the reference overlay, it sort of provides the context for the map...
02:20...and in a lot of ways it drives the map.
02:22So even though the demographics is the heart of it, the reference layer sort of drives the map product.
02:27Now, for my portion I'm going to be looking at choosing the appropriate basemap, by looking at this reference overlay.
02:33Showing content at the right scale with the reference overlay, and again, choosing the right symbology with this reference overlay.
02:39So we're going to go into ArcMap now, just to take a quick look at that reference overlay.
02:48So in ArcMap here you can sort of see the reference overlay, it's at 36 million right now, and all of the information is grouped by scale.
02:58And first thing first is, well, we have to add a basemap for this.
03:02Now with this reference overlay it had all the line and text...
03:05...so we wanted to add a basemap that didn't have text information on it, and I'm going to show how you can go about adding a basemap.
03:11If you go to the Add button, the drop-down arrow, you can select Add Basemap.
03:16This is going to bring up 12 different basemap options that we have at Esri that you can add into your map.
03:25Some of them are like the street map, there's three different terrain type ones, there is the topo map and there's some imagery...
03:33...there's some Bing...I'll just close that. Anyway, I brought in, what I wanted to show you was with the street map...
03:42...why you don't want a street map for this example, because a street map has a lot of color and text on already.
03:47So if I turn on the street map here, you can see that the reference overlay completely disappears within it.
03:52It's just not the appropriate basemap for this product; it's about matching those two.
03:58What I wanted to choose was the terrain basemap; and I went to the same area of ArcGIS Online and added in the terrain.
04:04And I'll just bring that into the map and you can see that this provides a nice context for that reference overlay...
04:09...but still allows the reference overlay to come through nicely.
04:13The next thing I want to do before I talk about symbology and content at the right scale is, you want to design this reference overlay...
04:20...with all the appropriate information in it.
04:22So you can go to this drop-down arrow, and you can add some demographic layer that Esri's provided.
04:28You can add data from ArcGIS Online. We'll see if this one comes up this time, okay.
04:32We can do here if you type in Esri plus demographics, it will populate...there's 20 plus demographic services that Esri's provided...
04:42...like US median household income, population density, and so on.
04:48We're going to use housing ownership; I've added that into the map already, just to show you what it looks like.
04:55Right now it's a little too strong, so I want to design this reference overlay, what it looks like in the product.
05:01So I changed the transparency to about 60 percent, and that's what it basically looked like when I wanted to make this a web map.
05:09Now we're going to the scales a little bit, showing...talking about showing content at the right scale.
05:14Right now we're at 36 million, on the reference overlay there really is not much going on, just a little bit of state information and state text.
05:22Now if I go to the next scale, 18 million, what you're going to notice when this draws is that the demographic layers have updated ...
05:29...so that's one thing to be aware of, but in the reference overlay really not much has been added, there's just...
05:34...It's hard to see, but there's...I'll turn off this for a second.
05:37There are some of the metropolitan statistical areas have been drawn in.
05:42Now, if this were a street map at this scale, I would definitely be showing streets, but it's a census map...
05:46...so census boundaries are much more important to show at this scale.
05:50Streets are still important, but I don't show them in this map until actually 577,000.
05:55So it's just to press home that point that you really have to show the content that you want to show really at the right scale.
06:02Now as we go into the next scale, so I'm going to 9 million, and just to show you that, 'cause it's a multiscale map...
06:09...you don't have to introduce everything right away, you can slowly introduce features...
06:12...and if you look at this, really not much has changed in this map.
06:15And even if we go down to 4 million, again not much has changed.
06:20I'll turn on the demographics below, and you can see that the map's just slowly introducing data.
06:26And that's okay. I think simplicity is sort of the key when you're working with a multiscale map.
06:32If you add too much information at once, it really sort of overwhelms the map.
06:39The next thing that kind of ties into that. So that's sort of, when to introduce data.
06:42The how to introduce data is the symbology.
06:45Now with this reference overlay, I only wanted to use line work and text.
06:49I didn't want to use polygon fills, and the reason was 'cause I wanted to see that demographic layer below.
06:54So I decided to use line work for everything.
06:57I could use a polygon of transparencies, but then you wouldn't have been able to see the demographic layers below, it would've covered them up.
07:05And so that's the line work, but the symbology, the text is just as important.
07:09So we go on one more scale, go down to 2 million, what you'll notice here, when it draws, is that...
07:16...I'll just turn...the counties come in here.
07:20Now originally when I designed this I had the word like Fremont County, or I had Hot Springs County, I had that word county come in...
07:28...and when it did in a lot of areas it really cluttered up the map.
07:31It made the reference overlay sort of distracting from the demographic layers below.
07:35So the symbology of the text is just as important as the symbology, as the line work, as anything else.
07:42That's about all I'm going to show you for the scales with this. When I was happy with this...
07:46...and I got to a point where I was happy with this, I cached it, and I served it and I put it onto a group.
07:52And Mamata's going to take over and talk about how to make that into that compelling online experience.
07:58So I'm going to pass this over to Mamata.
08:12Sorry, it's like a race for time up here.
08:17So to make the, now that Wes has shown you how to choose the appropriate basemap, and how to pick the appropriate symbology...
08:25...I'm going to show you how to make a web map, an easy, compelling web map.
08:30So the first thing, we're going to do this in ArcGIS.com, and I'm going to click on the Map option...
08:40...and what this does is it brings up the My Map capabilities in ArcGIS.com.
08:47And so like Wes said, the first thing that he did was he added the terrain service as his basemap...
08:53...so you can see the viewer defaults to the World Topographic map, but if I click on the Basemap button here I can just select Terrain.
09:04And also as Wes mentioned, he published his census reference overlay and put it in a group on ArcGIS Online...
09:12...and he's invited me to that group, so the next thing I want to do is add that.
09:17So if I click on this Add Content to Map button, and search for layers...
09:23...I'm going to search in my group, so you can see down here that all of my groups are listed, and Wes's group is the Census 2010 TIGER Group...
09:35...and then if you click Go, you'll get all of the items in that group.
09:40And so what I'm going to do here is click Add to Map, and I will have Wes's census reference overlay. Okay.
09:52And then the next thing that we're going to do is add that same demographic layer...
09:57...so to do, that this time I'm going to search on ArcGIS Online, and it's called
10:08USA Owner Occupied. I'm just going to type that in here.
10:15So here you can see I have the layer, it's by Esri so I'm pretty sure it's the same one he was using.
10:22So again, we'll click Add to Map.
10:24Now you can see we've kind of defeated the purpose of the reference overlay because this thematic layer has drawn on top of everything.
10:32So I'm going to just go to...back to the table of contents, by clicking on Done Adding Layers...
10:40...and I'll put the reference overlay above the USA Owner Occupied Housing.
10:49And another thing I'm going to do is add the same amount of transparency to this demographic service that Wes did in ArcMap.
10:57So here I'll just slide this down to about 60 percent...
11:04...and okay, so now we have all of the services that we need to create the web map.
11:10So we decided that we were going to make a map of rent versus owner-occupied housing in the state of Missouri by county.
11:22So at this point, I've zoomed in to the map a little bit, so now I'm actually looking at the thematic information at the county level.
11:30One thing about the demographic layers from Esri is that they all come with preconfigured pop-ups...
11:37...so if I click on any one of these counties, you know, I get this pop-up with some information and also a pie chart.
11:46But, if this was your own demographic layer or if you wanted to configure a different pop-up, I'm just going to show you how to do that.
11:54So first of all, let's expand this map service, the Demographic map service, and like I said, we want to make a web map at the county level.
12:06So right here I hover over the county group layer, I'm just going to remove those pop-ups that are already in there.
12:14So click Remove Pop-up, and now...so say I want to configure my own. I'll click on there again, and click on Configure Pop-up.
12:24Okay, and once I do that I get this interface over here...
12:29...so the first thing is the title of the pop-up and right now it's set to counties-colon and the name...
12:38...but I want it to actually say name of the county, and I also want the state abbreviation.
12:47So I click on this little plus button here, I add the state abbreviation attribute and I'm just going to put a comma in there.
12:58Okay, so the next thing is what do I want to display in my pop-up?
13:03Well, there's a list of options here so you can have...I know it's hard to read up there...
13:09...so a list of field attributes, description from one field, a custom attribute display, or no attribute information.
13:18So we're going to choose a list of field attributes, and then click on Configure Attributes.
13:25And here I get all of the attributes that are available in this service.
13:29So I don't want ID; we already put the name of the county in our pop-up as well as the state abbreviation...
13:39...and really the information that I want is the number of renter-occupied housing units...
13:46...and the number of owner-occupied housing units, and I want to show the total population.
13:52So I selected those three and click OK, and now you can see that I actually have the total population.
13:59This is actually the order that the variables are going to show up in the pop-up.
14:05So I'm just going to highlight Total Population, I want that at the bottom, and that's that.
14:13Okay, and then next you saw that that one had a pie chart, so let's see how we do that.
14:19The next item here is pop-up media, and if you click on Add, you have the option to add an image...
14:25...a pie chart, a bar chart, a column chart, or a line chart, and we're just going to go ahead and try and kind of mimic the one that we saw earlier.
14:34So I'm going to select Pie Chart, and I'm not going to give my...or I'm going to give my pie chart a title which is Rent vs. Own...
14:47...and if I wanted to add a caption I could do that.
14:50In the Esri example, you'll see they say to hover over the pie chart if you want to see the actual values...
14:57...so you can do something like that.
15:00And the two variables I want to show in my pie chart are owner-occupied housing units versus renter-occupied housing units...
15:09...and I don't have to normalize this, so we'll just click OK. And I'm going to save my pop-up, so click Save Pop-up...
15:18...and now when I click on a county again, you can see that we have the name of the county...
15:24...the state and all of that information that we asked for, and here's our pie chart.
15:30Okay, so now we've done all this, how do we share this with people and make a compelling web map?
15:37Well, the first thing you have to do is save your map, and in order to save your map, you have to be logged in to ArcGIS Online.
15:45So I'm already logged in, and I'm just going to click the Save button up here and Save As...
15:52...and I'm going to give this a title of Rent vs. Own in Missouri and the tags.
16:05You want to put some tags in; if you're sharing this with the public you want them to be able to find this cool map that you made.
16:11So I'm just going to put rent, own, demographics and Missouri.
16:20And I'm just going to copy the same title into my summary, or actually I'm going to type something in...
16:29...a map of renter versus owner-occupied housing in the state of Missouri.
16:46Okay, and it's going to save it into my folder, I can save it. Yeah, it just saves it into your content on ArcGIS Online.
16:56So I'll click on Save Map, and now that I've shared it I have a lot more capabilities, so ...or now that I've saved it.
17:04So I'm going to click on Share here, and you can see automatically I have a couple of options.
17:11I can post this link to my Facebook, I can Tweet it, I can also copy and paste the URL here and send that to my friends via e-mail.
17:21And if I click on the option to Share with Everyone, I actually get more options.
17:27So I can click on Embed in Website and I get the code that I can copy and paste onto my website, and this map will show up.
17:36And I can also make a web map application.
17:41And basically what Esri has done is they've created a gallery of sample web map applications that you can just use right out of the box.
17:51So we're going to choose a simple one, Chrome header and footer, and if I just click on it...
17:59...you can see that now we have that same map that we made with our title and our summary.
18:05And also I can, again, click on any of the counties, and that pop-up that we made is still there.
18:13So you have a couple of options here. You can just share this URL here with people and then this web map is hosted on ArcGIS Online...
18:23...it's a unique identifier; this number here is a unique identifier for this web map.
18:30Or back here you'll see this option to download.
18:34So if I download this template, I'll get a ZIP file with all of the contents that make up this web map.
18:42And I can modify the look of it, I can change some colors...
18:46...and you can also host it on your own company's web server as opposed to hosting it on ArcGIS Online.
18:57Okay, so that's what we have for you today, and here's our contact information.
19:08Please visit our website mappingcenter.esri.com.
19:12And if possible also please fill out the survey about this session online.
Designing Multi-Scale Maps for the Web
Mamata Akella and Wesley Jones demonstrate how to choose a suitable basemap for the web, display featured content at the right scales, and select compelling symbology.
- Recorded: Jul 13th, 2011
- Runtime: 19:22
- Views: 20591
- Published: Sep 7th, 2011
- Night Mode (Off)Automatically dim the web site while the video is playing. A few seconds after you start watching the video and stop moving your mouse, your screen will dim. You can auto save this option if you login.
- HTML5 Video (Off) Play videos using HTML5 Video instead of flash. A modern web browser is required to view videos using HTML5.