Brought to You By: University of Connecticut Center for Land Use Education and Research (CLEAR) University of Rhode Island Coastal Institute USDA

Transcription

1 Mashup Madness: Using Google to Display Geographic Information on the Web February 22, 2010 Land & Sea Grant National Water Conference Hilton Head, SC Brought to You By: University of Connecticut Center for Land Use Education and Research (CLEAR) University of Rhode Island Coastal Institute USDA National Institute of Food and Agriculture

2 Computer Setup In order to successfully complete the exercises in this workshop, you must have all of the following: 1. A Google account If you don t already have one, don t worry. Go to and enter an address - any will do. Choose a password and a couple of other things, then click I accept. Create my account. That's it! (Well, you also have to remember your password.) 2. Google Earth installed on your laptop. Download it at 3. An up-to-date internet browser or two (Mozilla Firefox, Internet Explorer, Google Chrome, Safari) - It is a good idea to have more than one installed on your computer if possible. 4. If you plan to do the Extra Credit exercise pertaining to embedding a map on your website, you may wish to download and install the Google Earth Browser Plugin. This Plugin allows Google Earth to run within an internet browser window rather than as a desktop application. You can download the plugin here: All exercises are Mac and PC friendly!

3 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Mashups Made Easy: Google Maps My Maps Requirements You must have a Google Account (see Preparation instructions below) and the internet for this activity. You will find Google Earth useful as well. For advanced users, the ability to both access and edit the underlying HTML code of your webpages will allow you to embed a map on your website, however it is not necessary to complete (or enjoy) this exercise. No technical GIS or mapping skills are necessary. Preparation: Create a Google Account. To create a Google Maps My Map you will need a Google Account. Using the link listed below, navigate to the Create an Account website and enter an address, a password for logging in, and agree to the terms and services. Note that you do not need to have a Gmail account to do this; any address can be used. Exercise Overview: In this exercise, you will create a Google Maps My Map depicting several features on the Bannockburn Plantation, located in Georgetown County, South Carolina. We chose this example to get you thinking about your projects in a geographic context and to introduce you to a simple method for publishing maps and data online. The Bannockburn Plantation is a 3500-acre site that is currently dominated by forested wetlands and upland pine stands, however the property is slated for development over the next years. The Baruch Institute of Coastal Ecology and Forest Science with Clemson University is interested in studying the effectiveness of specific stormwater best management practices by monitoring this tract of land before and after development. In this exercise, you will create a map of the Plantation and indicate areas within the project area where some of the monitoring sites will be located. Activity 1: Google My Maps 1

4 Let s Get Started! Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups 1. Open My Maps and create a new map Open your web browser and navigate to Google Maps. - On the top of the left sidebar, click on the tab My Maps. - A new sidebar will load on the left. Click on the button, Get Started. Activity 1: Google My Maps 2

5 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups If you aren t already signed in, a new web page will load and you will be prompted to log in to your Google Account so that the map you create will be saved to and later accessible from your account. Once you are logged in, you will be taken back to the Google Maps page with a new, untitled map open for you to start editing! Activity 1: Google My Maps 3

6 2. Getting acquainted to My Maps Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Let s take a moment to become familiar with the My Maps web page. - For starters, just click the Done button to exit editing mode. We will come back and add features to this map in a minute, but for now we just want to explore My Maps. Click on the My Maps link at the top of the page. The top of the left side bar is where you will access all of the My Maps registered to your username. If this is the first My Map you ve created, you will only see your new Untitled map listed here (In the screenshot below there are a total of four My Maps registered to the user.) You can also add maps from Google s directory by clicking on the Browse the directory link. In the example below, two map tools are listed under the Created by others content, Elevation Contours and Sea Level Rise. The Created by others content includes data and tools that you can add to your map. These are data created by third parties but deemed useful enough by Google to offer here to anyone. - Take a minute or two to explore some of the additional content provided in Google Maps. - Also notice the three different background maps: Map, Satellite and Terrain. Take a minute to switch between them and view the differences. We will mostly work in the Satellite view for this activity. Note: Clicking the X to the far right of your My Map will delete it and the information stored in it completely. Only do this if you are sure you want to see it go! Activity 1: Google My Maps 4

7 3. Edit Your Map Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Ready to build your map? Of course you are! Let s get started. - Under the Created by me heading, click on your new Untitled My Map. If you deleted your Untitled My Map earlier, simple click on the Get started button and skip to the next paragraph. - In the next panel, click on the Edit button to launch the My Maps editor. You will only notice a subtle change. On the left you have the opportunity to change the Title of the map and add a map description. You can also change the privacy and sharing settings, set up collaboration rights and import map data in this panel. On the map you ll notice some new icons in the upper left next to the navigation tools. These are for adding features to your map. You will also notice an icon for Viewing in Google Earth has appeared in the upper right hand corner. Just take note of it for now, don t click on it! Activity 1: Google My Maps 5

8 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - First, let s give our map a new title. Under the Title heading on the left, change the name of your map from Untitled to Bannockburn Plantation. - Type in a brief sentence about your map under the Description heading. This is just an explanation of what your map is showing. Since we ll be mapping the Bannockburn Plantation, something along the lines of A map of the 3,500-acre Bannockburn Plantation slated for development over the next years will suffice. - Change the Privacy and sharing setting to Unlisted. Click Save. 4. Find a Location Before we can add a feature to our map, we need to find the plantation. A search for Bannockburn Plantation will get us close, but a coordinate location will get us closer. - In the Search box at the top of the window, type in these coordinates: , Be sure to include a comma between the coordinates and the minus sign before the latitude value. Click on Search Maps. NOTE: We had you type in a coordinate to find the Plantation because it is an undeveloped parcel. Normally a street address will get you close enough to what you re looking for! Activity 1: Google My Maps 6

