Maps - UCSB Geography

Maps and Mapping
OBJECTIVES
Online mapping is redefining the concept of maps in our culture. Cartographic mash-ups, mapping applications
that combine content from multiple sources, are quickly becoming important everyday tools for uses ranging
from shopping to live traffic reports. The relative ease with which anyone can add location based information
to a map has inspired a mash-up phenomenon in digital cartography. In this lab, you will create a mash-up and
learn the basic structure of a Keyhole Markup Language file (KML) used to visualize data in Google Earth and
Google Maps. You will use Spreadsheet Mapper to create place marks, generate content, and embed a map
onto your own webpage or blog.
MATERIALS
Google Earth 5.0 or later
Google account (Sign-up at https://www.google.com/accounts/NewAccount)
Access to web space (If you’re a UCSB student, you can access your UWEB space with your Umail name and
password.)
FTP client (UCSB Geography labs have SSH Secure Shell installed, or visit www.ssh.com. Many free
applications are available for download, such as WinSCP at http://winscp.net)
Internet
BACKGROUND
Key Terms
KML
Mash-up
Geocode
FTP
HTML
Keyhole Markup Language; a tag-based file format file used to display geographic data in an
Earth browser such as Google Earth or Google Maps
A web application that combines data or functionality from multiple sources into a single
integrated application
To find the latitude and longitude coordinates of an address
File transfer protocol that allows users to copy files between their local computer system and
any system they can reach on the network.
HyperText Markup Language is the predominant markup language for web pages
Introduction
In this lab you will create a Google Earth (GE) mash-up that will be shared on the web. A cartographic mashup integrates open application programming interfaces (API) and data sources to produce results beyond the
original intent of the raw source data. For example, MapsKrieg.com is a mapping tool that helps people find
housing by mashing Craigslist listings with Google Maps (http://www.mapskrieg.com), resulting in a new
and distinct Web service that was not originally provided by either source.
Page 1 of 11
Maps and Mapping
Another example is a GE layer designed by the US Holocaust Memorial Museum to raise awareness on the
humanitarian crisis in the Darfur region of Sudan (http://www.ushmm.org/maps/crisisindarfur.kmz).
The map uses GE’s historical imagery feature to show villages before and after their destruction.
EXERCISE
Part 1. Creating placemarks
Spreadsheet Mapper
We will use Spreadsheet Mapper (SM), a tool that runs inside Google Docs, to create a set of placemarks for a
KML file that will be displayed GE. You will need a Google Account to use Google Docs, a free way to
collaborate on documents, spreadsheets, and presentations online (www.docs.google.com). Although
placemarks can be coded in KML from scratch, SM simplifies this process and makes it easy for anyone to
customize display. All that’s required is completion of a Google Spreadsheet with locations, coordinates and/or
addresses, photo URLs, and any other information you’d like to include on your map. A KML file automatically
will be generated that can be used to publish a map on a webpage with the Embedded KML Viewer
Gadget. An example of the SM interface is shown below.
Page 2 of 11
Maps and Mapping

In this example, you can see that 14 placemarks have been created by entering a location’s
coordinates and address. View the above example spreadsheet with data here:
http://spreadsheets.google.com/pub?key=tWDkEfYa67mT0YIF_x6k2JA&output=html

View the GE map that was created with this spreadsheet:
http://uweb.ucsb.edu/~susantran/roadtrip/map.html. You may be prompted to install a GE
plug-in to view maps in your browser. Notice that the style of all icons, pop-up balloons, and display
elements are customizable with SM.
You will practice creating a placemark with sample data.

Click here to open a starter spreadsheet http://spreadsheets.google.com/ccc?key=pzIWuNNsnGKqQ_V-SpUsRQ&newcopy. You might be prompted to sign into your Google
account.

If asked to “Make a new copy of this document” click on “Yes, make a copy.”

A spreadsheet form should open that looks like this:
Page 3 of 11
Maps and Mapping

Give the spreadsheet an appropriate name. Click the File button above and choose Rename

Enter Basic Information in “Author’s Information” and “About your KML Document” sections. Enable
"Google Maps Compatibility" to enable your layer to work in Google Maps and older versions of Google
Earth (pre-4.2). We’ll leave the "Advanced/Optional Settings"
alone for now.

Publish your spreadsheet. Click the Share button and
choose Publish as a web page.

In the next window, un-check the box next to "Automatically
republish when changes are made," and click the Start
publishing button.

Under Get a link to the published data, select "Webpage"
from the drop-down menu. This creates a public web link that
anyone can use to view your spreadsheet data online.

Copy the URL by right-clicking on the link and choosing Copy. When you’re done, close the Publish to
Web window.
Page 4 of 11
Maps and Mapping
Paste the URL into the white cell provided under "Publish spreadsheet."


Select your balloon template. To view available balloon templates in GE, copy the "Network Link KML" cell.

Open up the GE software. Right click on My Places in the Places menu, and Paste your network link.

Six sample templates will be displayed in the 3D window. Click on the balloons and decide which one you’ll
use for your project. For now, you will practice adding sample data to Template #1.
Page 5 of 11
Maps and Mapping

Return to Spreadsheet Mapper. Click on the Template 1 sheet on the bottom of the page.

You’ll see that all the KML Style variables are customizable. This is where you can change balloon
background colors, icon images, and label colors. The default icon looks like a yellow upside down
teardrop .

To change the icon, you will need to upload an image to your web space or find a URL for an image
you’d like to use on the web. For now, you will change the icon to the image used in the sample
.
In the Icon URL field, copy and paste:
http://uweb.ucsb.edu/~susantran/roadtrip/carIcon.png. You will not be required to
customize an icon for the mashup that you will create in Part 3 of this lab.

There is also an option to change the Icon URL highlight. This is the image that will appear when
the user rolls the mouse over a placemark. In this field, paste this link to use an orange car
.
http://uweb.ucsb.edu/~susantran/roadtrip/carIconHighlight.png.
Tip: Test all web links in a separate browser tab or window for functionality before entering in your
spreadsheet. It’s best to correct typos, broken links, etc. now rather than later. On the spreadsheet,
click the “Go to” icon
to follow the link.

Accept the rest of the Default Style Variables and Static Variables, which list information that appears
in every balloon. You will replace the values with your information later.

Go to the PlacemarkData sheet. Highlight and delete the sample data. You will practice creating a
placemark with provided data.
Page 6 of 11
Maps and Mapping

A name and lat/lon are required for each placemark. Coordinates must be in decimal degree format
(e.g., 34.999, -122.34567). Degrees south or west are noted with the negative symbol (-). If
necessary, review Lab 2: Coordinate Systems for conversion from DMS to DD. (Hint: An easy way to
geocode a location is to use this link to add a mapplet to your Google Maps MyMaps tab, or you can
use a free service like Batch Geocoder.)

In column H, enter 1 for template #1. Each template uses the spreadsheet's columns for different
pieces of balloon content (e.g., Template #1, column I = "Left Column Header"; Template #2, column
I = "Title"). Make sure you enter each placemark's data according to the appropriate column headers
as show in the template list. To make data entry easier, highlight a specific template by entering its
number in cell H10. That template's column headers will appear in row 10, right above the gray
header bar.

Type the following data into the respective fields. We will leave some of the options blank.
1. Placemark Name
Washington Monument
2. Latitude
38.889444
3. Longitude
-77.035278
4. Address*
Washington, DC
5. Template
1
6. Left Column Header
Day 1
7. Photo URL
http://uweb.ucsb.edu/~susantran/roadtrip/washingtondc.jpg
8. Photo Credit
UCSB Geography
*You can enter a street address if known.

Go to the Share button on your spreadsheet, choose Publish as a web page, and click Re-publish
now.

View the placemark you just added in Google Earth. In the Places panel, right-click on the network
link named "Link to - Spreadsheet" that you added earlier. Select Refresh to load your changes.
Remember that every time you want to preview changes made in the spreadsheet, you will have to
Re-publish it and refresh the link in Google Earth.

The display should update to the placemark location. Hover the mouse over the red car icon and
notice that it changes to the orange car icon you set as the highlight icon. Click on the placemark to
view the content you added to the balloon.
Page 7 of 11
Maps and Mapping
Part 2. Publish your map on a website
Dynamic links to layers created in Spreadsheet Mapper can be shared by going to the GE Places panel, rightclicking on "Link to - Spreadsheet" and choosing Save As. The resulting KML/KMZ file will always retrieve the
latest data direct from your spreadsheet.
In this portion of the lab, you will embed a static snapshot of the KML layer on a website using the
Embedded KML Viewer Gadget. This map will not directly connect to your spreadsheet or update when
you make changes to it. Note that customized icons will not be displayed with the Embedded Viewer Gadget
using this method (although they can be displayed with some editing of the KML file).



In the GE Places panel, right-click on the top-level folder of your map (blue globe icon layer, not the
“Link to – Spreadsheet” layer). Choose Save As.
Give the file a descriptive name and save it on your computer. Tip: Do not use spaces in your
filenames to reduce confusion.
Upload the KML/KMZ file to your webspace. The following are instructions only for the UCSB
Geography labs:
1.
2.
3.
4.
5.
6.
7.
8.
9.
For UCSB students, you will need access to your UWEB space. Open up an FTP client. In
UCSB Geography labs, click on Start All Programs SSH Secure Shell  Secure File
Transfer Client.
Click on the Quick Connect Button in the window that appears. A remote host dialog will
appear.
For Host Name, type www.uweb.ucsb.edu
For User Name, type your Umail name which is the first part of your Umail address
([email protected]).
Click connect.
If you see a Host identification box, select no.
The next dialog box will prompt for a password. Enter the password you use to access your
Umail account.
You should see a single folder on the right side of your file transfer window called uweb.
Double-click this folder to see its contents. If you’ve never used your webspace before, it
should be empty. You will drop any files you want to be accessible on the internet into this
folder.
On the left side of the file transfer window, you will see the contents of your local machine.
Page 8 of 11
Maps and Mapping
10. Navigate to the KML/KMZ file you just created.
11. Drag and drop the file from the left side of the screen to the uweb folder on the right side.
12. The path to your file should now be accessible on the internet at:
http://uweb.ucsb.edu/~username/filename.kml (or .kmz)
13. If you have pictures of your own that you want to use in your website (ie. You don’t have
links from a website that you are using pictures from), you will need to upload them to your
uweb storage file. Once this is done, you can create a link to the file, using this template:
http://uweb.ucsb.edu/~username/picture_file_name.jpg (or .gif) Test this link and make sure
it works. Then add it to your Google docs spreadsheet.

The following are instructions only for the UCSB Phelps labs:
1.
For UCSB students, you will need access to your UWEB space. Open up an FTP client. In
UCSB Phelps labs, click on Start All Programs Internet  WinSCP.
2. Double click on “ustorage.ucsb.edu” in the right-hand window.
3. For User Name, type your Umail name which is the first part of your Umail address
([email protected]).
4. The next dialog box will prompt for a password. Enter the password you use to access your
Umail account.
5. You should see a single folder on the right side of your file transfer window called uweb.
Double-click this folder to see its contents. If you’ve never used your webspace before, it
should be empty. You will drop any files you want to be accessible on the internet into this
folder.
6. On the left side of the file transfer window, you will see the contents of your local machine.
7. Navigate to the KML/KMZ file you just created.
8. Drag and drop the file from the left side of the screen to the uweb folder on the right side. A
new dialog box will open and you need to select “copy” so that your file will copy into your
uweb storage file.
9. The path to your file should now be accessible on the internet at:
http://uweb.ucsb.edu/~username/filename.kml (or .kmz)
10. If you have pictures of your own that you want to use in your website (ie. You don’t have
links from a website that you are using pictures from), you will need to upload them to your
uweb storage file. Once this is done, you can create a link to the file, using this template:
http://uweb.ucsb.edu/~username/picture_file_name.jpg (or .gif) Test this link and make sure
it works. Then add it to your Google docs spreadsheet.
11. Press F10 to quit, or use the button at the bottom of the screen “F10 Quit”.
Embedded KML Viewer website.

Visit the

Enter the URL for your uploaded KML file in the KML or
My Maps URL field. Remember that paths are CASE
SENSITIVE.

Select 3D (Google Earth Plugin) as your view mode.

You can change the other settings such as width and
height of viewer.

Click the Preview Changes button to see your map.
Page 9 of 11
Maps and Mapping

When you’re satisfied with the map appearance, click the Get the Code button. Some HTML code
should appear in a box at the bottom of the screen.

Copy/paste the HTML code into a notepad document (StartAll ProgramsAccessoriesNotepad).

Save the document with a descriptive name but do not use spaces. Use the extension .html (e.g.,
sample.html).

Close the html document and upload it onto your web space.

View your website online. UCSB students, the path to the website you just created will be
http://uweb.ucsb.edu/~username/filename.html
Part 3. Make your own mash-up
Now it’s your chance to be creative. You will create a mashup that meets a social or business
purpose. The map must include at least 10 placemarkers with balloons. At least 5 of these
balloons must contain images and captions. Any balloons without images must include
descriptive text.
Spend some time brainstorming your map theme then gather data to populate a new starter
spreadsheet. You can use your own data or browse the internet for content, but don’t forget to
cite ALL of your sources. Follow the steps above to complete the spreadsheet, upload a KML file
to your web space, and create a website with your map.
Tips:
- Create a folder on your computer to store all of your website content. This will make it easier to drag and
drop content into your web space.
- To reduce confusion, avoid using spaces in the filenames of your web content. If you must, use an
underscore instead. Common practice is to capitalize the first letter of each new word. For example, bad: file
name.jpg, good: file_name.jpg or fileName.jpg.
Page 10 of 11
Maps and Mapping
- Use descriptive map titles, placemarks, and headers to make your map understandable to viewers. The
theme and purpose of your map should be immediately apparent.
- Use appropriate symbols, color schemes, and icons for all of your content. Recall Lab 5: Symbology.
- Test web links any time you make changes. If you get 404 File Not Found errors, they’re usually due to
incorrect spelling or miscapitalization of the path name.
What you must turn in:
1. Link to the public URL of your spreadsheet.
Ex: http://spreadsheets.google.com/pub?key=abcdefghijklmnopqrstuvwxyz
2. Attachment of your static KML/KMZ file
3. Link to your map website.
Include all this information in your template file and submit to GauchoSpace.
RELATED LINKS
Geocode multiple locations by address:
http://www.batchgeocode.com/
Open Geospatial Consortium for development of standards for geospatial and location based
services.
http://www.opengeospatial.org
Google KML Reference Guide
http://code.google.com/apis/kml/documentation/kmlreference.html
Are you a Lost TV show fan?
http://maps.google.com/maps/ms?msa=0&msid=1145229904149408108
50.000443661057ca9cd1ed7
This lab was developed by Susan Tran | UCSB Geography | September 2009
Page 11 of 11