AILEEN 15 MINUTES ABSTRACT

Transcription

1 AILEEN 15 MINUTES Welcome to our session on Web map design. My name is Aileen Buckley, and I m here with my colleagues Andrew Skinner, Jim Herries, Kenny Ling and Mamata Akella. We all work on the Mapping Center Team and today we want to share with you some of the lessons we ve learned from compiling Web maps, which is something that we ve all been very involved in over the past year. ABSTRACT This session focuses on the types of cartographic decisions that are governed by the fact that you will be publishing your map to the Web. This starts with how to think about your Web map: will it fit into a map sandwich, will it be shown at multiple scales, will it serve as a basemap for other people to download and mash up onto, and more. We also discuss design decisions that produce in the highest quality cartographic display onscreen, including issues that relate to color, type, symbology, labeling and annotation, and some special cartographic effects. The focus of this session is on the map design rather than the publishing process, but we will have to touch on that t so that t you will know what ttypes of design decisions you will be presented with and how you can best address them. A related topic is how to set up your ArcMap document to facilitate the compilation of the type of Web map you are creating. 1

2 We want to point out that you don t need to take lots of notes because we ll be positing this presentation with the bottom notes for everything we ll say on our Mapping Center Web site. So, in this presentation, you can sit back and focus on the concepts and demos we ll share with you. We ll show these URLs again at the end of this talk. But for now, let s get started. 2

3 In this presentation, we ll start with some background information to explain what we mean by Web maps and how ArcGIS can be used to create them. We ll also talk a little about the design of the applications used to present the maps on the Web. Then we ll show you four examples to illustrate a variety of ways in which the maps you make in ArcGIS can be presented on the Web. 3

4 First what exactly do we mean when we say Web map? We re talking about the presentation of a map and related content in an online environment. So it involves a user viewing a finished map with the right user interface and functionality in terms of queries, and reports, and such, to promote the map s message to a wide audience. Today s users expect a map to offer more when it s online than when it s in print. To explain some of the ways that this can be realized, let s look at an example 4

5 This is Hydro Map Viewer that we created to allow users to explore hydro data. It s designed to show hydrologic observation stations which are indicated by the red and white point symbols. You can pan and zoom the map and you can use the zoom slider to view the map at smaller and larger scales. 5

6 You can click on an observation station to see information about the site. 6

7 Clicking on Query shows you the observation records for the site. 7

8 You can then enter astart date and an end date to view the discharge at that site for the specified time period. 8

9 A graph is displayed at the bottom that shows the discharge over the time period you entered. 9

10 Let s review the anatomy of this Web map. First, there s the map. 10

11 Second, there s the interface that s used to present the map. 11

12 Third, there may also be some elements that you would find on a print map but because we are in a Web environment, some of these may be dynamic, such as a scale bar or locator map that update as you zoom in and out. In addition, other elements may also be present, such as a zoom slider. These types of elements would not be present on a print map. 12

13 Fourth, there could be query elements that allow you to ask for information from the Web map. This could be as simple as hovering over a location or clicking on it, like we did with the observation stations. More complex query items, such as the form we filled in, can also be used. 13

14 And fifth, there may be report elements that return the information that you ask for. 14

15 One way to think about these parts of the Web map is to distinguish what you would compile in ArcGIS from what you would use a Webbased scripting language for. Of course, the map would be compiled in ArcGIS. 15

16 The interface, map elements, query elements and report elements are all created using a scripting language like JavaScript, Flex or Silverlight. You ll hear us use the word web mapping application, or Web map app, to refer to both the script that is created to define the interface and the elements and functions provided through the interface. We may even use term that are further abbreviated to application, or app. 16

17 All of this is what we think of when we talk about a Web map. 17

18 So, how do you make a Web map with ArcGIS? First, you compile the map in ArcMap most of you are probably familiar with this process. 18

19 Then you publish it as a map service using ArcGIS Server. 19

20 And finally you use it on the Web there are various ways you can do this, some of which we ll be showing you in our examples today. 20

21 So let s talk first about compiling your map 21

22 When you compile a map for print, you have to figure out a few things, g, like, What size will it be?, What geographic extent will I show?. Given those, What map scale will that make it?. What map projection will I use?, Will it be in color?, What print resolution can I use?, etc Making Web maps is no different you still have to ask the same questions. However, the answers might be different. Let s take a look at each of these using graphic examples. 22

