Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kml Basics Chpt 2 Placemarks

0 views

Published on

Published in: Education, Technology, Design

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>

×