Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr

Last class The Google Earth User Interface Creating a basic Placemark/Thumbtack

Class #03 Clouds KML in Google Maps HTML/KML detail Color/Style Lines

Course time change? Can we move the class to 1:00-2:20?

How many people have used Google Earth before this class?

Course Web Pages Google Earth: – Human Perception for Information Display: –

Jing

Camstudio

Cloud Demo clouds-monthly-sequences-nl.kml

KML on Google Maps

Last time in Google Earth…

If we create the proper URL, KML can appear in google maps ccom.unh.edu/~schwehr/Classes/2007 VisCourse/lectures/02/sunrise.kmlhttp://maps.google.com/?q= ccom.unh.edu/~schwehr/Classes/2007 VisCourse/lectures/02/sunrise.kml

The picture does not work Sunrise over the Chase Ocean Engineering parking lot.

Only have to keep track of one file with a kmz

Google Earth KML is XML

XML Header - “XML Declaration” – –XML character encoding –UTF-8 for English characters

Comments Anything within Comments do not nest

xmllint can tell us that something is wrong

XML Tags Must be balanced –Start: –End: <--- “/” marks the end –Can contain other tags, text, mixed some text text1 text2 text3 Can not mix tags –Wrong:

XML documents must have a single “root” node Oops…

Empty tags have a shorthand These are equivalent: –

Capitalization matters for XML

Tags can have Attributes Attributes are quoted text - termed “value” Empty tags can also have attributes –

Basic XHMTL - Root node for the document - Contains the contents of the document Headers,, and Links Tables

HTML versus XHTML HyperText Markup Language HTML is SMGL ( Much more complicated than XML) –capitalization does not matter –tags may be unbalanced XHTML is XML

For Google Earth Focus on what would be in the body of XHTML

XHTML Text Module

Paragraphs Each paragraph of text is wrapped in a tag HTML ignores new lines. Blank lines do not give you a new paragraph.

Headers … provide headers that are progressively smaller

and Marking sections of text

Links Text or Image

Images

Image with a link

Tables The most complicated XHTML that you will do in this class

A table

Table Tags - defines a table - table header - contains one row - one table cell within a row

Table Attributes border=“1” - gives the lines bgcolor=“orange”

HTML Special Character Codes There are numeric and text codes for characters Allows for characters not on the keyboard or things that interfere with HTML or XML. e.g. “>” can be written “>” or “>”

Character codes

This leaves out many HTML features! CSS - Cascading Style Sheets Javascript/DHTML Embedded objects (movies and others) AJAX All kinds of server side fun –Servlets –Mod-python/mod-perl –And many, many more

Walk through basic KML tags

What is the entry for Document?

Placemark

Point

coordinates

CDATA to wrap HTML Does this look like fun?

Passing HTML straight through to Google Earth causes trouble!

With CDATA, HTML can stay HTML

Making a table in HTML

Putting that table into KML

Color/Style

Color

View Tag

Using a web browser to display XML/KML

Lines

Another Demo (if time permits)

Additional Notes on Grading of Assignment #01 HTML content must be valid XML –If the text is wrapped in your text, then it passes xmllint –Do not worry about the KML formatting this time. It is okay to use the Google Earth dialog to create your placemarks. –Your KMZ must work on any computer without internet. Double check that your images are in the kmz

Next Class Review Color and Style. More details Photo overlays Polygons