23 In terms of size, we usually design for a 17 or 19 inch LCD monitor since that is what most people have on their desktops. 23

24 In terms of geographic g extent, Web maps do not have the same restrictions as print maps. Because users can pan and zoom, the map extent can be bigger than what you see on the screen. And if they can zoom, that means the map scale will be variable. 24

25 The question about which map projection to use is answered for you if you want to mash up with other maps. For example, if you want to overlay your map with others on ArcGIS Online or Bing or Google Maps, then the projection you ll use is Web Mercator. 25

26 When you ask, Will it be in color?, remember computers today are capable of displaying millions of colors, so the issue of Web safe colors is moot, and almost every Web map you see will be in color. However, color on the Web is different from print mapping. 26

27 For printed maps, p, the colors and shapes are comprised of pg pigments in the ink. Using the subtractive color system, these colors are perceived by the absorption and reflection of light from their surfaces. 27

28 When you look at a computer screen, you see colors and shapes that are made up of light. Using the additive color system, colors are built up by combining red, green, and blue light in different mixtures and intensities. The color white is produced by mixing red, green and blue at full intensity. 28

29 So one result is that light colors on the Web are overly luminous and too harsh on the eye for extended viewing. In addition, the intensity of the light radiating from a screen when it displays pure white can affect the clarity of fine detail in type, point symbols, line symbols as well as intricate patterns, such as rasters displayed as hillshades and elevation tints. This relates to the last question 29

30 What resolution will it be? Since the map is on screen, the safe resolution to design for is 96 dpi or dots per inch, as all LCDs support this resolution. Newer LCD monitors, which typically have a native pixel density of 120 DPI and 144 DPI. This low resolution, coupled with the color projection, will likely have the greatest impact on the cartographic design of your map. Luckily, there are some tricks you can use, such as anti aliasing, which fools the eye into see a jagged edge as a smooth edge. Because screen displays are pixels, non orthogonal lines and sharp edges appear jagged. These jagged edges are softened by adding pixels of intermediate color between the object and the background. 30

31 But the tricks that are available to you, like anti aliasing, depend on how you publish your map, which is the second step in making Web maps in ArcGIS. So let s talk about that for a minute. 31

32 You ll use ArcGIS Server to publish your map in a format that can be viewed on the Web. When you do, you create a map service. Each layer in the Web map that can be interacted with differently will be a separate service. You can also publish query services that have the information used to return reports. And you can publish geoprocessing services that perform a GP task onthe fly when the user submits a request. 32

33 In terms of map services, there are two different kinds cached and dynamic. Cached map services are pre generated images of your map, and each time a user loads the map or pans and zooms it, tiles of the map for the area being viewed are retrieved from the cache. 33

34 The maps in dynamic services are drawn on the fly that is, the map is redrawn each time a user loads the map or pans and zooms it. 34

35 For cached map services, when you create the cached images of your map, you can choose to use tricks like anti aliasing. You can also support things like background transparency so you can see through the map in places where there are no symbols or text. This is because you choose an output image format, and you can use options PNG32. In addition, you can also set parameters such as compression rates, which will affect the amount of time it takes for the map tiles to be rendered onscreen. This is important, since research shows that users become impatient and may leave the Web site if it takes more than 4 seconds for a map to load. When we ve used complex cartography on our maps, we ll publish our maps as cached map services because displaying our maps is faster this way. 35

36 Drawing time is also a consideration fro dynamic map services. Consider that if the map takes a while to draw for you in ArcMap, it will also take a while to draw dynamically on the Web. So, this isn t a great option for maps that have complex cartography. Although there are still some tricks like anti aliasing and such. However, this is a good option if you have simple map displays especially if the data you are displaying update frequently. 36

37 Why do frequent updates matter when you choose between cached and dynamic services? Because it can take a while to create a cache. But exactly how long it takes is primarily a function of two things: 1. The geographic extent of the map, and 2. The scale at which you are mapping it. Remember, for cached map services, pictures of the map will be created and stored as tiles. In the caching process, you ll choose the tiling scheme you want to use, and this will dictate the size and therefore number of the images. If the tiles are small because you are creating a fairly large scale map or there are many of them because you are mapping a fairly large geographic extent, it could take a while to create the cache, even days. Also, each time the map extent is moved to create the next tile while the map is being cached, the map has to be redrawn before the image can be captured. So complex drawing effects will also affect the caching time. 37