9 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Your map will zoom to this location and place a green arrow marker on the map. You will be zoomed in quite far and there won t be much to look at. First let s turn on some imagery by clicking on the satellite button on the top-righthand corner of the map. Next, zoom out far enough so that you are looking at land that lies between Route 17 and the coastline. Your map should look similar to the second screenshot below. Use the slider bar to change the zoom scale Extent of the Bannockburn Plantation slated for development Activity 1: Google My Maps 7

10 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups 5. Add a Polygon Feature The first feature we will add to our map is a polygon indicating the boundary of the parcel slated for development. You will use the tools provided by Google Maps to digitize the edge of the property. - To return to your map, click on the My Maps link on the top of the sidebar and then click on your Bannockburn Plantation map. You should still be in edit mode. Activity 1: Google My Maps 8

11 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Google Maps may have zoomed out to the full extent once you reload your map. - If it did, use the Pan and Zoom tools to return to the area of the Plantation, depicted by the red balloon pinpointing the geographic location described by the coordinates. Activity 1: Google My Maps 9

12 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Once you have zoomed in close enough to see the Plantation (see image on previous page), you are ready to get started. The edit tools are located in the upper left hand corner of the map next to the navigation tools. Click on the line icon. Notice that a drop down menu appears with addition options. Select Draw a shape. This will allow us to draw a feature around any area we define. In this step, we will create a parcel boundary for the Bannockburn Plantation. - Once you have selected Draw a shape you will notice your cursor changes to an X (note: it does not change if you re working on a Mac). Hover your mouse over the northern point of the Plantation, as shown in the image below and click once. A point will be placed at the location you clicked, this represents the first vertice of your shape. Activity 1: Google My Maps 10

13 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Continue to place vertices around the perimeter of the Plantation parcel. Use the image below as a general guide for where the boundary should be delineated. Don t worry about it being perfect, this is just an exercise to get you familiarized with the technique. Bannockburn Plantation Boundary Start here Trace boundary Activity 1: Google My Maps 11

14 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - To finish your shape, double-click. This action will create a closed polygon with a shape defined by the vertices you placed along the boundary of the Plantation. A balloon will appear as well. Change the Title to Bannockburn Plantation. - Click on the blue square on the upper right side of the balloon. This will open an Edit shape style window where you can change the style of the shape. Use the settings shown below to create a hollow shape with a red border. When you have finished, click the back link at the top of the Edit shape style window. Hint: the Fill opacity is the key to making a shape transparent Activity 1: Google My Maps 12

15 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - In the description window, you will see three editing options: Plain text, Rich text and Edit HTML. Click on the Rich text editor. The Rich text editor provides tools for adding and formatting text and images in the window. For example, you can change the font, color and size of text or insert a photograph into the window all without needing to know any HTML! Let s see how it works. - Add a line or two of text. Something about the parcel or the proposed project perhaps? If you re drawing a blank here s an example: The Bannockburn Plantation is located in Georgetown County, SC between Highway 17 and the Atlantic Ocean. The 3,500 acre site is slated for development over the next years. Research will be conducted by the Baruch Institute on the site to study the environmental impacts before, during and after development. - If you wish to experiment with different text properties, try changing the font, color and size using the Rich text editor. Activity 1: Google My Maps 13

