Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf ·...

20
GEOG677 Internet GIS University of Maryland at College Park 1 Lab Assignment 2 Web Mapping with Google Earth, KML, and Google Map Due Date: 01/05/2012 Overview This lab assignment is designed to help you explore the potential of Web mapping with some of the most popular tools (e.g. Google Earth, KML, and Google Map). The results will be published on your website and made available to anyone through the Internet. This assignment is divided into five parts: Part I: Google Earth Part II: KML Part III: Using Google Earth to create KML Part IV: Using ArcGIS to create KML Part V: Creating Customized Web Mapping with Google Map Data The GIS data to be used are as following (downloadable on the Blackboard): PG_Hospitals.shp PG_CensusTracts.shp Part I: Google Earth This section will help you get a better understanding about Google Earth and its capabilities. You will also need to install it on your computer in order to complete the tasks in later sections. 1. Getting to Know Google Earth Google Earth is a virtual globe, map and geographic information program that has been developed and trademarked by Google, Inc. It is probably one of the most exciting and popular software in past few years. Google Earth is an interactive mapping application that allows users to navigate the entire globe, viewing satellite imagery with overlays of roads, buildings, geographic features, and so on. It displays satellite images of varying resolution of the Earth's surface, allowing users to visually see things like cities and houses from a bird's eye view. The degree of resolution available is based somewhat on the points of interest and popularity, but most land (except for some islands) is covered in at least 15 meters of resolution. Due to its nature, Google Earth is closely related to other geo-spatial technologies such as GIS and GPS. It can show all kinds of images overlaid on the surface of the earth and is also a Web Map Service client. Some people will go as far as claiming Google Earth is “People’s GIS” because of its popularity and free-to-use (almost). That’s why it is important to know some of the applications of Google Earth, especially when it comes to Web mapping.

Transcript of Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf ·...

Page 1: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

1

Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map

Due Date: 01/05/2012

Overview

This lab assignment is designed to help you explore the potential of Web mapping with some of

the most popular tools (e.g. Google Earth, KML, and Google Map). The results will be published

on your website and made available to anyone through the Internet.

This assignment is divided into five parts:

Part I: Google Earth

Part II: KML

Part III: Using Google Earth to create KML

Part IV: Using ArcGIS to create KML

Part V: Creating Customized Web Mapping with Google Map

Data

The GIS data to be used are as following (downloadable on the Blackboard):

PG_Hospitals.shp

PG_CensusTracts.shp

Part I: Google Earth

This section will help you get a better understanding about Google Earth and its capabilities. You

will also need to install it on your computer in order to complete the tasks in later sections.

1. Getting to Know Google Earth

Google Earth is a virtual globe, map and geographic information program that has been

developed and trademarked by Google, Inc. It is probably one of the most exciting and popular

software in past few years.

Google Earth is an interactive mapping application that allows users to navigate the entire globe,

viewing satellite imagery with overlays of roads, buildings, geographic features, and so on. It

displays satellite images of varying resolution of the Earth's surface, allowing users to visually

see things like cities and houses from a bird's eye view. The degree of resolution available is

based somewhat on the points of interest and popularity, but most land (except for some islands)

is covered in at least 15 meters of resolution.

Due to its nature, Google Earth is closely related to other geo-spatial technologies such as GIS

and GPS. It can show all kinds of images overlaid on the surface of the earth and is also a Web

Map Service client. Some people will go as far as claiming Google Earth is “People’s GIS”

because of its popularity and free-to-use (almost). That’s why it is important to know some of the

applications of Google Earth, especially when it comes to Web mapping.

Page 2: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

2

2. Downloading and Installing Google Earth

Google Earth is available under three different licenses:

Google Earth, a free version with limited functionality

Google Earth Pro ($399 per year), which is intended for commercial use.

Google Earth Enterprise

For this class, it is perfectly fine to use the free version.

Your first task is to go to here and download Google Earth (V6): http://earth.google.com/

When installing, you can just follow the instructions on those pop-up windows. There is one step

that will ask you to select setup type, make sure you check “Complete”.

3. Practicing Google Earth

Even though Google Earth provides state-of-art user interface, it still can be overwhelming to use

it because there are so many buttons, menus, and options. Therefore, you may want to spend

some time to read the User Guide (below) and do some testing.