38 As I mentioned, for cached map services, you ll choose a tiling scheme. This tiling scheme you use also dictates the map scale or scales. For example, if you use the tiling scheme for ArcGIS Online, which is also used for Bing Maps and Google Maps, there are 20 different map scales each one related to a different zoom level on the zoom slider. These are the map scales you use when compiling your map in ArcGIS. If you use only one map scale and users zoom in or out, it s like viewing a PDF of the map. On the Web, we want the users to have a different experience they can instead zoom in and out in a seamless viewing experience. You can add more detail at larger map scales, and eliminate some at smaller maps scales. And you can design your map so that the visual flow of the map is smooth from scale to scale as the users move between zoom levels. 38

39 But to do this right, you ll have to make a new map for each zoom scale. You can do this in a single map document, using a Group Layer for each map scale. 39

40 For each group layer,,you set the scale rangeso that it will only display at the zoom level it is designed for. 40

41 You decide which features and labels to add to or eliminate from the group layer for that zoom level. You ll use Definition Queries for the features and SQL queries for the labels, and other ArcMap techniques as well. 41

42 Because you re trying to create a smooth visual flow between zoom level, the features and labels at any one scale should be selected and symbolized relative to those at the next larger and smaller map scales. This multi scale map document set up will also apply to maps you create for dynamic map services because the scale dependencies will also apply there. 42

43 The final point I want to make is that you can combine map services, and you can combine various types of map services. In the remainder of this presentation, you ll see four examples of different combinations. 43

44 The examples will include combinations of what we refer to as basemaps and operational layers. Basemaps provide the geographic context for the map. Because these generally involve more complex cartographic effects, they are often created as cached map service. Operational layers overlay the basemap and relate to specific types of mapped distributions. You ll find that these are sometimes dynamic map services and sometimes they are cached the format used depends on the data and the cartography. 44

45 But in the end, Web maps are still maps and so the overarching requirement is that they be compiled and designed with the purpose and the user in mind. 45

46 Now let s have Kenny talk about the last step in the process in making Web maps with ArcGIS using the map on the Web with a Web map app to support the experience. 46

47 KENNY 7 MINUTES Aileen just gave you an introduction to the idea of web maps and online cartography, and now I m going to add on a little to that by talking about some design considerations for web mapping applications. Traditional print maps are designed to be consumed by the user as is. But with web maps, this doesn t always have to be the case because >NEXT what the user sees in the end can be altered client side. You can actually create web mapping applications that do a whole lot more for the user experience after the map service is published. >NEXT You can take one map service and create an application using that map for many different uses and audiences because you control what they see in the end >NEXT How many of you work with attribute tables that look like this? A good number of you probably do, so you would know that it isn t exactly very fun interpreting long numbers that look like these. Some of those numbers and fields are things that the end user would not be able to make sense of or just simply do not need to see. With an app, we can actually control how this data looks to the user and we need to take advantage of that. Now, of course, this requires some good design, and the first thing you need to do is >NEXT 47

48 know your audience. Some of them want to see all the data, some don t but they generally want to get the right message from the map. We have to remember that with all the fancy capabilities of these applications, it is easy to mislead or lose the attention of the user. Here we have the Louisville Emergency Response Map. This is a map service containing a large demographic dataset on top of the ESRI StreetMap. We figured that if this map is going to be used to find out where the vulnerable populations are, we should pick out the important variables and serve it to the user in a way that makes sense to them. >NEXT In this application, for example, we actually process the selected values within the application and present them in a report that emergency response personnel would see clearly and not have to interpret themselves. >NEXT 48

49 What is key to any application is the interface. The application is really a container for a map and thus the interface has to be designed and treated as an extension of the map. There should be a user interface that is tailored so that it adds to the map s design, and not detract too much from it. For example, this is our World Topographic Map Viewer. >NEXT The interface was designed to match the map s color palette and because it is meant as a reference map, the interface was kept as unobtrusive as possible. Now that we are thinking of the application itself as a map, we are faced with a familiar problem: limited real estate we need to make sure the user sees what he/she needs to see. We can do this by scaling the map and data. >NEXT 49

