Kml Basics Chpt 2 Placemarks

8,697 views
8,453 views

Published on

Published in: Education, Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,697
On SlideShare
0
From Embeds
0
Number of Embeds
389
Actions
Shares
0
Downloads
164
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Kml Basics Chpt 2 Placemarks

  1. 1. Keyhole Modeling Language – Chpt. 2 – Placemarks and Balloons Mr. Thomas Cooper Outdoor Technology The Walker School
  2. 2. Placemark Objects <ul><li>Text </li></ul><ul><li>Images </li></ul><ul><li>Links </li></ul><ul><li>Video </li></ul><ul><li>Audio </li></ul><ul><li>Icons </li></ul><ul><li>Navigation </li></ul>
  3. 3. Geometry of Placemarks Point Element Placemarks are delineated with points <Point>, Points contain coordinates (lat., & long.).
  4. 4. Simple Balloon Template Contains Name Description Coordinates
  5. 5. Adding Text Elements Text Elements <p> - paragraph <b> - bold <i> - italics <em> - italics <u> - underline <sub> - subscript <sup> - superscript Must use CDATA Element
  6. 6. Aligning Text <ul><li><p align=&quot;left&quot;> This text will be aligned left</p> </li></ul><ul><li><p align = &quot;center&quot;> This text will be centered </p> </li></ul><ul><li><p align = &quot;right&quot;> This text will be aligned right</p> </li></ul>Networked Learning 2009
  7. 7. Text Header Tags <ul><li><h1>text</h1> - Largest </li></ul><ul><li><h2>text</h2> </li></ul><ul><li><h3>text</h3> </li></ul><ul><li><h4>text</h4> </li></ul><ul><li><h5>text</h5> </li></ul><ul><li><h6>text</h6> - Smallest </li></ul>Networked Learning 2009
  8. 8. Adding Text Color <ul><li><p style=&quot;color:#01133B&quot;> </li></ul>
  9. 9. Working with Images <ul><li>Main Image Tag </li></ul><ul><ul><li><img src=“imagename.jpg” height=“#” width=“#” align=“position”) </li></ul></ul><ul><li>Dimensions <height=n width=n> </li></ul><ul><ul><li>Height and width of image </li></ul></ul><ul><li>Alignment <align=“center”> </li></ul><ul><ul><li>Places image on page, either left, center or right) </li></ul></ul>
  10. 10. Adding Hyper Links
  11. 11. Anatomy of a Tag <ul><li>Open Tags and Closed Tags </li></ul><ul><ul><li>Open Tag <tag> and Close Tag </tag> </li></ul></ul><ul><li>Tags are nested </li></ul><ul><li>Three parts of a tag: (tag, attribute, value) </li></ul><ul><li>Example </li></ul><ul><ul><li>< img src=“filename.jpg” height=100 width=100> </li></ul></ul>tag attribute value
  12. 12. Working with Email Links <ul><li><a href=&quot;mailto:thomas.cooper@thewalkerschool.org?subject=Information Desired Kayaking Trip in Glacier&quot;>email</a> </li></ul>
  13. 13. Working with Lists <ul><li><description> </li></ul><ul><li><![CDATA[ </li></ul><ul><li><b> Equipment List</b> </li></ul><ul><li><ul> unordered list (or) </li></ul><ul><li><ol> ordered list (1., 2., 3.) </li></ul><ul><li><li>list item one </li></ul><ul><li></li>list item two </li></ul><ul><li></ul> or </ol> </li></ul><ul><li>]]> </li></ul><ul><li></description> </li></ul>
  14. 14. Online HTML Tutorials http://www.w3schools.com/htmL/
  15. 15. Layouts with Hard Rules <ul><li><hr> - places a line on the page </li></ul><ul><li><hr width=“#”> - can be used to adjust it to different widths. </li></ul>Divide elements on page with a hard rule.
  16. 16. Creating Hard Rulers in Photoshop <ul><li>Create an image with a width of your placemark and a height of 5 pixels </li></ul><ul><li>Use the paint bucket to color it. </li></ul><ul><li>You can also use the gradient tool to create hard rules that contain 2 colors. </li></ul><ul><li>Upload your hard rule to a photosharing site. </li></ul><ul><li>Copy and paste the URL Address into an image tag <img src= http://www.imagefile.jpg width=“#”> </li></ul>
  17. 17. ARKive Endangered Species Example Basic Table Design Create fancy layouts using tables.
  18. 18. Working with Tables <ul><li><table> </li></ul><ul><li><tr> table row </li></ul><ul><li><td> table cell </li></ul><ul><li><td> table cell in same row </li></ul><ul><li></tr> </li></ul><ul><li><td> table cell </li></ul><ul><li><td>table cell </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Tables require the following tags: <table>, <tr>, and <td>. What would this table look like if you drew it out?
  19. 19. Major Table Elements <ul><li><table> - starts and ends a table </li></ul><ul><ul><li><width=“#”> determines the width of the table </li></ul></ul><ul><ul><li><border=“#”> adds a border around table </li></ul></ul><ul><ul><li><cellspacing=“#”> add space between cells </li></ul></ul><ul><ul><li><cellpadding=“#”> adds space between text and cell border </li></ul></ul><ul><ul><li><bgcolor=“#hexcodenumber”>add color to a table, row or cell </li></ul></ul><ul><li><tr> - table row </li></ul><ul><li><td> - table cell </li></ul><ul><ul><li><colspan=“#”> spans a number of columns </li></ul></ul><ul><ul><li><rowspan=“#”> spans a number of rows </li></ul></ul><ul><ul><li><valign=“top> foces text and images to the top of a cell </li></ul></ul>Not all HTML tags work in Google Earth, as it is based on KML.
  20. 20. Advanced Table Structure <ul><li><table width=“400”> </li></ul><ul><li><tr> table row </li></ul><ul><li><td width=“200”> table cell in first row contains a logo.</td> </li></ul><ul><li><td width=“200”> table cell in same row, contains an image of text.</td> </li></ul><ul><li><tr colspan=2> </li></ul><ul><li><td width=“400”> has text about the species that will span both cells from above row. Use <h2> and <p style=“color:#hexcolornumber”> </td></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td width=“200”> has 2 paragraphs of text</td> </li></ul><ul><li><td width=“200”> has image of endangered species </td></tr> </li></ul><ul><li>… .bottom half of table discussed on next slide </li></ul><ul><li></table> </li></ul>Our more advanced table has the following structure.
  21. 21. Advanced Table Structure (cont.) <ul><li><table width=“400”> </li></ul><ul><li>… top half of table discussed on previous slide </li></ul><ul><li><tr> table row </li></ul><ul><li><td width=“42”> table cell in first row contains a logo.</td> </li></ul><ul><li><td width=“158”> table cell in same row, contains an image of text.</td> </li></ul><ul><li><td width=“42”> table cell in first row contains a logo.</td> </li></ul><ul><li><td width=“158”> table cell in same row, contains an image of text.</td></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td width=“42”> icon </li></ul><ul><li><td width=“158”>web link </li></ul><ul><li><td width=“200” rowspan=“2”>web link and text</td></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td width=“42”> icon</td> </li></ul><ul><li><td width=“158”> weblink</td></tr> </li></ul><ul><li></table> </li></ul>
  22. 22. Aligning Objects in a Table Cell <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td valign=“type&quot;> text </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Text that does not fill a cell will centered vertically by default. However, you can ensure vertical centering by using the code below. <ul><li>Vertical Alignment Types </li></ul><ul><li>valign=“top” </li></ul><ul><li>valign=“middle” </li></ul><ul><li>valign=“bottom” </li></ul>
  23. 23. Adding Style to Your Text <ul><li><p> text </p> </li></ul><ul><li><p style=“color:#hexcode”> adds color to that text.</p> </li></ul><ul><li><font color=“#hexcode”>text </font> </li></ul><ul><li><a style=“color:#hexcode”> adds color to the web link text. </li></ul>
  24. 24. Where to Get Hexadecimal Color Codes http://html-color-codes.com/
  25. 25. Changing Cell Background Color <ul><li><table bgcolor=“#hexcode”> </li></ul><ul><li><tr> </li></ul><ul><li><td>text </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Can be done for the entire table.
  26. 26. Changing Cell Background Color <ul><li><table> </li></ul><ul><li><tr bgcolor=“#hexcode”> </li></ul><ul><li><td>text </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Can be done for one or more rows. <ul><li>In ARKive example… </li></ul><ul><li><table bgcolor=&quot;#color“> </li></ul><ul><li>The 2 cells in the first row contain images created in Photoshop and cover the background color that was set in the table tag. </li></ul><ul><li>In the second row the background color of the cell has been turned to a gray and overrides the table color. </li></ul><ul><li>In the other rows, the cells display the background color set in the table. </li></ul>
  27. 27. Changing Cell Background Color <ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td bgcolor=“#hexcode”>text </td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Can be done for a table cell.
  28. 28. Learn More by Viewing the Code <ul><li>Copy and Paste </li></ul><ul><li>Right click on the layer. </li></ul><ul><li>Choose “Copy”. </li></ul><ul><li>Open NotePad. </li></ul><ul><li>Right click and paste in the code. </li></ul>
  29. 29. Changing Background and Text Color <ul><li><Style> </li></ul><ul><li><BalloonStyle> </li></ul><ul><li><bgColor>ff669999<bgColor> </li></ul><ul><li><textColor>ff660000</textColor> </li></ul><ul><li></BalloonStyle> </li></ul><ul><li></Style> </li></ul>Can’t be done in Google Earth program; must be done in the code. <ul><li>Directions </li></ul><ul><li>Follow the procedures on the previous slide for viewing the code. </li></ul><ul><li>Type CTRL-F to bring up the “Find” command in Notepad. </li></ul><ul><li>Search for <BalloonStyle>; its usually toward the bottom of the document. </li></ul><ul><li>Change the hexcode for <bgColor> </li></ul><ul><li>If its not there, add the tag under <BalloonStyle> as shown to the right. </li></ul>NOTE: The balloons in GE uses KML color codes, which are 8 digits, rather than the HTML hexcodes used by tables and fonts, which are 6 digits. You will need to use a KML color converter to match the colors.
  30. 30. KML Color Conversion http://www.sgrillo.net/kml_color/ Networked Learning 2009
  31. 31. Changing Background and Text Color Main Tags <Style> <BalloonStyle>
  32. 32. Changing Background and Text Color <ul><li><Style> </li></ul><ul><li><BalloonStyle> </li></ul><ul><li><bgColor>ff669999<bgColor> </li></ul><ul><li><textColor>ff660000</textColor> </li></ul><ul><li></BalloonStyle> </li></ul><ul><li></Style> </li></ul>
  33. 33. KML Color Conversion http://www.sgrillo.net/kml_color/
  34. 34. Specifying Colors <ul><li>Directions </li></ul><ul><li>Draw a polygon </li></ul><ul><li>Choose a color through the properties box </li></ul><ul><li>Copy an paste the code for the polygon into NotePad </li></ul><ul><li>Find the hexadecimal code for the color </li></ul>
  35. 35. Omitting Driving Directions <ul><li><Style> </li></ul><ul><li><BalloonStyle> </li></ul><ul><li><text> </li></ul><ul><li><![CDATA[ </li></ul><ul><li>$[name] </li></ul><ul><li> <p> </li></ul><ul><li>$[description] </li></ul><ul><li>]]> </li></ul><ul><li></text> </li></ul><ul><li></BalloonStyle> </li></ul><ul><li></Style> </li></ul>
  36. 36. Changing Icons <ul><li>Open the properties box </li></ul><ul><li>Choose the icon selector </li></ul><ul><li>Choose a different icon </li></ul><ul><li>Change it’s color, size, altitude, and transparency </li></ul>
  37. 37. Adding Custom Icons <ul><li>Search Google Images for icons </li></ul><ul><li>Use Advanced Search for file type png or ico </li></ul><ul><li>Download free ones from Icon Archive </li></ul><ul><li>Download others from iStockPhoto </li></ul><ul><li>Create your own using Fireworks or Photoshop </li></ul>
  38. 38. Uploading Custom Icons <ul><li>Open properties dialogue box </li></ul><ul><li>Click on icon selector </li></ul><ul><li>Click on Add Custom Icon </li></ul><ul><li>Brows your computer </li></ul><ul><li>Select custom icon </li></ul>
  39. 39. Custom Icons with KML <ul><li><IconStyle> </li></ul><ul><ul><li><Icon> </li></ul></ul><ul><ul><ul><li><href>iconfile.png</href> </li></ul></ul></ul><ul><ul><li></Icon> </li></ul></ul><ul><li></IconStyle> </li></ul>
  40. 40. Specifying Viewpoint <ul><li><LookAt> </li></ul><ul><li><longitude></longitude> - distance from the Prime Meridian </li></ul><ul><li><latitude></latitude> - distance from the Equator </li></ul><ul><li><altitude></altitude> - distance from Earth’s surface </li></ul><ul><li><heading></heading> - default = 0; direction of North, South, East or West </li></ul><ul><li><tilt></tilt> - angle between the direction of the LookAt position and the normal surface of the earth. </li></ul><ul><li><range></range> - distance in meters from the point specified by lat., long., and alt. and the LookAt element. </li></ul><ul><li><altitudeMode></altitudeMode> - how the altitude is interpreted. </li></ul><ul><li></LookAt> </li></ul>
  41. 41. Altitude Mode Values <ul><li>clampToGround </li></ul><ul><ul><li>Indicates to ignore the <altitude> specification and place the LookAt position on the ground. </li></ul></ul><ul><li>relativeToGround </li></ul><ul><ul><li>Interprets the <altitude> as a value in meters above the ground. </li></ul></ul><ul><li>Absolute </li></ul><ul><ul><li>Interprets the <altitude> as a value in meters. </li></ul></ul>
  42. 42. Flying to a Placemark <ul><li><Folder> </li></ul><ul><li><Placemark id=“home(1 st )”> </li></ul><ul><li><a href=“#lunch;balloonFlyto”>Click here</a> to go to the lunch spot. </li></ul><ul><li><a href=“#journeyEnd;balloonFlyto”> Click here </a> to go to the end of the tour. </Placemark> </li></ul><ul><li><Placemark id=“lunch(2 nd )”> </li></ul><ul><li><a href=“#rest;balloonFlyto”>Click here</a> to go to the rest spot. </li></ul><ul><li><a href=“#journeyEnd;balloonFlyto”> Click here </a> to go to the end of the tour. </li></ul><ul><li></Placemark> </li></ul><ul><li><Placemark id=“rest(3 rd )”> </li></ul><ul><li><a href=“#journeyEnd;balloonFlyto”> Click here </a> to go to the end of the tour. </li></ul><ul><li></Placemark> </li></ul><ul><li><Placemark id=“journeyEnd(4 th )”> </li></ul><ul><li><a href=“#home;balloonFlyto”> Click here </a> to go to the beginning of the tour. </li></ul><ul><li></Placemark> </li></ul><ul><li></Folder> </li></ul>
  43. 43. Feature Anchors <ul><li>;flyto – Fly to the placemark. </li></ul><ul><li>;balloon – Open the placemark’s balloon and fly to the placemark. </li></ul><ul><li>;balloonFlyto – Open the placemark’s balloon and fly to the placemark. </li></ul>
  44. 44. Determining Visibility <ul><li><Placemark> </li></ul><ul><li><visibility>1</visibility> - renders the placemark(s) visible when loaded </li></ul><ul><li><visibility>0</visibility> - does not render the placemark(s) when loaded </li></ul><ul><li></Placemark> </li></ul>
  45. 45. Adding a Snippet <ul><li><Placemark> </li></ul><ul><li><Snippet maxLines=“#”>1</Snippet> - renders the placemark(s) visible when loaded </li></ul><ul><li></Placemark> </li></ul>
  46. 46. Challenge <ul><li>Do some further research into one explorer or extreme sportsman that interested you and create a placemark using only Notepad. Make sure to add text, images, links to your online references, museums, and also use the various style elements, custom icons and other tags we’ve covered. </li></ul>

×