http://support.google.com/earth/bin/static.py?hl=en&page=guide_toc.cs

Part II: KML

KML refers to Keyhole Markup Language, which is a file format used to display geographic data

in an Earth browser such as Google Earth, Google Maps, and Google Maps for mobile. KML

uses a tag-based structure with nested elements and attributes and is based on the XML standard.

All tags are case-sensitive and must be appear exactly as they are listed in the KML Reference.

1. Getting to Know KML

KML was developed for use with Google Earth. However, it can be displayed by many other

applications including: Google Maps, Google Maps for mobile, NASA WorldWind, ESRI

ArcGIS Explorer, Adobe PhotoShop, AutoCAD, Yahoo! Pipes, and so on.

If you are not familiar with KML, before you start next session, you might want to check out this

KML tutorial: http://code.google.com/apis/kml/documentation/kml_tut.html

Also, you can even test some KML samples by using Google Earth which you have installed.

The samples can be found here:

http://code.google.com/apis/kml/documentation/KML_Samples.kml

Page 3: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

3

2. Creating KML

There are many different ways of creating KML files. Obviously, you can simply write KML

codes just like HTML. And, you can also create KML files with Google Earth. In addition, you

can create KML using some software such as ArcGIS. These last two options are the simplest

way of creating KML because you don’t need to deal with coding. However, you may pay a

price of not being able to control what exactly you want to do.

Now let’s try the first option.

The typical file structure of KML is as below:

<?xml version="1.0" encoding="UTF-8"?>

<kml xmlns="http://www.opengis.net/kml/2.2">

<Placemark>

<name>New York City</name>

<description>New York City</description>

<Point>

<coordinates>-74.006393,40.714172,0</coordinates>

</Point>

</Placemark>

</kml>

The structure of this file breaks down as follows:

An XML header. This is line 1 in every KML file. No spaces or other characters can

appear before this line.

A KML namespace declaration. This is line 2 in every KML 2.2 file.

A Placemark object that contains the following elements:

o A name that is used as the label for the Placemark

o A description that appears in the "balloon" attached to the Placemark

o A Point that specifies the position of the Placemark on the Earth's surface

(longitude, latitude, and optional altitude)

We can use the similar way of creating HTML to create KML.

Now, open NotePad and copy/paste those codes on previous page and then save it as a “.kml”

file. Make sure the file extension must be “.kml” and the file name should contain your user ID.

I would suggest that you create a path – “Lab2/KMLs/” and save the file there. Other KML files

will be saved there, too.

Page 4: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

4

After you save this file, you can double-click it to open. Google Earth should be automatically

opened and the placemark (i.e. New York City in this case) will be displayed at the center of the

map.

Now, you can change the placemark to some place which is more relevant to yourselves, for

example, your home address or your favorite restaurant, etc. To do so, you will have to know the

precise coordinates (latitude and longitude) of that location. There are a variety of ways of

getting the coordinate. In this case, why don’t we let Google Earth do the work?

Here is an example: Let’s say I want to create a placemark for my favorite restaurant in College

Park. The restaurant is Applebees and its address is: 7242 Baltimore Ave, College Park.

First, I would open Google Earth. I will then type in the address in the Search bar and hit Enter.

The globe will move and eventually display this point at the center of the map (see image

below).

Page 5: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

5

Now, right-click the search result and select Properties.

Now, you can see the coordinates (see image on next page). Write them down and then replace

the coordinates in the KML file you created earlier. Make sure the latitude and longitude match.

Also, don’t forget the “-” sign in front of longitude.

Notice that the coordinates are in DMS (degree-minute-second) format. You will need to

convert them into DD (decimal degree) format.

Page 6: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

6

Also, modify the “Description” in the KML file accordingly.

In the end, you KML should look like the one below. Make sure your user ID is part of the file

name.

After I saved the KML file, I double-click to open it. The result is shown as below.

Page 7: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

7

Better yet, you can share your KML files in a variety of ways: you can e-mail them, host them

locally for sharing, or host them publicly on a Web server.

In this case, we are going to use the Web. Once you've properly configured your server and

shared the URL (address) of your KML files, anyone who's installed Google Earth can view the

KML files hosted on your public web server.

For example, I have posted the KML I created on my website:

http://www.terpconnect.umd.edu/~jma3/GEOG677/Lab2/

Or, you can refer to this example from last year:

http://terpconnect.umd.edu/~dbarker7/html/maryland_gis_-_kml_experiments.html

Your task: You are required to modify the KML file that you created earlier by: (1) first selecting a

location that you like; (2) obtain/convert the coordinates; (3) re-write the part of codes for

Name/Description and coordinates within the KML file. Lastly, you will upload the KML

file to the server and then create a link to it on one of your web pages.

Page 8: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

8

Part III: Using Google Earth to Create KML

You can also create Google Earth to create KML. This is actually easier because it does not

involve coding.

Let’s assume that I want to create an application that can help some people find and get to know

some of the most popular landmarks in DC area. In this example, I will just focus on George

Washington University, the White House, and Washington Monument.

Start Google Earth.

Type in “George Washington University” in the search box and then find the location. Watch out

the Ads added by Google.

Notice that there are already a lot of information about this entity. However, it is good enough.

We can still add something new or different.

Page 9: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

9

Click on Add on the menu bar.

Then fill some information. For example, you can assign a descriptive name for the entity. You

can even write an introduction about this entity.

By default, this entity will be displayed as a pin icon on Google Earth. Obviously, it is not

specific enough. You definitely want to use customized image/icon to represent an entity of your

interest.

Page 10: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

10

To do so, you can open the Properties dialog window.

Click on the push-pin icon next to the name box to open the icon panel.

From the panel list below, you can select any icon you like. However, you want to use the GWU

logo.

Page 11: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

11

So, I would click on “Add Custom Icon…” at the bottom-left corner of the window.

There are two options to add this new icon:

You can search on the Internet to find and save the GWU logo image file on your

location computer.

o You need to be careful when transferring the files to the server. Make sure the

logo image is saved in the appropriate folder so that the KML file can find it on

the server.

You can add the logo image by using URL.

o Make sure you use a link that is reliable, preferably from GWU web site.

o This is a link that I have found. FYI.

http://www.gwu.edu/portal/templates/template0008/YVQUaSfUSaZQdSRUdWX

QZcRQbSWZdfRa/gwuLogo.gif

Page 12: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

12

Now, it’s time to create the KML file.

Note:

Before you export these elements into a KML file, you will need to move them to

Temporary Place folder.

To move them, you can simply drag/release each element into the Temporary Place folder. Then

you will right-click on this folder and choose “Save Place As”. Save it to the same folder where

you store the first KML file on your local computer.

Your task: You will follow the similar procedures and create a KML file for George Washington

University, the White House, and the Washington Monument.

You will need to use the customized images or logos.

You will need to add your own descriptions for these three landmarks. Be sure to include

the author’s name (i.e. you) at the end of description so that I know it’s your work.

Make sure your user ID is part of the file name.

Upload the KML files to the server and then create corresponding links on one of your

web pages.

Page 13: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

13

Part IV: Using ArcGIS to Create KML

There has been some collaboration between Google and ESRI. One of the examples is that KML

can be created with ArcGIS (i.e. ArcMap) and also be displayed by ArcGIS (i.e. ArcGlobe).

To create KML using ArcMap, there are two ways.

1. Creating KML with the Default Conversion Tool in ArcGIS

Add the two data layers – “PG_Hospitals” and “PG_CensusTracts”.

Change the symbology to make the map informative. The census tracts should be displayed

based on the 2000 population.

Now, you are ready to export the data layers to KML files.

Expand Conversion Tools and then select “Layer to KML”.

Double-click to open it.

Page 14: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

14

Select an input layer and then define the output file name and its path.

Note:

The file extension is “.kmz”. KML files are very often distributed as KMZ files, which

are zipped KML files with a “.kmz” extension. When a KMZ file is unzipped, a single

"doc.kml" is found along with any overlay and icon images referenced in the KML. It can

be directly displayed in Google Earth.

Set the Layer Output Scale as “1”.

Click OK. It’s done!

If you double-click it, Google Earth will automatically open and then display this layer at the

center. See image below.

Similarly, you will create a KML file from the “PG_Hospitals” layer.

Aftert the files are created, if you doule-click them, Google Earth will automatically oepn and

display the two layers at the center. See image below.

Page 15: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

