Web Mapping

Description

Just like the last one you did.Do not copy anything,This one is little differentThe instructions and PPT is very detailed Follow the instructions and PPT will be very easy.
Read everything carefully and make sure you understand what you need to do.
No rush , take your time, check the answers before you turn it in.

3 attachmentsSlide 1 of 3attachment_1attachment_1attachment_2attachment_2attachment_3attachment_3

Unformatted Attachment Preview

Lab 7: Web Mapping
http://www.healthmap.org/en/
Lab 7: Create a mash-up
• Mash-up: a web application that combines data
or functionality from multiple sources into a
single integrated application
• KML (Keyhole Markup Language):
computer language read by Google Earth
– Note: a KMZ file is a zipped KML file
Lab 7: Create a mash-up
• Part A: use Google Fusion Tables to collect standard
information about your favorite places in CA
• Part B: style & embed this content (a map) into your
own webpage
• Part C: publish your webmap to share
Example: https://marcemiraval.weebly.com/
Resources
1. Google Drive (you will need a Gmail account!)
2. Google Fusion Tables
3. Google Earth
4. text editor (e.g., Notepad, Sublime or
textmate – for Mac) – No MS Word!
Resources
1. Google Drive (you will need a Gmail account!)
2. Google Fusion Tables
3. Google Earth
4. text editor (e.g., Notepad, Sublime – for
Mac)
Resources
1. Google Drive (you will need a Gmail account!)
2. Google Fusion Tables
3. Google Earth
4. text editor (e.g., Notepad, Sublime – for
Mac)
gedit
Resources
1. Google Drive (you will need a Gmail account!)
2. Google Fusion Tables
3. Google Earth
4. text editor (e.g., Notepad, Sublime – for
Mac)
HyperText Markup Language (HTML)
This text is bold
This text is bold
This text is italic
This text is italic
HyperText Markup Language (HTML)
• To save as an HTML file
o Name with extension .html
o Save as type All Files (*.*)
Reminder!
• All lab materials are on Gauchospace
• Upload 3 files to GauchoSpace:
❏ Lab 7 answer sheet
❏ “index.html”
❏ “lab7.kml”
• Add URL of your webpage to forum (“Lab 7 Maps
Gallery”) on GauchoSpace
• Due date: Monday Dec 4th by 11:00 am
Lab 7: Web Mapping
Name:
Section:
1. Submit the link to your Fusion Table.
2. Submit a working link to your website.
3. Add the URL of your website to GauchoSpace in the forum “Lab 7 Maps Gallery”.
(Click the “New blog post” button and enter your URL as a blog post.)
Just post it here.
4. Upload the following files to GauchoSpace.
· This Answer Sheet
· index.html
·lab7.kml
Geog W12 Maps and Spatial Reasoning
Lab 7: Web 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 use Google Fusion
Tables to create a KML file and a web map, which you will then publish to your own website. The website will
allow users from around the world to easily view your map while the KML file will make it easy to mash up your
data with other data on the internet.
MATERIALS
Google Earth 5.0 or later
Free Google account (sign-up at https://www.google.com/accounts/NewAccount)
 You will be using Google Drive for this lab
 You can sign up for a new free account if you do not want to use your personal Google account
Chrome or Firefox web browser
Free Weebly account (sign-up at https://www.weebly.com/)
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 coding language used for web pages
REQUIRED SUBMITTALS
Submit



the following through GauchoSpace:
Lab 7 Answer Sheet
“index.html”
“lab7.kml”
INTRODUCTION
Mash-Ups in Google Earth. In this lab you will create web-enabled mapping data that will be shared
through a web map and through a Keyhole Markup Language (KML) file for mashing up with other data on
Google Earth. A cartographic mash-up integrates an open application programming interfaces (API) and data
sources to produce results beyond the original intent of the raw source data. For example, Health Map
(http://www.healthmap.org/en/) uses the Google Maps API and data aggregated from approximately 11
Fall 2017
Page 1 of 18
Geog W12 Maps and Spatial Reasoning
sources to map disease outbreaks and emerging public health threats around the world. The result is a new
and distinct Web service that allows real-time monitoring of public health information that was not previously
offered by any single source.
Another example is a GE layer designed by the U.S. Geological Survey (USGS) for mapping earthquakes that
have occurred over the past thirty days:
http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month_age_animated_link.kml
The map uses USGS data overlaid on aerial imagery for mapping recent earthquakes and provides links for
accessing data on individual earthquakes.
Introduction to Fusion Tables. Fusion Tables is a Google application that lets you create web maps and
other forms of data visualization using a simple spreadsheet interface. The spreadsheet interface lets you focus
on creating the content of the map instead of having to worry about writing complicated code for map
rendering and generating KML files. As long as you include some type of location descriptor (such as latitude
and longitude coordinates), you can add almost any type of information to associate with locations you place
into Fusion Tables. Fusion Tables will automatically generate web page code and create a Google Earth KML
file based on the data you provide.
Fall 2017
Page 2 of 18
Geog W12 Maps and Spatial Reasoning
EXERCISE
Exercise Overview. This exercise consists of three parts: A. Data Creation; B. Web Map Design; and
C. Website Publishing. In Data Creation, you will create and design a Fusion Table, populate it with an initial
set of data, and make it accessible anywhere on the internet. In Web Map Design, you will use Fusion Tables
to create a basic web map, customize the display of that map, embed the map in a web page which you will
also create, and generate a KML file for use in Google Earth. Finally, in Website Publishing, you will populate
your Fusion Table with data and create a website that will be used to share your map with the world through
the internet.
PART A: DATA CREATION
The Data Creation part of the lab involves creating and setting up a Fusion Table in Google Drive, entering
some preliminary data, and publishing the table for public access on the internet.
A1: Add the Fusion Tables app to Google Drive (skip this step if already added)

Open and sign in to Google Drive (http://drive.google.com)

Right-click on “My Drive” in the left folders panel and go to New File >> More >>
+ Connect more apps

Search for “Fusion Tables” and click + CONNECT
Fall 2017
Page 3 of 18
Geog W12 Maps and Spatial Reasoning

Click OK and close the dialog box x
A2: Set up a new Fusion Table

Create a new Fusion Table
Fall 2017
o
Right-click on “My Drive” and to New File >> More >> Google Fusion Tables
o
Select Create empty table
Page 4 of 18
Geog W12 Maps and Spatial Reasoning
o
Edit table information:

Click on table title “New Table” to bring up table information options

Edit the following three fields and ignoring the rest:
 Table Name: type “Places I’ve Visited in California”
 Table Description: type “My favorite destinations in California.”
 Uploaded by || Name:
Click Save


Set up your new table
o
Add new columns:

Go to Edit >> Change columns ……………………………….

Click New >> Column to add the columns listed below
(ignore all the existing columns for now)
Column Name
Destination Name
Description
Latitude-col
Longitude-col
Image URL
Image Credit

o
Fall 2017
Type
Text
Text
Location
Location
Text
Text
Format
None
None
None
None
Four line image
None
Click Save
Remove unused columns (REMOVE: Text, Number, Location, Date):

Go to Edit >> Change columns if you accidentally left the Change Column screen

Remove columns by clicking on the x next to each column name
Page 5 of 18
Geog W12 Maps and Spatial Reasoning

Click Save and Save and remove columns
o
Your table should now look like this:
o
Identify columns that contain latitude and longitude data:

Go to Edit >> Change columns

Select “Latitude-col” in column selector panel


Set “Type” property to the following values:
o
Check the box next to “Two column location”
o
Verify that Latitude is matched to “Latitude-col”
o
Verify that Longitude is matched to “Longitude-col”
Note: Longitude-col will automatically update; there is no need to modify
this column.

o
Rename tabs for the table:


Fall 2017
Click Save
Destinations

Select the “Rows 1“ tab

Click the drop-down button for “Rows 1”

Select “Rename” ………………………………………….

Rename tab to “My Destinations”

Click OK
Cards

Select the “Cards 1” tab

Click the drop-down button for “Cards 1”

Select “Rename”
Page 6 of 18
Geog W12 Maps and Spatial Reasoning


Rename tab to “Destination Cards”

Click OK
Make your first data entry
o
Select the My Destinations tab
o
Click Edit >> Add Row
o
Enter the following data:
Field Name
Destination Name
Description
Latitude-col
Longitude-col
Image URL
Image Credit
o
Click “preview…” under the latitude value ……………………..

o
Fall 2017
Data Value
UCSB
A great university located along the
California coast!
34.416929
-119.845991
https://www.ucsb.edu/images/slidesh
ow/location.jpg
https://www.ucsb.edu/images/slidesh
ow/location.jpg
Verify you entered the right coordinates using the preview map
Click Save
Page 7 of 18
Geog W12 Maps and Spatial Reasoning
A3: Make your Fusion Table data available on the internet

Click the Share button

Under “Who has access”:

o
Go to the row “Private – Only you can access” and click “Change…”
o
Select “Public on the web”
o
Click Save
Question 1. Submit the link to your Fusion Table.
o

You will find this in the text box labelled “Link to share”
Click Done
Fall 2017
Page 8 of 18
Geog W12 Maps and Spatial Reasoning
PART B: WEB MAP DESIGN
The Web Map Design part of the lab involves using Fusion Tables to create a basic web map, customizing the
display of that map, embedding the map in a web page that you will also create, and generating a KML file for
use in Google Earth. The Fusion Tables app automatically creates a web map for you the moment you enter
data into the Fusion Table. You can customize this map by specifying the look and content of the pop-up Info
Window (i.e. the information “bubble” that opens when a user clicks a placemark) as well as how it will display
on a web page.
HTML Background. HyperText Markup Language (HTML) is the standard language of web pages on the
internet. The “Hyper” part of HTML means that text in an HTML web page can have advanced capabilities –
compared to plain text – such as linking to other web pages or launching an e-mail editor. The “Text” part of
HTML means that a plain text document underlies every web page, regardless of how much multimedia that
web page may contain. The “Markup” part of HTML describes how HTML works; that is, HTML uses Markup
“tags” which tell the web browser how to display text, images, and other elements within a web page.
If HTML is a language, then web browsers can be seen as interpreters which follow the instructions or
commands written in the plain text HTML language to assemble the different parts of a dynamic web page.
Every web browser on the market – e.g. Chrome, Firefox, Internet Explorer, and Safari – is programmed to
read, understand, and execute commands contained in HTML. HTML tells the web browser where and how to
display different parts of a web page, such as tables, images, videos, buttons, and even web maps.
But there’s a catch. Every web browser has a standard style which it applies to different parts of a web page.
For example, a browser may use “Sans Serif” font in one size for all text and use white as the default
background color. Imagine if this lab instruction sheet were printed in just one font style and all in one font
size without underlines, italics, or any other text decoration. Boring, right? This is where styles come in. Styles
define the look of a web page allowing customization of fonts, colors, margins, image size, borders, and many
other display properties. Styles also have a standard language that all web browsers can interpret; it is called
Cascading Style Sheets (CSS).
HTML (http://www.cs.dartmouth.edu/~afra/courses/4/x10/notes/3.php)
CSS (http://www.w3.org/Style/CSS/Overview.en.html)
B1: Creating and customizing your web map
In this step, you will be sprucing up the pop-up Info Window (aka “balloon”) for your web map by
modifying the underlying HTML code that controls its style. The figure below is a before-and-after
comparison of the Info Window. By the time you’re done with Part B1, your Info Window should look like
the image on the right, with slight variations depending on the browser you are using.
Before
Fall 2017
After
Page 9 of 18
Geog W12 Maps and Spatial Reasoning

Customizing the Info Window
o
Select the Map of Location tab
o
Select Tools >> Change map from the menu bar
o
Under “Feature Map,” click the Change info window… button
o
Make sure you are in the “Custom” tab …………………………………………..
o
Replace all the text with the following code snippet:
{Destination Name}
{Description}
Image Credit: {Image Credit}
WGS84 Coordinates: lat {Latitude-col}, lon {Longitude-col}
o
Click Save
o
NOTE: If you receive an error stating that “Latitude-col” and “Longitude-col” are not
recognized, find each term in the code, delete it, re-type each term exactly as it is shown in
the code snippet, and click Save once more. This appears to be a bug in Fusion Tables.

Customizing your placemark icons
o
(You are still in “Configure map” mode.)
o
Click the Change feature styles… button
o
Under Points | Marker icon | Fixed | Use one icon:

o

Select any icon style for your placemarks
Click Save
Test your Info Window by clicking on the UCSB placemark and make adjustments as necessary. The
Info Window should look like the figure below, with slight variations depending on web browser.

Click Done to exit “Configure map” mode
Fall 2017
Page 10 of 18
Geog W12 Maps and Spatial Reasoning
B2: Create your web page (index.html)
“index.html” is a file name that most web servers will automatically send to web browsers when a user enters
a website. For this exercise, you will use an HTML starter template which you will customize for your own web
page. The purpose of this exercise is not to teach HTML but to get you familiar with HTML code.
NOTE: This part of the lab can be tricky. Ask your TA to check your work to ensure you’re doing this correctly.

Download and edit the HTML code (“index.html”)
o
Download the file “index.html” from GauchoSpace to any location on your computer
o
Open “index.html” in Notepad, Wordpad, BBEdit, TextWrangler, or any plain text editor

WARNING: Do not open in Microsoft Word or Google Docs.

Some computers will show “index” instead of “index.html” depending on how
Windows is set up; opened correctly, the file should look like the image at right:
->

Enter your name inside the name placeholder
o
Look for the name placeholder, delete the entire line of text, and type your name.
->

In Fusion Tables (FT), copy the HTML code for embedding your map in a website
Fall 2017
o
FT: Select the Map of Location tab
o
FT: Adjust the map until the entire state of California is centered & fits in the browser window
o
FT: Select Tools >> Publish from the menu bar
o
FT: Copy the code in the text box labeled “Paste HTML to embed in website”
Page 11 of 18
Geog W12 Maps and Spatial Reasoning

In “index.html,” paste the HTML code inside the map placeholder
o
Look for the map placeholder, delete the entire line of text, and paste the code you just
copied from Fusion Tables
->

Save and close “index.html” in your text editor
o

If saving as a new file, make sure the entire filename is “index.html” and not “index.html.txt”
Check your web page to see if it displays properly
o
The file “index.html” should be saved somewhere on your computer right now.
o
Open “index.html” in any web browser, e.g. Chrome, Firefox, etc., by double-clicking the file.
o
Does everything look right? If not, go back and correct the problems. And remember, you can
always ask your TA for help and clarification – they’re there to help.

NOTE: Don’t worry about the broken image link next to “Click Here”;
we’ll fix this later.
B3: Download and test your KML file

Go to the Map of Location tab in Fusion Tables

Select File >> Download… from the menu bar

Select “KML network link” and click Download
o
Fall 2017
Save this file to any location
Page 12 of 18
Geog W12 Maps and Spatial Reasoning
o
The “KML network link” option will update your map in Google Earth in near real-time as you
make changes in your Fusion Table.

Rename your KML file………………….……………………………………………………
o
Depending on your Windows configuration, you may or may not
see the “.kml” file extension.
o

Do you see the “.kml” file extension?
YES
NO
Rename
“Places I’ve Visited in California.kml” to
“lab7.kml” (case-sensitive)
Rename
“Places I’ve Visited in California”
to “lab7” (case-sensitive)
Open your KML in Google Earth by double-clicking the KML file
o
o
View your Fusion Table data – there’s only one location right now (UCSB):

Single-click “UCSB” in the “Places” panel to open its Info Window

Double-click “UCSB” to automatically zoom in to its location
Mash up your data with other data on the internet


Check and uncheck different boxes in the “Layers” panel (outlined in red below)
Close Google Earth and click Discard when prompted to save the “Temporary Places” folder
Fall 2017
Page 13 of 18
Geog W12 Maps and Spatial Reasoning
PART C: WEBSITE PUBLISHING
The Website Publishing part of the lab involves populating your Fusion Table with data and creating a website
that will be used to share your map with the rest of the world.
C1: Populate your Fusion Table with data

Open your Fusion Table (“Places I’ve Visited in California”) in Google Drive

Select the My Destinations tab

Add five (5) more of your own favorite California destinations with accompanying pictures
o
Note: ONLY use destinations in California. Out-of-state destinations will not receive credit.
o
Click Edit >> Add Row
o
Enter your destination data and click “preview” to verify the location

Include a meaningful description of the destination which is at least a sentence or
phrase. Entries such as “cool,” “groovy,” and “back yard” show a lack of thought and
will not receive credit.

o
See the “Useful Tips” section below for advice on finding coordinates for places
Make sure to include a picture for each location

See the “Useful Tips” section below for advice on adding pictures
o
Click Save and repeat the process
o
You should end up with six destinations: UCSB + five of your own destinations.
C2: Set up Weebly as your website

Open your web browser and navigate to: www.weebly.com

On the top right corner of the page, click LOG IN or SIGN UP to create an account, if you already
do not have one. Log in and Sign-up will require Facebook, Gmail or other email account.

If you encounter a “Do you want to sell online” prompt, click Not Now since a free website account is
required for the purposes of this lab.

Select Blog then any theme you like. For demonstration purposes, the ‘Marcus Reid’’ theme is
selected as indicated in the image below:
Fall 2017
Page 14 of 18
Geog W12 Maps and Spatial Reasoning

Click Start Editing

Use a Subdomain of Weebly.com to create your Free website. Insert a valid user name and click
Continue when you receive a message that the domain is available.

Using your mouse, drag and drop the “Embed Code” icon
from the left panel on the “Build” tab,
to the main web content editor.

Click once on the Click to set custom HTML prompt that is created and select Edit Custom HTML

Open the index.html you created in step B2 in Notepad, Wordpad, BBEdit, TextWrangler, or any
plain text editor, then copy and paste in the Custom HTML prompt highlighted on your webpage
template.

Click the Publish button on the top left of the page Weebly editor to preview your website using the
link provided.

Close out of the ‘Website Published” window to go back to the web content editor.
o
o
Include a meaningful title to your webpage. E.g. Replace the ‘Marcus Reid’ title on the web
content editor with something meaningful such as your name.
Include a link to your KML file by doing the following:
 In the textbox listed on the bottom right under your map on the web editor, replace
“Author” with “KML File”



Highlight the “KML File” text and click the Create Link icon
, then select
and proceed to upload your KML file into your website.
Add a short description such as: “Download the KML and open the file to view in
Google Earth”
From here, you may want to experiment with the other Basic icons on the left panel of the web
content editor to add some aesthetics to your website. Note that most of the text in the web editor
are editable by clicking once on the placeholder text and typing anything you like. You may also want
to change the background picture to one that may personalize your website text more legible. (Hint:
click on existing background photo then select “Edit Background”)

For reference, please click the following link for an example of a GeogW12 lab 7 website:
http://geog12lab7test.weebly.com/
Fall 2017
Page 15 of 18
Geog W12 Maps and Spatial Reasoning
C3: Test your website


Open your website URL in any browser
o
Does the web page display automatically?
o
Can you download the KML from the link?
o
Does the KML file work?
o
Do both the web map and the KML file contain all your data?
NOTE 1: Test your website! Go to your website in any browser. If it automatically loads a map, then
you have successfully published your web map. Also check to see if all your images and links work
properly, and that you are able to download your KML file (make sure it’s the correct one). If your
map fails to display or you cannot download your KML file, then something went wrong . . . ask your
TA for help troubleshooting.

Question 2. Submit a working link to your website. If you want full credit for this
question, SEE NOTE 1.

Question 3. Add the URL of your website to GauchoSpace in the forum “Lab 7 Maps
Gallery”. (Click the “New blog post” button and enter your URL as a blog post.)
– Sign out of Google Drive and Weebly, then clear your browser history. –
Fall 2017
Page 16 of 18
Geog W12 Maps and Spatial Reasoning
LAB SUBMITTALS
Congratulations! You have just created a new live web map published it on your own personal website for
the whole world to see!
Submit the following for Lab 7 on GauchoSpace:
o
o
o
Lab 7 Answer Sheet
 Submit link to Fusion Table
 Submit link to website
 Post website link to GauchoSpace blog
Upload “index.html” file
Upload “lab7.kml” file
Grading Criteria
o
Fusion Table (4 pts)
 1 point each: Table Name, Table Description, Your Name, Two Tab Names
o
Website (2 pts)
 Does your website automatically load on the internet and do all links work (e.g. can
you download your KML file)? SEE C3
o
Source files submitted in GauchoSpace (3 pts)
 “index.html” with your name and embedded web map code (2)
 “lab7.kml” file (1)
o
Map Content (10 pts) – 2 points per map location x 5 locations
 Destination name (0.75 ea) and description (0.75 ea)
 Photo that displays on the web map (0.25 ea)
 Photo credit (0.25 ea)
 Grossly misplaced locations will get 1.5 points deducted
o
Website URL posted to GauchoSpace in “Lab 7 Maps Gallery” (1 pt)
 Click the New blog post button and enter your URL as a blog post
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
Fall 2017
Page 17 of 18
Geog W12 Maps and Spatial Reasoning
USEFUL TIPS
Finding lat-lon coordinates


Google Earth. You can use Google Earth to help you find the coordinates of locations. To view
coordinates of a location in Google Earth, first go to Tools >> Options . In the Show Lat/Long
section under the “3D View” tab, select “Decimal Degrees (DD).” The DD coordinates of any location
you point at with your mouse will show up at the bottom right of the Google Earth window.
Geocoding. You can also find coordinates corresponding to place names or addresses through a
process called geocoding. There are many geocoding services on the internet.
o FFIEC (http://www.ffiec.gov/Geocode/default.aspx) – good for street addresses
o GeoNames (http://www.geonames.org/) – good for place names
o batchgeo (http://batchgeo.com/)
o Remember to convert to decimal degrees
Adding pictures from the internet

Most images found on the internet have URLs attached to them. You can find the URL by right-clicking
on the image and selecting the option to copy the URL for that image. Below are examples from
Chrome, Firefox, and Internet Explorer.
Background Image Credit: Tuxyso / Wikimedia Commons / CC-BY-SA-3.0
Google Chrome


Mozilla Firefox
Internet Explorer
Paste the URL you just copied into the “Image URL” field in Fusion Tables
Copyright and attribution. When sharing images from the internet, make sure you have the rights to
re-use them. Always cite your sources. For this exercise, our image attribution is through the “Image
Credit” field where you can paste a URL or provide other forms of attribution.
o A good place to find free images is through Wikipedia (http://www.wikipedia.org/) and
Wikimedia Commons (http://commons.wikimedia.org/).
o Make sure to follow attribution rules set by the author.
Fall 2017
Page 18 of 18

Purchase answer to see full
attachment

Tags:
1

2

User generated content is uploaded by users for the purposes of learning and should be used following Studypool’s honor code & terms of service.