50 We can control exactly how much the user sees both in the map, and the data on the map. Remember to constrain the available scale levels to only the necessary ones so the user doesn t get lost zoomed too far in or out. >NEXT You will notice that there are only 16 scale levels on this zoom slider it was reduced from 20 to 16 to show only the scales where the map is available. The same is true for the data. This example utilizes the drill down concept in the interface by allowing the user to navigate through the various levels of data. This screenshot shows the county level data when you are zoomed in to this scale, but if you zoom in further 50

51 you get into the tract >NEXT 51

52 and then block group level. >NEXT 52

53 Now, to get back to my earlier point about not giving gthe user something that looks like it came right out of your attribute table in the app, you should always aim to report your data in a focused manner intuitive to the reader. To show temporal patterns for example, it might be more effective to present your data in the form of a chart. This not only helps the user understand the temporal nature of the information better, it can also save viewing space in your app by allowing you to show trends over a long period of time in just one graphic. One very effective and easy way to report your data is by simply presenting values that have been processed. By that, I mean where appropriate, calculate your values into percentages, limit the decimal points, show only the highest or lowest values, and things like that. You need to put these numbers into context so that it always relates to the intended user and purpose. >NEXT 53

54 Now I m going to demonstrate what I mean when I say process your data. This report is part of the Louisville Emergency Response application. >NEXT And here is a subset of how the data looks in the attribute table. >NEXT This 30% here was already in percentage format in the original data, but we rounded it to the nearest integer and coded it to appear in red if it is above a certain threshold. This is good for calling attention to a key statistic when a report contains a lot of information, like in this one. >NEXT This next number is an example of doing some simple calculations in the application to show the value as a percentage of people within that age group among the general population. Particularly in the case of demographics, values in percentage format are often more useful to the user. >NEXT This next example is similar to the first one, except this time, we code the report to show low, normal or high, depending on what the value is. In cases such as this, the exact value doesn t really matter and what the user really wants to know is which range it falls under. Being able to calculate values on the fly is really useful because now you don t have to create new fields in your map document when you do want to display calculated values you can just do it in the application. These kinds of techniques do a good job at reporting information to the people who are interested in the overall big picture as well as the people who are maybe just interested in the one or two key variables. >NEXT 54

55 Just to reiterate, What the user gets from the application should not be limited by the map service there is a whole lot more that can be done client side to enhance the user experience. But What the user gets from the map service should be limited by the application we as the cartographer should narrow down what the user sees to what we want them to see, to meet the purpose of the map. Okay, in the next part of this presentation, we are going to have, Mamata, Andy, Jim, and me talk about some web mapping application concepts that you can use for your maps. 55

56 MAMATA 10 MINUTES 56

57 This is a basic map application for viewing the World Topographic p Map, which is a multi scale topographic basemap that others can mash up their information onto. Before we talk about the application design, I would first like to talk about the design of the map that sits within the viewer. First, this map was designed to be viewed online and/or in a variety of other ArcGIS products such as ArcMap, ArcGlobe, and ArcGIS Explorer. We also intended for this map to be used as a basemap for operational overlays. Given those two map use requirements, let s talk about some of our design considerations. 57

58 To do so, we are going gto take a tour of the World Topographic p Map using ArcGIS Explorer. From now on, for the sake of simplicity, I will refer to this map as the world topo map! Like I mentioned before, the world topo map is meant to serve as a basemap. Because it is a basemap we purposefully designed all of the information to be on the same visual plane. You will notice things like 58

59 no black text, instead, we used dark grays, 59

60 subdued colors for features and labels, and 60

61 a light colored hillshade. All of this was done so the user can utilize the darker and brighter colors to overlay their own operational information onto the map. 61

62 The information represented on the map was carefully selected. Because this is a basemap, we designed the map to provide only the basic geographic information such as: hydrography, place names, transportation, and other cultural information. 62

63 Because this is a topographic p basemap we also included topographic p features including: contours, a hillshade, elevation points, and physiographic feature names. 63

64 For text on the map, we adopted a methodology similar to the USGS. We are using serif fonts for hydrography features as well as place names while we are using a san serif font for all other features. 64