15

Your task: You will follow the procedures above and create two KML files (with .kmz extension).

Make sure your user ID is part of the file name. Upload the KML files to the server and

then create a link to each on one of your web pages.

2. Creating KML with the Extension Tool in ArcGIS

One of the drawbacks of using the default conversion tool provided by ArcGIS does not retain

some more advanced symbology effects. So, it is only logic to look for a better way to create

KML files using ArcGIS.

ESRI has a strong user community which has contributed to the development of numerous

resources, tools, data, and information which are mostly free. One of such tools was designed to

convert layers to KML.

Page 16: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

16

First, go to this website:

http://resources.arcgis.com/gallery/file/geoprocessing/details?entryID=B49A0775-1422-2418-

34E1-EEA6DD9851BA

Once there, click on “Download”.

The script that we are going to download is Export_to_KML_V2_5_5. This is the latest version.

After unzip, read the Export_to_KML_documentation.pdf carefully. It needs extra steps to run it

on Win7/Vista and ArcGIS 10.

Important! Before the installation, make sure you turn off ArcGIS.

After you have successfully added the button to your menu bar, you are ready to do the

KML conversion.

Click on the button - , a window will pop up as below. Select the input layer.

In the case of hospitals, I want to have them labeled. So, I would select the attribute – “NAME”

for labeling features. Make sure you save this KML file in the same folder as those previous

KML files. Leave the rest settings as default.

Make sure the output file has your user ID as part of the file name.

Click OK. The KML will be created. At the same time, you have the option to open it in Google

Earth right away.

Page 17: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

17

Your decision!

Now, let’s do something different when we convert the layer – “PG_CensusTracts”.

What is we want display the population in 3D? Sure. It’s similar to Extrusion in ArcScene.

Click on the button - , define the input layer. Then select the attribute – “POP2000” to

represent the height for the features. Check the small box in front of “Extrude features based on

the height”.

Again, make sure you save this KML file in the same folder as those previous KML files. Leave

the rest settings as default.

Make sure the output file has your user ID as part of the file name.

Notice that the file extension is “.kml”, compared to “.kmz” if you use the conversion tool from

ArcToolbox.

Page 18: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

18

You can still do more.

Click on Options button. Another window will open. See image on next page.

You can define the KML layer transparency so that you can partially see through it. You can also

write some description about the data layer.

There are actually more options to explore. You can be creative in this case.

Click OK and OK, it’s done!

Page 19: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

19

After you have created those two KML files, you can open them in Google Earth. The 3D and

labels look great!

Your task: You will follow the procedures above and create two KML files. Upload the KML files to the

server and then create a link to each file on one of your web pages.

Extra Practice:

If you have Google Earth Pro, you may want to try to use the Movie Maker to create an

animation. It should be similar to this example:

http://www.kimberresources.com/properties-google-earth

Page 20: Part I: Google Earth - TerpConnectterpconnect.umd.edu/~mhumber/files/lab_2/GEOG677_Lab2_Long.pdf · Lab Assignment 2 – Web Mapping with Google Earth, KML, and Google Map Due Date:

GEOG677 – Internet GIS University of Maryland at College Park

20

Part V: Creating Customized Web Mapping with Google Map

To be continued in Lab 3. But, you can see a simple example for this exercise from this link:

http://www.terpconnect.umd.edu/~jma3/GEOG677/Lab2/HTMLs/GoogleMap_Test.html

Note:

You have about 100MB storage space on the TerpConnect Server. Those KML files you

will create are small and thus will not have any impact on your storage space on the

server. When you choose customized images, make sure the file sizes are small.

You may want to organize the files that you created in the same folder.

You may want to create the links to those KML files on the same web page. This way,

you will only need to send a single URL.

Don’t wait until the last minute to work on this assignment because there might be not

enough time considering tasks such as software installation.

You cannot directly open KML files in Google Earth by clicking on the link on a web

site. You will need to save them on your local computer first. To download a KML file,

you must right-click it and select "Save Target As..." and then type a file name with the

file extension ".kml". Meanwhile, you will need to set "Save as type" into "All Files".

Otherwise, it will be automatically displayed or saved as XML file.

On the other hand, you have the option to open KMZ files directly in Google Earth when

clicking on the link.

----- THE END -----