16 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Highlight the words Bannockburn Plantation and click on the link icon. In the window that appears, type in the following URL: This will create a hyperlink to another website with more information about the Plantation. - If you wish, create another hyperlink to the Baruch Institute ( - Start a new paragraph. Type the following line of text: To view the conceptual master plan for this parcel, click here. - Highlight the word here and create a hyperlink to - When you are finished, click OK in the balloon and click Save in the side panel. - Click Done to exit the editing session. Activity 1: Google My Maps 14

17 6. Check Your Work Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Click inside the Plantation boundary. A balloon will open displaying the text and links you just created. Test the links to be sure they bring you to the correct locations (if you get an error it s likely just a typo in the URL. You can fix it by returning to Edit mode. Click on Edit > Click on the Bannockburn Plantation feature in the sidebar > highlight the text with the incorrect URL > retype the correct URL > Save changes > click Done). Activity 1: Google My Maps 15

18 7. Add a Point Feature Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups The next feature we will add to our map will be a point feature indicating the location of a dendrometer (for measuring seasonal growth patterns of trees) and sap flow monitor. You will add text, links and photographs to the information window using the Rich text editor. - Click on the Edit button above your map description in the side bar to open another edit session. - Type in the following coordinates into the search window at the top of the page: , Click Search Maps. A marker will be placed on your map. This is the location of one of the tree monitors being used in the study of Bannockburn Plantation. You will place a point at this location. - Click on the My Maps link in the sidebar of the browser window. If necessary, click on the Bannockburn Plantation map title to open your map. Activity 1: Google My Maps 16

19 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Using your zoom and pan tools, zoom into the location where the red marker point was placed on your map. - Select the Add Placemark tool from the editing tools in the upper left corner of the map and place a point on top of the red marker. You can zoom in close to get it as close to the original marker as possible. Note: you can turn off the red balloon by unchecking the search result under the Hide box on the bottom of the sidebar. Shortcut: You can add the results of any Google Maps Search (the red balloon) directly to your My Map by clicking on it and selecting Save to My Maps. A window will open asking you which of your maps you would like to add it to. Activity 1: Google My Maps 17

20 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - In the information window, change the Title to Dendrometer/Sap Flow. - Click on the icon of the blue upside down rain drop. Change the icon to a tree. - If you wish, add some descriptive text about the sampling equipment and techniques that will be present at this location (you can make something up or use the example below). - Place your cursor below the text in the window. Click on the Insert Photo icon on the Rich text editor. Enter the following URL: - Click OK. Activity 1: Google My Maps 18

21 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Hit your return key a couple times and repeat the process to add a second photo. The URL for the second photo is - Once you add a photo, notice that you can resize it by grabbing the handles on the edges or corners. - When you are satisfied with the size of the photos, click OK to close the window and Done in the sidebar to close the edit session. Activity 1: Google My Maps 19

22 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Click on the tree icon to open your newly edited point. You should see the text and photos you just added appear in the information bubble. Pretty cool, right?! Side Note: You can also add Google Videos or YouTube videos to a feature description window! Since there s no icon on the Rich text editor, you will need to do this in HTML. -In edit mode, switch from the Rich text editor to Edit HTML - Find the video you want to embed on Google Video or YouTube and copy the snippet of code that lets you embed the video (see below) and paste it into the description field. Click OK to save! On Google Video, the snippet looks like this: <embed style="width:400px; height:326px;" id="videoplayback" type="application/x-shockwaveflash" src=" flashvars=""> </embed> On YouTube, the snippet looks like this: <object width="425" height="350"><param name="movie" value=" name="wmode" value="transparent"></param><embed src=" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> Activity 1: Google My Maps 20

23 8. Importing Data Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups This project has many other monitoring sites situated across the Plantation. Instead of having you enter them by hand, let s pretend your best friend, who also happens to be a GPS/GIS guru, gave you a file that you can simply import into your My Map. (You don t really have to be a GIS guru to create these files, we ll see how easy it is in the next exercise). The file she gave you is called a KML file. KML stands for Keyhole Markup Language. Without getting into the details, it s essentially a file type that contains information about how to display geographic features on an Earth Browser like Google Maps or Google Earth. GIS data have to be converted to KML before they can be viewed in any of these Earth Browsers. The KML file that you will import into your My Map contains the locations of additional sampling sites on the Plantation. Monitoring Sites on Bannockburn Plantation Saved to KML Imported to Google My Maps Activity 1: Google My Maps 21

24 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - Click on the Edit button at the top of the sidebar to re-open the editing session. Then click on the Import link that appears on the left. - In the window that opens, enter the following URL into the second box: - Click Upload from URL and wait for it to load. Be sure this is NOT checked! Activity 1: Google My Maps 22

25 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Once it loads you will notice you have new features on your map. Each represents a different monitoring station. You can click on any of the icons to view the information for each. You can also make changes to any of the icons or description windows. Just be sure to save your changes! Activity 1: Google My Maps 23

26 Other Cool Features Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Now that you have the workings of a pretty fancy map, let s check out some of the other options you have for collaborating with others, sharing your map and viewing your data in Google Earth. 9. Collaborate with others You can collaborate on a My Map with anyone who has a Google account. As the map originator, you have the power to invite others to access your map, add and delete features, and access code to link to and embed the map on a website. When a change is made to a map, each feature is saved with the person s Google Account name and the time of the edit so that you can follow who is adding what information to the map. - You can collaborate in or out of editing mode. Click on Collaborate in the left sidebar. - A window will open, prompting you to the person you want to collaborate with and what permissions to give them. Collaborators can be given the permission to invite other collaborators as well. You can even write them a message to be sent with their invitation! Activity 1: Google My Maps 24

27 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - If you re so inclined, ask your neighbor what their Google Account address is and type it in to the Invite people as collaborators field. On the left side, click the Send invitations button. Your invitation has been sent. - Click OK to close the window. - Your invited collaborator will receive a link to your map and instructions to accept the invitation. Now, when they sign in to their My Maps, they will view your map under Created by me on the left side. Clicking on the name of your map, they will now be allowed to edit the map just as you are. Their name and a date stamp will be displayed on any placemark they add or edit and they will be able to see what you are editing. Very handy! 10. Sharing your map You ve built a great map now let s get it out there! - First, click Save and Done if you are still editing. - You can print your map, send the link in an , create a RSS feed, or embed it in your website. We are going to explore linking to the map. - On the top right of the map, click the last option, Link - In the dropdown window, you will have two options for sharing your map. One option is to copy and paste the link that is specific to your map in an or an IM. The other option is to copy and paste a block of HTML code in your website page. - Highlight the web address in the first option and copy it. - In a new web browser page, open your account and create a new message. - Paste your link in the and it to yourself or your neighbor. - If you have ed the link to yourself, return to your Google Maps page, sign out of your Google Account (from the top right side of the page). Close the browser page entirely. - Now open your message with the Google Maps My Map link in it (or have your neighbor find their message with the link) and click on the link. - Google Maps will now open and your map of the Bannockburn Plantation will be displayed! Note: there is no Edit option offered on the map when you share the link. Activity 1: Google My Maps 25

28 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups 11. View Your Map in Google Earth You may have noticed the View in Google Earth icon that is present in Google My Maps. This feature allows you to view your My Map data inside the desktop Google Earth application. Let s see how this works. - In the upper right corner of the map you should see a link title View in Google Earth. Click on it. In the window that appears, click OK. - Google Earth will open and you will notice your map appears in the Places sidebar. Play around a little and then close Google Earth. When prompted, Do Not Save your data to the Temporary Places folder. We ll get to it in the next exercise. The rest of the exercise is take home work. Read through it, but do not carry out any of the steps below until you are back at your office/home. Activity 1: Google My Maps 26

29 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups 12. Embedding your map on your website If you have access to your web pages HTML code (or can it to someone who does), you can copy and paste a bit of code into your web editing software and embed your map onto your webpage for all to see! This is handy for displaying where your projects are or even where your office is, and allows users to get driving directions to your placemark. All this without leaving your organization s website! - First, open your webpage editing software. Open the page you want to add your Google Map My Map to. - Next, open a web browser. - Log in to your Google Maps My Map Account at - Click on the Bannockburn Plantation map title under Created by me to open the map. - Click Link on the right side of the page. - A dropdown window appears with two options to link to your map. One allows you to copy and paste a link into an or an IM. The other allows you to copy and paste a block of code into your webpage. You can either copy and paste the code under Paste HTML to embed in website into your webpage code directly, or you can click Customize and preview embedded map below the code field. - Click Customize and preview embedded map. - This opens a new window with customizing options. As you edit the options, the code at the bottom of the window automatically adjusts based on your selections. Activity 1: Google My Maps 27

30 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Customize the size of your map, zoom scale and background map before copying and pasting HTML code Activity 1: Google My Maps 28

31 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - The first step is to set the map size. Take into account your webpage s size, where on the page you want the map to sit, and how much data you wish to be displayed on the map at once. Note: the custom size is set based on pixels. - The second step is a preview of what the map will look like on your webpage. Here you can pan and zoom the map to exactly how you want it displayed when your webpage is loaded. - Finally, copy all that code in the Copy and paste this HTML to embed in your website. - If you have access to your web editing software, open it. If you are restricted access to the underbelly of your website or do not feel comfortable messing with HTML, you can this code to your website manager and they can follow the steps below to insert the map on your page. - Paste the My Map HTML code in your webpage s code based on where on the page you want the map to appear. This adds a gray box to your page in the editing software where the Google Map will draw once it loads online. Save your changes and put your edited page online! Note: this is a screenshot from within Adobe Dreamweaver; it may appear differently in a different software program. Activity 1: Google My Maps 29

32 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups - The next time your webpage loads online, your Google Map My Map will appear embedded in your webpage! Note: when the map is embedded in your webpage it will be calling data from Google Maps which will ensure that future updates to your My Map will automatically be reflected in your website. This also means that your page may load more slowly. There s always more than one method for doing something, right? For another method, for embedding a My Map, refer to our extra exercise on the Google Gadget Activity 1: Google My Maps 30

33 Putting Maps and Geographic Data on the Web Activity 1: Basic Mashups Extra Credit: More Reading, Review and Online Help - For a basic video overview of how to create a My Map, for some examples, and for more editing suggestions and hints The Google Maps Help Center for information on creating and editing your My Map, how to import KMLs, how to add photos and videos, and more - For more on adding Featured Content, adding overlays, getting more ideas - Fun blog for help, ideas and entertainment - A great synopsis and possible source of more help - Official Google Blog for all things Google Activity 1: Google My Maps 31

34

35 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Creating Data in Google Earth Requirements You must have an internet connection and Google Earth 5 installed on your computer for this activity. Preparation: If you do not currently have Google Earth installed on your computer, go to and click on Download Google Earth 5. Read the Terms and Agreements and click Agree and Download. In the next window, click Run Google Earth to test the application. Assuming you are connected to the Internet, Google Earth should open. Exercise Overview: In this exercise, you will explore various functions, data layers and tools available in Google Earth and use your new skills to create a data layer depicting the locations of several proposed development projects on the Bannockburn Plantation. You will add an image overlay of the proposed plans, georeference the image to fit on top of the Bannockburn Plantation parcel, and digitize polygons around each of the proposed project locations. These features can then be saved to a KML file and imported back to your Google My Map, simply stored on your computer s hard drive for future use, or share with your colleagues. Activity 2: KML in Google Earth 1

36 Let s Get Started! 1. Open Google Earth Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics From either your desktop or your start menu (Applications folder for a Mac), open Google Earth. If you do not have a desktop shortcut, go to the Start Menu > Programs > Google Earth. Google Earth will open and you should see an interface similar to what is shown below. NOTE: If you have never used Google Earth before, you may find the last section of this exercise, Getting to Know Google Earth helpful. Turn to page 29 for some pointers on navigating around Google Earth. Activity 2: KML in Google Earth 2

37 2. Fly to a Location Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Under the Fly To tab in the Search panel on the left side of the window, type , Click the Search icon. Google Earth should fly into a familiar location, the Bannockburn Plantation. Activity 2: KML in Google Earth 3

38 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Search results can be turned on or off from the Search window in the sidebar. Uncheck the box next to the coordinates. You should see the coordinates disappear from the map. uncheck 3. Explore Google s Data Layers Google Earth has a number of interesting layers in its Primary Database that can be turned on and off. Let s take a look at some of them now. - Zoom out so that you can view the entire Bannockburn Plantation parcel. You should be able to see Route 17 on the western side of the parcel and the Atlantic Ocean on the eastern edge. - If necessary, expand the Layers view. You can do this by clicking on the blue down arrow to the left of the word Layers at the bottom of the sidebar. Activity 2: KML in Google Earth 4

39 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - The Layers window displays the contents of various geographic data layers that are available from the Primary Database in Google Earth. These are standard, default layers accessible by anyone who has a copy of Google Earth. There are lot of data here. Take a minute to turn some of these layers on and off. A few that might be worth looking at include: Roads, Borders and Labels, Geographic Web (photos, Wikipedia entries), Street View (street level 360 degree photographs) and Places of Interest. Other Google Earth favorites include Terrain, 3D Buildings (only available for major cities), Ocean and Traffic, however you will likely need to zoom to a larger extent to view some of these layers. Try clicking on Show full screen Activity 2: KML in Google Earth 5

40 4. View Historical Imagery Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics One of the unique aspects of Google Earth is the ability to look back in time using the Timeline Toolbar. The Timeline Toolbar allows you to view previous dates of imagery. It is useful for analyzing landscape level changes over time. Let s take a look! - Click on the word View on the Main Menu. In the dropdown menu, click on Historical Imagery. A slider bar will appear in the upper left hand corner of your map. On the right end of the slider bar is the most recent imagery (2007), which is the default display imagery, and on the left side of the bar is the oldest date of imagery, in this case, imagery circa Take a minute to explore some of the older dates of imagery available for the area surrounding the Bannockburn Plantation. Notice the new developments to the north of the parcel? Oldest imagery Current imagery Activity 2: KML in Google Earth 6

41 5. Add an Image Overlay Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics In this step, you will add an image of the proposed development of the Bannockburn Plantation parcel. The image is a JPEG that was created from a scanned paper map. After you add the image to Google Earth, you will have to georeferenced it. Georeferencing refers to the process of assigning geographic properties to something, in this case a scanned image file. You will stretch, shrink and rotate the image of the parcel to fit the geographic extent of the Plantation in order to get a better idea of where the proposed development will take place on the property. - If you ve navigated away from the Bannockburn Plantation while investigating layers in the Primary Database, return to the site by double clicking on the geographic coordinates listed under the Search window. - Again, make sure you re zoomed out far enough to see Route 17 on the west side of the parcel and the ocean to the east. - Turn on the Toolbar. To do this, click on the View dropdown menu and select Toolbar. A toolbar with several different icons will be added to your Google Earth interface. Activity 2: KML in Google Earth 7

42 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Click on the Add Image Overlay icon on the Toolbar. - In the window that opens add a Name to the overlay ( Bannockburn Plantation Conceptual Plan works well). - Next to Link: type in Note: this is an image stored on our server. You could also click Browse and select an image file from your hard drive. - Under Transparency, move the slider bar to the left (towards Clear ) so that it s roughly 1/3 of the way across, or 33% opaque. - Click OK. Move slider left Activity 2: KML in Google Earth 8

43 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics The image will be added to Google Earth. Notice it is semi-transparent? This is because we set a transparency level in the previous step. If you increase the opacity, it will become less transparent, however it will also block out everything underneath it. Since our next step is to adjust it so that the image is georeferenced, we need to be able to see through it to identify features below. Activity 2: KML in Google Earth 9

44 6. Georeference an Image Overlay Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Zoom in a little so that the image of the Conceptual Plan takes up most of your map window. Conceptual Plan - Under the Places window in the sidebar, uncheck the box next to the Image Overlay you just added titled Bannockburn Plantation Conceptual Plan. You should see the image overlay disappear on your map and have a better view of the terrain below it. - Notice how the image overlay doesn t line up with the Plantation boundary? Toggle the Bannockburn Plantation Conceptual Plan image on and off a few times to get a general idea of how much the image will need to be manipulated in order for it to overlay correctly. Toggle on/off Approximate boundary of the Bannockburn Plantation Activity 2: KML in Google Earth 10

45 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - With the image overlay turned on, right click on the name of it ( Bannockburn Plantation Conceptual Plan ) under the Places window in the sidebar. - Select Properties (on a Mac it will be called Get Info). The Properties window will open. Adjust the Transparency slider bar a little more to the left (towards Clear) to make the image more transparent. Don t go too far or the whole image will disappear on you! Activity 2: KML in Google Earth 11

46 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Move the Properties window off to the side of the screen so that it doesn t block the view of your map. - Notice the image now has green markers along the edges and center of the image? These will allow you to stretch, shrink and rotate the image. Try it out. Click on an edge or corner, hold down your left mouse button, and move your mouse around. Notice how you can drag the corners or edges of the image? If you wish to rotate the image, click on the green diamond on the left side of the image. - Spend a few minutes lining up the image overlay with the actual boundaries of the Bannockburn Plantation. Remember to shrink the images from both the edges and the corners. It will also have to be rotated slightly. If you are having trouble seeing through the image to the map underneath, adjust your transparency setting in the Properties window. BEFORE Activity 2: KML in Google Earth 12

47 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics AFTER - When you are satisfied with the way the image is lining up, click the OK button in the Properties window. Activity 2: KML in Google Earth 13

48 7. Add a Feature Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Great work, you just georeferenced a new data layer! Now you re ready to add some features to your map. In this step, you will use the Conceptual Master Plan you just georeferenced to identify the locations of various proposed development projects on the Bannockburn Plantation. You will digitize polygons around various portions of the parcel slated for high density residential, medium density residential and low density residential developments as well as the town center, golf courses and commercial areas. - For this step it may be useful to reduce the transparency of the image overlay. To do so, right click on the name of the image overlay (Bannockburn Plantation Conceptual Plan) in the Places sidebar and select Properties. In the Properties window, move the Transparency slider bar to the right (towards the word Opaque ) until you can begin to see the details of the image including housing developments and golf courses. Click OK to close the window. - You can also adjust the transparency here Activity 2: KML in Google Earth 14

49 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics To organize our data, we ll first add a folder to the My Places content in which we ll place our new features. - Right-click on My Places under the Places sidebar. Hover over the word Add and in the menu that appears select Folder. - Name the folder Bannockburn Development Plan and click OK at the bottom of the window. - Your folder will be added under the My Places heading. If it is below the Bannockburn Plantation Conceptual Plan, hold down the left mouse button and drag your folder to the top so that it is situated above the image overlay. Activity 2: KML in Google Earth 15

50 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Wonderful! Now you re ready to add some features to that folder. First, make sure your new folder is highlighted (in blue) in the My Places Folder. On the Toolbar, click on the Add Polygon icon. - A new window titled Google Earth New Polygon will appear. Change the Name of the polygon from Untitled Polygon to Town Center. - Click on the Style, Color tab. Verify that the Area is set to Filled+Outlined, change the Color to a bright yellow. The Opacity should be set to 100%. Activity 2: KML in Google Earth 16

51 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Move (but do not close!) the Google Earth New Polygon window to the side or bottom of your screen so that you can see the map of the Plantation and the image overlay of the Plantation. - The Town Center is located in the northern portion of the parcel and is surrounded by medium density residential areas (see image below). Zoom in on that area of the parcel. - Using your cursor, click around the perimeter of the Town Center. Each time you click your mouse, a vertice will be placed down. - When you have completed your Town Center polygon, click the OK button in the Google Earth Edit Polygon window to stop editing the feature. Approximate boundary of Town Center a Activity 2: KML in Google Earth 17

52 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Your Town Center polygon will be added to the map as well as to the Bannockburn Development Plan folder under the My Places heading in the Places sidebar. Activity 2: KML in Google Earth 18

53 8. Add Additional Polygons Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Use the same technique you learned in the previous step to add additional features to your Bannockburn Development Plan folder. Use the image below or the text on the Conceptual Master Plan to get an idea of the different development projects proposed for the Plantation parcel. YOU DO NOT HAVE TO ADD ALL THESE POLYGONS, they are simply suggestions. Also, don t fret too much over the accuracy of the locations of the polygons, focus more on the technique. Remember to add each polygon to your Bannockburn Development Plan folder. Commercial Town Center High Density Residential Low Density Residential Golf Courses Medium Density Residential - If you wish to include your image overlay to the saved data file you are about to create, click on it (titled Brannockburn Plantation Conceptual Plan in the Places sidebar) and drag and drop it into the Brannockburn Development Plan folder you created. Activity 2: KML in Google Earth 19

54 9. Save Your Data to KML Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Data that you create in Google Earth can be saved to a KML or a KMZ file. A KMZ is simply a compressed version of a KML. For this exercise, we ll work with KML. KML stands for Keyhole Markup Language. Keyhole was Google Earth s predecessor and the creator of KML. The name stuck and has become an industry standard for displaying geographic information within Earth Browsers like Google Earth, Google Maps and Bing Maps. In this step, you will save your new features to a KML file. That file can then be shared, posted on your website, or imported into a Google Maps My Maps. - Right-click on your Bannockburn Development Plan folder in the Places sidebar and click on Save Place As - In the Save File window that opens, navigate to a folder on your computer s hard drive where you would like to save the file. If you don t have one, you can create a new folder (just be sure to remember where it is) by clicking on the icon (or on the New Folder button for a Mac). For this exercise, we created a folder called KML on the C: drive. The pathname is C:\KML. - The file name should already be Bannockburn Development Plan. - Change the Save as type: selection to Kml (*kml) and click Save. The file will be saved to your hard drive. Activity 2: KML in Google Earth 20

55 10. Verify Your Data Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - Remove the Bannockburn Development Plan folder from your My Places by rightclicking it and selecting Delete. Choose OK in the window that opens asking if you are sure you wish to delete the folder and all its descendants. The folder will be removed from your Google Earth session. Close Google Earth. - Open My Computer on your desktop or use the Windows Explore function (PC) or Finder tool (Mac) to view your computer s file system. Browse to the folder you just saved your KML file to (in our demo we saved it to C:\KML). You should see your new KML, titled Bannockburn Development Plan.kml in this folder. Double-click on it. This will prompt Google Earth to open and fly to the location of the features that are described in the KML. Pretty awesome you did that all yourself! Activity 2: KML in Google Earth 21

56 11. Import Your KML to Google Maps Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics A useful feature of Google Maps My Maps is that you can import data saved in a KML. In this step you ll revisit your Google Map My Map project and import the KML file you just created in Google Earth. - Close or minimize Google Earth. If you still have Google Maps open in a browser, maximize it. If you already closed the browser, open a new one and navigate to Sign into your Google Account if necessary. - In Google Maps, click on the My Maps link. You should see your Bannockburn Plantation map listed below the Created by me heading. Click on it. Activity 2: KML in Google Earth 22

57 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics You should now be looking at the map you created in the first exercise. - Click on the Edit button in the upper right corner of the sidebar. This will allow you to edit this map. - Once you are in Edit mode, you will notice a new Import link at the top of the sidebar. Click on it. Activity 2: KML in Google Earth 23

58 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics - In the Import KML window that appears, click on the Browse button and navigate to the folder where you saved your KML in step 8. Click on it and select Open in the Browse window. - In the Import to KML window, click Upload from File. - Click Done in the sidebar. Don t fret if you don t notice any changes yet! Activity 2: KML in Google Earth 24

59 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Okay, this is where you ll need some patience. Sometimes it takes Google Maps a minute or two to register changes to a My Map that are the result of an Import function. Your new features may take time to register on your map. Try refreshing your browser. Try reloading your My Map. If neither of those options works, try logging out and logging back into your Google account. Try to resist the urge to re-import your KML because what will happen is that when your features finally do load, you will have duplicates. Mainly, just try to be patient. When the KML does load, you ll know! Note: If you included the Bannockburn Plantation Conceptual Plan image overlay in your KML, you will not see it when the KML is imported to Google Maps. Bummer! Activity 2: KML in Google Earth 25

60 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics You ll notice that none of the polygon features retained their symbology (colors) that you specified in Google Earth. You will have to redo these if you want them to have a specific fill or outline color. - To edit your polygons, click the Edit button in the upper right corner of the sidebar. Click on the polygon you wish to edit. The feature balloon will open. Click on the colored square in the upper right corner of the window to open the Edit shape style window. Change the settings based on your preferences and click OK. You should see your changes reflected on your map. Remember to Save your updates. Activity 2: KML in Google Earth 26

61 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Congratulations! You ve successfully created a Google Maps My Map, created data in both Google Maps and Google Earth, saved and imported KML, and learned how to share your map data! 12. You re On Your Own Well, not really. We ll be around for the remainder of the workshop to help answer any questions that you may have. Now is your time to explore on your own. Create another My Map using your own data, spend some time exploring Google Earth, create another KML. Try it all! If you re interested in learning more about how to embed your Google My Map or KML on your own website, go on to the Extra Credit exercise. Activity 2: KML in Google Earth 27

62 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Activity 2: KML in Google Earth 28

63 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Google Earth Tips and Tricks Content Supplied from Google Earth Online Help Getting to Know Google Earth The following diagram describes some of the features available in the main window of Google Earth: 1. Search panel Use this to find places and directions and manage search results. 2. 3D Viewer - View the globe and its terrain in this window. 3. Toolbar buttons - See below. 4. Navigation controls - Use these to zoom, look and move around (see below). 5. Layers panel - Use this to display points of interest. 6. Places panel - Use this to locate, save, organize and revisit placemarks. 7. Add Content - Click this to import exciting content from the KML Gallery 8. Status bar - View coordinate, elevation, imagery date and streaming status here. 9. Overview map - Use this for an additional perspective of the Earth. Activity 2: KML in Google Earth 29

64 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics Toolbar Buttons Conceal or the display the side bar Add a placemark for a location Add a polygon Add a path (line or lines) Add an image overlay on the Earth Record a tour Display sunlight across the landscape View the sky, moon and planets Measure a distance or area size a view or image. Print the current view of the Earth Show the current view in Google Maps Display historical imagery Using the Navigation Controls To view and use the navigation controls, move the cursor over right corner of the 3D viewer. After you start Google Earth and move the cursor over this area, the navigation controls fade from sight when you move the cursor elsewhere. To view these controls again, simply move the cursor over the right corner of the 3D viewer. Note - If the navigation controls do not appear when you move the cursor over the right corner of the 3D viewer, click View > Show Navigation > Automatically and try again. To hide or show the compass icon in the 3D viewer, click View > Compass. Using Your Mouse To get started navigating with your mouse, simply position the cursor in the middle of the 3D viewer (image of the earth), click one of the buttons (right or left), move the mouse and note what happens in the viewer. Depending upon which mouse button you press, the cursor changes shape to indicate a change in behavior. By moving the mouse while pressing one of the buttons, you can: Drag the view in any direction Zoom in or out Tilt the view (requires middle button or scroll wheel) Look around from a single vantage point Rotate the view (requires middle button or scroll wheel) Activity 2: KML in Google Earth 30

65 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics The Google Earth navigation controls offer the same type of navigation action that you can achieve with mouse navigation. In addition, you can use the controls to zoom and swoop (perhaps for a perspective on terrain) or to rotate your view. The following diagram shows the controls and explains their functions. Click the north-up button to reset the view so that north is at the top of the screen. Click and drag the ring to rotate your view. Use the Look joystick to look around from a single vantage point, as if you were turning your head. Click an arrow to look in that direction or continue to press down on the mouse button to change your view. After clicking an arrow, move the mouse around on the joystick to change the direction of motion. Use the Move joystick to move your position from one place to another. Click an arrow to look in that direction or continue to press down on the mouse button to change your view. After clicking an arrow, move the mouse around on the joystick to change the direction of motion. Use the zoom slider to zoom in or out (+ to zoom in, - to zoom out) or click the icons at the end of the slider. As you move closer to the ground, Google Earth swoops (tilts) to change your viewing angle to be parallel to the Earth's surface. You can turn off this automatic tilt (Tools > Options > Navigation > Navigation controls; Mac: Google Earth > Preferences > Navigation > Navigation controls). Tilting and Viewing Hilly Terrain When you first start Google Earth, the default view of the earth is a "top-down" view, which is straight down. Tilt the terrain from 0-90 degrees - You can use the mouse to tilt the view in order to see a different perspective of the area you're exploring. You can tilt to a maximum of 90 degrees, which provides a view of the object as well as the horizon, in some cases. Turn on terrain - Using the tilt feature is particularly interesting when you are looking at a part of the earth where the terrain is hilly. Be sure to check Terrain in the Layers panel. Rotate the view for a new perspective - Once you have tilted the view so that you are looking at a particular object, such as a hill, you can also rotate around that object. When you do this, the object remains in the center of the view, but you look at it from different perspectives (i.e., north, south, east, west) as you rotate around it. Use the middle mouse button (if available) for seamless movement - If your mouse has a middle button or a depressible scroll wheel, you can depress the button to both tilt and rotate the view. Movements up or down tilt the view, and movements left or right rotate the view. Activity 2: KML in Google Earth 31

66 Putting Maps, Images and Data on the Web Activity 2: Google Earth Basics The following figures show a comparison view of Mount Shasta in California with and without tilt enabled. Top down view Tilted view You can adjust the appearance of the terrain if you would like the elevation to appear more pronounced. To do this, click Tools > Options > 3D View from the Tools menu (for the Mac, choose Google Earth > Preferences > 3D View) and change the Elevation Exaggeration figure. You can set it to any value from 1 to 3, including decimal points. A common setting is 1.5, which achieves an obvious yet natural elevation appearance. Resetting the Default View After tilting and rotating the 3D view in Google Earth, you can always quickly reset to the default north-up and top-down view. To do this: Click the North-up button to reset the view so that north is at the top of the viewer. (Windows and Linux only) Click in the 3D viewer and type r on the keyboard to reset the view. Consider also using the Overview Map Window as a way to provide an additional perspective on your location, especially when you are zoomed in to unfamiliar places. More Information Read more about these and other Google Earth functions online at: Activity 2: KML in Google Earth 32

67 Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget Embedding Made Easy The Google Embed Map Gadget Requirements You must have an internet connection, a Google My Map or an online KML file, and access to your organization s web editing software (or the ability to code to your web designer). You will also want to download the Google Earth Browser Plugin. Visit to download the Plugin. Preparation: Create a Google Map My Map (See Exercise 1) or create a KML file in Google Earth (See Exercise 2) and upload it to your server. The key is you must have a URL to your data source. Exercise Overview: In this exercise, you will use Google s new Embed Gadget to generate code necessary to embed an interactive map on your organization s webpage. The Embed Map Gadget requires a URL to a Google My Map or a KML file. You will use the URL from the My Map you created in Exercise 1 to explore how this tool works. To complete the exercise, you will need to have access to your web editing software or you will have to your website designer the code that the gadget generates in order to embed the map on your site. Activity 3: Google Embed Gadget 1

68 Let s Get Started! Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget 1. Log in to Google Maps and View Your My Map - Open a browser window and navigate to - Sign into your Google Account if necessary. - Once you are signed in, click on the My Maps link to view the maps created by you. Click on the Bannockburn Plantation map you created in Exercise 1. Activity 3: Google Embed Gadget 2

69 2. Access the My Maps URL Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget - You should now be looking at your Bannockburn Plantation map. Click on the Link icon in the upper right corner of the map. - In the Link window, copy the URL under Paste link in or IM. This is the URL to your My Map. Note: For an alternative embed method, you can copy and paste this HTML into your website s source code. However, you will have fewer options for customization and you will be restricted to using only Google Maps rather than Google Earth. See page 27 of Activity 1 for more instruction on how embed a Google Maps My Map on your webpage. Activity 3: Google Embed Gadget 3

70 3. Using Google s Embed Map Gadget Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget - In a new browser window, navigate to If you don t currently have the Google Earth Plugin installed on your computer you will get this message Note: To run Google Earth in a web browser, you will need to install the Google Earth Plugin. For this exercise, it is not necessary, however if you wish to embed 3D maps on your website, you will want to add a note to your users about installing this plugin. Activity 3: Google Embed Gadget 4

71 Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget - You don t have to install the Google Earth Plugin to finish this exercise, but if you would like to preview what your map would look like using the browser based Google Earth, you will need it. If you wish to avoid the plugin for now, click on the down arrow next to the View In option and select 2D (Google Maps). 3D Google Earth Plugin 2D Google Maps Activity 3: Google Embed Gadget 5

72 Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget - When you are ready, paste the My Maps URL into the first box under Gadget settings KML or My Maps URL. The gadget will read the URL and display a preview of what the embedded map will look like in the window at the top of the page. You can switch between Google Maps and Google Earth from the View mode dropdown box. Paste My Maps URL here 2D Google Maps - On the right are additional map settings and on the left are several display settings that can be customized including: Title, Width and Height of the map, and Border format and color. Play around with these settings. Notice how your preview map will update to reflect the changes. If it doesn t update, select Preview Changes. 3D Google Earth If you don t currently have the ability to access your website editor, skim Step 4 and then go directly to Step 5. Activity 3: Google Embed Gadget 6

73 Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget 4. Getting the Code to Embed Your Map When you satisfied with the look of your preview map, you are ready to get the code necessary to embed the map on your own webpage. These next few steps are intended for those who have access to their web editing software. If you do not have access, another option is to you web designer with the snippet of code and have them paste it into your site s source code. All it takes is a few short lines of code and you ll have yourself an embedded, interactive map! - At the bottom of the page, click on the Get the Code button. - A new window will appear with the unique code for your map. This is what will need to be copied and pasted into your website s source code. Select and Copy it. - Open your web editing program and copy the HTML code into the page and place where you would like to display the embedded map. Save and preview. Remember, if you wish to tweak the size or look of your map, you will need to repeat the Get the Code step and replace the HTML on your page. Activity 3: Google Embed Gadget 7

74 Putting Maps and Geographic Data on the Web Activity 3: Google Embed Gadget Voila! You now have an embedded map on your webpage! There s always more than one method for doing something, right? For another method, for embedding a My Map, refer back to Exercise 1, PG 27 Activity 3: Google Embed Gadget 8