65 Because this is an online, multi scale map, there were additional considerations during the map compilation and design processes. You will notice as I zoom into the map that more and more information is presented. As Aileen mentioned, this means that we had to create a new map at each zoom level which corresponds to a specific map scale. For this world topo map, we designed 13 different maps for the world and for the U.S. and Canada 16 different maps for even larger scales. For some cities in the U.S., we created an additional 4 maps for the largest scales in the ArcGIS Online/Google/Bing maps tiling scheme which are approximately: 1:9K, 1:4.5K, 1:2K, and 1:1K. The map was also designed to be cached for two primary reasons: speed of display and cartographic quality. Because the map is cached, we were able to utilize all of the cartographic capabilities in the software. We were not limited in what we could do. For those of you who are familiar with caching, we cached the map with an image format of.jpeg and a compression quality of 90. We also turned antialiasing on which, as Aileen mentioned, smoothes lines and label edges. By caching the map, it is served to the end user much faster because map doesn t have to be rendered on the fly. For this type of online, multi scale basemap, caching is also an industry standard. 65

66 Ok, now that we have gone over some of the map compilation and design considerations, let s take a closer look at the world topographic map viewer. Let s start by taking a look at the interface design. As you will notice, the interface on the World Topographic Map viewer uses little screen real estate. The emphasis is on the map. As Kenny previously mentioned, the application is an extension of the map. The interface was designed to match the theme of the map. It was also designed to be unobtrusive. The functionality embedded in the application are: 66

67 There is also a Search capability, which is a place or address locator. 67

68 As you notice, when I am taken to my search area, a red point with the label draws on the map indicating the location. 68

69 Another tool is the Topo Characteristics tool. You can activate it by clicking on the topo characteristics text in the bottom right hand corner to learn more about the topography of an area. You can click on any location on the map and a pop up shows with the aspect, slope and elevation of where you clicked. 69

70 There is also the Topo Citations tool. You activate this tool the same way, by clicking on its text. You can click on the map and find out at that scale, and at that location, what data sources we used to compile the map. You can also link to the metadata of a particular feature class, and if the data are available for download, you can click on the download data link. You will also notice that the graphic design of the pop ups match the bottom application title and tool area. Kenny also applied transparency to the pop up so the underlying information is still visible. This specific example that I have shown you uses the world topo map within a web map application to locate places, to enable the end user to easily zoom to a desired location, learn more about the topographic characteristics of a place, as well as a citation tool that credits all agencies who contributed data to this map. 70

71 If you are interested in using this application, you can access it on ArcGIS.com by typing topographic into the search dialogue. Show demo finding the topographic map viewer on ArcGIS.com As you ll notice on this map, the San Diego Convention Center doesn t really have any information. I am going to now pass it over to Andy Skinner so he can explain to you how he and some of our other team members used this topographic basemap to make a special purpose Esri User Conference Room and Route finder. Thank you! 71

72 ANDREW 10 MINUTES 72

73 Mamata showed you the World Topo Map, and I m going gto use the User Conference map viewer that some of you may have seen already to demonstrate how we can work with the interiors of buildings. I ll look at the way in which we ve used multiple map services to create the final product, and then at how we designed the maps to support these services. 73

74 The Viewer contains 6 map services, 1 geoprocessing g service, and a web application with a number of functions The first map service is the basemap that s the World Topo Map and it provides a good context for orienting the building to the immediate area. We ve used transparency to fade it back a bit so that the focus is on the subject area, which is the Conference buildings 74

75 and now for the operational layers of the map. The second layer emphasizes the hotels that are participating in the User Conference That is the ones you re all staying at, rather than the Hilton and the Marriott, which are hosting Conference events. It s a cached layer, and we re not doing anything with it other than using it to make these hotels stand out from the base. 75

76 We ve then got four separate cached map services showing the different levels of the Conference buildings. Demonstration Level 1, which includes the exhibit area in the Convention Center, Level 2, includes the Mezzanine, just behind us here, Level 3, which is where we are now, and Level 4 which includes hotel space only. 76

77 We also have a separate cached map service for the building labels that s the one feature not on the base map that doesn t change by floor. Move between floors So if I move between floors you ll see that they stay the same. Aileen talked about how it can be useful to use a dynamic map service in a situation like this. We haven t done that here. With so much detail added outside the building footprint, we decided to fix the position of these labels so we ve done that with a cached map service, and added duplicates labels where we felt they were needed. Zoom in to show labels and if I zoom in, you should see that we duplicate the Convention Center label to suit the larger scale 77

78 We now come to the dynamic aspects of the map, and first we ll look at a web application the room finder. This has been built using Flex. Demonstration I ll place myself on the Sapphire level of the Hilton Hotel click Find Room and the map resets itself to that location at the appropriate scale and drops a push pin on to the location. I ll now move to the routing application, which gets you between rooms in the Conference. Demonstration I ll leave my starting point as the Sapphire Foyer I ll set my destination as Room 10 where we are now and click Find Route. 78

79 and I now have a Route Navigator box that will move me progressively from map to map and scale to scale as I follow the route. Follow route Let me move the box to the side first. It s also given me a readout of distance and approximate time, which as you ll have realized by now is critical in planning your week here. This is the one provided by a geoprocessing service, and it s based on a network of lines that we digitized using the Network Analyst extension. They re not visible on the map but there are connections to every room used for the conference, and it includes floor transitions. I won t go in to a lot of detail on that right now. There s another session you can go to which will talk about this more. It s called Network Analyst Automating Workflows with Geoprocessing. 79

80 Clear route application Other web apps built in include: An interactive locator map, here in the bottom left corner, linked to the view on the main map. Pan map And it s got a reset function if you re tempted to wander away from the Conference area. Pan map, then reset 80

81 An expandable legend, which I ll leave open. Expand legend 81

82 The toggle between floor levels I ve already used Demonstrate, but end on Floor 3 82

83 A standard zoom slider, which you ve also seen already. Demonstrate 83

84 And a dynamic scale bar in the bottom left. We also added a hyperlink below the scale bar to allow you to send us s about this map. And of course we expect that you ll be kind! 84

85 So to review, the Map Viewer consists of: the basemap, which is the World Topographic Map, and a number of operational layers, consisting of: six cached map services, one geoprocessing service, and a web application with a number of functions. 85

86 and that takes me to the design decisions we made in compiling the map itself. Reset This is a multi scale map based on the World Topo Map, and as Mamata showed you, this operates at many scale levels. But you ll see that we ve limited the number of scale options to the three largest. Use Slider, then reset to these scales: 1:4000, 1:2000, 1:1000 We re concentrating on floor plans here, and it makes no sense to allow users to zoom out so far that they can t see the floor detail. Conversely, there s no point in zooming in so far that you can t see outside the room. Fortunately, the largest World Topo Map scale also happens to be the largest scale we want to show for our map. 86

87 OK, let s move out to the smallest scale again. Reset As I zoom in again, you should see that the map content is changing. Both Aileen and Mamata have talked about this, but it bears repeating. If you have multiple scales available it makes sense to use them to gradually increase the amount of information and get the most out of the map, but this does mean that you re creating a separate map for each scale. So for this viewer, we have three scale levels and four floor levels. So that gives us a total of twelve maps, built into four ArcMap documents and separated using scale ranges. 87

88 Reset and toggle to Floor 3 Let me take you up through the scales, and we ll look at the changes in more detail. I m using floor level 3, which has examples of most of the symbols we ve used, and I ll keep the legend expanded so that you can interpret them. Zoom to 1:4000 At 1:4000, we ve left the map empty of any labels or icons except for the building names. All we re doing here is setting the context for the User Conference Site. 88

89 Zoom to 1:2000 At 1:2000, we ve added room names and numbers, as well as some intuitive icons to pick out facilities such as elevators and restrooms. This is a useful cartographic trick because they can cut down dramatically on the amount of labeling you need to add. At a scale like this we don t want to be adding labels for every elevator, escalator or restroom. 89

90 Zoom to 1:1000 At 1:1000, we now have the room to add some event details. But we want the map to flow from one scale to the next, so even though we ve got extra space for labeling, we ll stay with the icons we ve already built. When you are designing a multi scale map, you should always consider the scales above and below the one you are working on when you make your symbol choices. 90

91 So let s recap what we have ended up with is a multi scale web application with a simple base map that can be used for quick orientation, but with four different levels, and more sophisticated room finding and routing functions if they are needed. It s built from a number of map services, a geoprocessing service, and a number of Web apps all all working together to provide what s hopefully an intuitive map to get you to where you need to be. With that, I ll hand you back to Kenny, and he ll take you through another example of how effective operational layers can be. 91

92 KENNY 10 MINUTES 92

93 Now that we ve seen Mamata s single layer map application and Andy s Convention Center application, I d like to talk about the DC Metro mashup application concept, along with some design tips. 93

94 I m going gto start by showing you the Washington DC Metro Map application and talking a little bit about how it works. This application consists of the Washington DC topographic map that was contributed by the DC GIS folks as part of the Community Base map program, and an operational layer with the Metro lines and stations on top 94

95 This map is multi scale, so if I zoom in, 95

96 it shows you the exact locations of the Metro entrances or exits. 96

97 Notice that there are only four scale levels available on the zoom slider, though that is because the overlay and base maps were designed for only these scales. Also, to make the operational layer stand out more, the base map layer has been given a slight transparency of 25%. 97

98 Now if you click on the metro station, the app pulls real time information from the DC Metro website and displays it in the frame at the bottom right. This is just a really simple, straightforward example that I think illustrates this mashup concept well. >NEXT 98

99 Now I ll talk a bit about the design considerations that went into this application. >NEXT The base map layer was essentially designed just like the single layer map application concept that Mamata described earlier. The only difference is we won t be pulling data from the base map this time since it has a separate operational layer for that. >NEXT This application uses a dynamic map service for the operational metro layer instead of a cached one. It works better as a dynamic service because it has simple point and line features that draw quickly, there is only a low level of detail, and because it does not need to be cached, it can be easily and frequently updated, as in the case of the symbology of a line needing to be changed if it is temporarily closed for repairs. >NEXT This application uses the standard Metro line and station colors that are bright and stand out from the base map colors. For example, the Metro station labels use a black font color with a white halo so that it can be easily distinguished from the base map labels. >NEXT The operational layer was designed to be multi scale so that you can zoom in and see more detail. >NEXT As you saw earlier, the application allows you to see live information from the DC Metro website. The point features in the service contains URLs to the train information for the specific stations. So when a user clicks on one, the application fetches and opens the URL in that frame. There is very little coding involved, but you get the most current information from an authoritative source >NEXT 99

100 Now, I m going to talk a little bit about the concept of the map mashup itself >NEXT This concept is best employed for: Applications with a specific purpose because of how easy it is to be customized. It is the most focused among the various concepts discussed today. You can design it for specific base maps or operational layers. You can have multiple layers and toggle between them. It is also good for maps with data that changes often since the operational layer is an independent map service and can be updated easily. Lastly, this method is great for map applications that comprise of multiple map services. The Esri User Conference routing map that some of you used to get here for example, is made up of seven different map services. >NEXT What you would need to construct a map mashup is: A base map At least one operational layer that contains your data An interface to allow for interaction with the map >NEXT Finally, just a couple things you should keep in mind when designing this type of application: You should try to limit your scale levels to only the relevant extents and scales. And you should design your operational layer so it meshes well with the base map (and vice versa). For example, an operational layer will probably interfere with a high detailed base map. The base map and operational layer needs to be designed with just the right amount of detail and content. O j tt ki d i h hi h Ji H i ill tlk b t 100

101 JIM 15 MINUTES 101

102 102

103 103

104 104

105 105

106 106

107 107

108 108

109 109

110 110

111 111

112 112

113 113

114 114

115 115

116 116

117 117

118 118

119 So just to review in this presentation, we started with some background information to explain what we mean by Web maps and how ArcGIS can be used to create them. We also talked a little about the design of the applications used to present the maps on the Web. Then we showed you four examples to illustrate a variety of ways in which the maps you make in ArcGIS can be presented on the Web. Which brings us to the end of the content we wanted to share with you. 119

120 As we mentioned in the beginning, g, this presentation with all the bottom notes will be posted on the Mapping Center web site on the Other Resources tab. Look for it there in a couple of weeks. 120

121 We encourage you to fill out your surveys to let us know if you found this presentation helpful, and what we might be able to do better in the future to help you. We thank you very much for your time and attention, and now, we re happy to take any questions you may have. 121