navigation.html 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta name="generator" content="Asciidoctor 1.5.4">
  8. <title>Introduction to Marine Navigation</title>
  9. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700">
  10. <style>
  11. /* Asciidoctor default stylesheet | MIT License | http://asciidoctor.org */
  12. /* Remove comment around @import statement below when using as a custom stylesheet */
  13. /*@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700";*/
  14. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
  15. audio,canvas,video{display:inline-block}
  16. audio:not([controls]){display:none;height:0}
  17. [hidden],template{display:none}
  18. script{display:none!important}
  19. html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  20. body{margin:0}
  21. a{background:transparent}
  22. a:focus{outline:thin dotted}
  23. a:active,a:hover{outline:0}
  24. h1{font-size:2em;margin:.67em 0}
  25. abbr[title]{border-bottom:1px dotted}
  26. b,strong{font-weight:bold}
  27. dfn{font-style:italic}
  28. hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
  29. mark{background:#ff0;color:#000}
  30. code,kbd,pre,samp{font-family:monospace;font-size:1em}
  31. pre{white-space:pre-wrap}
  32. q{quotes:"\201C" "\201D" "\2018" "\2019"}
  33. small{font-size:80%}
  34. sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  35. sup{top:-.5em}
  36. sub{bottom:-.25em}
  37. img{border:0}
  38. svg:not(:root){overflow:hidden}
  39. figure{margin:0}
  40. fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  41. legend{border:0;padding:0}
  42. button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
  43. button,input{line-height:normal}
  44. button,select{text-transform:none}
  45. button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
  46. button[disabled],html input[disabled]{cursor:default}
  47. input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
  48. input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  49. input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  50. button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  51. textarea{overflow:auto;vertical-align:top}
  52. table{border-collapse:collapse;border-spacing:0}
  53. *,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  54. html,body{font-size:100%}
  55. body{background:#fff;color:rgba(0,0,0,.8);padding:0;margin:0;font-family:"Noto Serif","DejaVu Serif",serif;font-weight:400;font-style:normal;line-height:1;position:relative;cursor:auto}
  56. a:hover{cursor:pointer}
  57. img,object,embed{max-width:100%;height:auto}
  58. object,embed{height:100%}
  59. img{-ms-interpolation-mode:bicubic}
  60. .left{float:left!important}
  61. .right{float:right!important}
  62. .text-left{text-align:left!important}
  63. .text-right{text-align:right!important}
  64. .text-center{text-align:center!important}
  65. .text-justify{text-align:justify!important}
  66. .hide{display:none}
  67. body{-webkit-font-smoothing:antialiased}
  68. img,object,svg{display:inline-block;vertical-align:middle}
  69. textarea{height:auto;min-height:50px}
  70. select{width:100%}
  71. .center{margin-left:auto;margin-right:auto}
  72. .spread{width:100%}
  73. p.lead,.paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{font-size:1.21875em;line-height:1.6}
  74. .subheader,.admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{line-height:1.45;color:#7a2518;font-weight:400;margin-top:0;margin-bottom:.25em}
  75. div,dl,dt,dd,ul,ol,li,h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6,pre,form,p,blockquote,th,td{margin:0;padding:0;direction:ltr}
  76. a{color:#2156a5;text-decoration:underline;line-height:inherit}
  77. a:hover,a:focus{color:#1d4b8f}
  78. a img{border:none}
  79. p{font-family:inherit;font-weight:400;font-size:1em;line-height:1.6;margin-bottom:1.25em;text-rendering:optimizeLegibility}
  80. p aside{font-size:.875em;line-height:1.35;font-style:italic}
  81. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{font-family:"Open Sans","DejaVu Sans",sans-serif;font-weight:300;font-style:normal;color:#ba3925;text-rendering:optimizeLegibility;margin-top:1em;margin-bottom:.5em;line-height:1.0125em}
  82. h1 small,h2 small,h3 small,#toctitle small,.sidebarblock>.content>.title small,h4 small,h5 small,h6 small{font-size:60%;color:#e99b8f;line-height:0}
  83. h1{font-size:2.125em}
  84. h2{font-size:1.6875em}
  85. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.375em}
  86. h4,h5{font-size:1.125em}
  87. h6{font-size:1em}
  88. hr{border:solid #ddddd8;border-width:1px 0 0;clear:both;margin:1.25em 0 1.1875em;height:0}
  89. em,i{font-style:italic;line-height:inherit}
  90. strong,b{font-weight:bold;line-height:inherit}
  91. small{font-size:60%;line-height:inherit}
  92. code{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;color:rgba(0,0,0,.9)}
  93. ul,ol,dl{font-size:1em;line-height:1.6;margin-bottom:1.25em;list-style-position:outside;font-family:inherit}
  94. ul,ol,ul.no-bullet,ol.no-bullet{margin-left:1.5em}
  95. ul li ul,ul li ol{margin-left:1.25em;margin-bottom:0;font-size:1em}
  96. ul.square li ul,ul.circle li ul,ul.disc li ul{list-style:inherit}
  97. ul.square{list-style-type:square}
  98. ul.circle{list-style-type:circle}
  99. ul.disc{list-style-type:disc}
  100. ul.no-bullet{list-style:none}
  101. ol li ul,ol li ol{margin-left:1.25em;margin-bottom:0}
  102. dl dt{margin-bottom:.3125em;font-weight:bold}
  103. dl dd{margin-bottom:1.25em}
  104. abbr,acronym{text-transform:uppercase;font-size:90%;color:rgba(0,0,0,.8);border-bottom:1px dotted #ddd;cursor:help}
  105. abbr{text-transform:none}
  106. blockquote{margin:0 0 1.25em;padding:.5625em 1.25em 0 1.1875em;border-left:1px solid #ddd}
  107. blockquote cite{display:block;font-size:.9375em;color:rgba(0,0,0,.6)}
  108. blockquote cite:before{content:"\2014 \0020"}
  109. blockquote cite a,blockquote cite a:visited{color:rgba(0,0,0,.6)}
  110. blockquote,blockquote p{line-height:1.6;color:rgba(0,0,0,.85)}
  111. @media only screen and (min-width:768px){h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2}
  112. h1{font-size:2.75em}
  113. h2{font-size:2.3125em}
  114. h3,#toctitle,.sidebarblock>.content>.title{font-size:1.6875em}
  115. h4{font-size:1.4375em}}
  116. table{background:#fff;margin-bottom:1.25em;border:solid 1px #dedede}
  117. table thead,table tfoot{background:#f7f8f7;font-weight:bold}
  118. table thead tr th,table thead tr td,table tfoot tr th,table tfoot tr td{padding:.5em .625em .625em;font-size:inherit;color:rgba(0,0,0,.8);text-align:left}
  119. table tr th,table tr td{padding:.5625em .625em;font-size:inherit;color:rgba(0,0,0,.8)}
  120. table tr.even,table tr.alt,table tr:nth-of-type(even){background:#f8f8f7}
  121. table thead tr th,table tfoot tr th,table tbody tr td,table tr td,table tfoot tr td{display:table-cell;line-height:1.6}
  122. body{tab-size:4}
  123. h1,h2,h3,#toctitle,.sidebarblock>.content>.title,h4,h5,h6{line-height:1.2;word-spacing:-.05em}
  124. h1 strong,h2 strong,h3 strong,#toctitle strong,.sidebarblock>.content>.title strong,h4 strong,h5 strong,h6 strong{font-weight:400}
  125. .clearfix:before,.clearfix:after,.float-group:before,.float-group:after{content:" ";display:table}
  126. .clearfix:after,.float-group:after{clear:both}
  127. *:not(pre)>code{font-size:.9375em;font-style:normal!important;letter-spacing:0;padding:.1em .5ex;word-spacing:-.15em;background-color:#f7f7f8;-webkit-border-radius:4px;border-radius:4px;line-height:1.45;text-rendering:optimizeSpeed}
  128. pre,pre>code{line-height:1.45;color:rgba(0,0,0,.9);font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;font-weight:400;text-rendering:optimizeSpeed}
  129. .keyseq{color:rgba(51,51,51,.8)}
  130. kbd{font-family:"Droid Sans Mono","DejaVu Sans Mono",monospace;display:inline-block;color:rgba(0,0,0,.8);font-size:.65em;line-height:1.45;background-color:#f7f7f7;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em white inset;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 .1em #fff inset;margin:0 .15em;padding:.2em .5em;vertical-align:middle;position:relative;top:-.1em;white-space:nowrap}
  131. .keyseq kbd:first-child{margin-left:0}
  132. .keyseq kbd:last-child{margin-right:0}
  133. .menuseq,.menu{color:rgba(0,0,0,.8)}
  134. b.button:before,b.button:after{position:relative;top:-1px;font-weight:400}
  135. b.button:before{content:"[";padding:0 3px 0 2px}
  136. b.button:after{content:"]";padding:0 2px 0 3px}
  137. p a>code:hover{color:rgba(0,0,0,.9)}
  138. #header,#content,#footnotes,#footer{width:100%;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:.9375em}
  139. #header:before,#header:after,#content:before,#content:after,#footnotes:before,#footnotes:after,#footer:before,#footer:after{content:" ";display:table}
  140. #header:after,#content:after,#footnotes:after,#footer:after{clear:both}
  141. #content{margin-top:1.25em}
  142. #content:before{content:none}
  143. #header>h1:first-child{color:rgba(0,0,0,.85);margin-top:2.25rem;margin-bottom:0}
  144. #header>h1:first-child+#toc{margin-top:8px;border-top:1px solid #ddddd8}
  145. #header>h1:only-child,body.toc2 #header>h1:nth-last-child(2){border-bottom:1px solid #ddddd8;padding-bottom:8px}
  146. #header .details{border-bottom:1px solid #ddddd8;line-height:1.45;padding-top:.25em;padding-bottom:.25em;padding-left:.25em;color:rgba(0,0,0,.6);display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-flow:row wrap;-webkit-flex-flow:row wrap;flex-flow:row wrap}
  147. #header .details span:first-child{margin-left:-.125em}
  148. #header .details span.email a{color:rgba(0,0,0,.85)}
  149. #header .details br{display:none}
  150. #header .details br+span:before{content:"\00a0\2013\00a0"}
  151. #header .details br+span.author:before{content:"\00a0\22c5\00a0";color:rgba(0,0,0,.85)}
  152. #header .details br+span#revremark:before{content:"\00a0|\00a0"}
  153. #header #revnumber{text-transform:capitalize}
  154. #header #revnumber:after{content:"\00a0"}
  155. #content>h1:first-child:not([class]){color:rgba(0,0,0,.85);border-bottom:1px solid #ddddd8;padding-bottom:8px;margin-top:0;padding-top:1rem;margin-bottom:1.25rem}
  156. #toc{border-bottom:1px solid #efefed;padding-bottom:.5em}
  157. #toc>ul{margin-left:.125em}
  158. #toc ul.sectlevel0>li>a{font-style:italic}
  159. #toc ul.sectlevel0 ul.sectlevel1{margin:.5em 0}
  160. #toc ul{font-family:"Open Sans","DejaVu Sans",sans-serif;list-style-type:none}
  161. #toc li{line-height:1.3334;margin-top:.3334em}
  162. #toc a{text-decoration:none}
  163. #toc a:active{text-decoration:underline}
  164. #toctitle{color:#7a2518;font-size:1.2em}
  165. @media only screen and (min-width:768px){#toctitle{font-size:1.375em}
  166. body.toc2{padding-left:15em;padding-right:0}
  167. #toc.toc2{margin-top:0!important;background-color:#f8f8f7;position:fixed;width:15em;left:0;top:0;border-right:1px solid #efefed;border-top-width:0!important;border-bottom-width:0!important;z-index:1000;padding:1.25em 1em;height:100%;overflow:auto}
  168. #toc.toc2 #toctitle{margin-top:0;margin-bottom:.8rem;font-size:1.2em}
  169. #toc.toc2>ul{font-size:.9em;margin-bottom:0}
  170. #toc.toc2 ul ul{margin-left:0;padding-left:1em}
  171. #toc.toc2 ul.sectlevel0 ul.sectlevel1{padding-left:0;margin-top:.5em;margin-bottom:.5em}
  172. body.toc2.toc-right{padding-left:0;padding-right:15em}
  173. body.toc2.toc-right #toc.toc2{border-right-width:0;border-left:1px solid #efefed;left:auto;right:0}}
  174. @media only screen and (min-width:1280px){body.toc2{padding-left:20em;padding-right:0}
  175. #toc.toc2{width:20em}
  176. #toc.toc2 #toctitle{font-size:1.375em}
  177. #toc.toc2>ul{font-size:.95em}
  178. #toc.toc2 ul ul{padding-left:1.25em}
  179. body.toc2.toc-right{padding-left:0;padding-right:20em}}
  180. #content #toc{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  181. #content #toc>:first-child{margin-top:0}
  182. #content #toc>:last-child{margin-bottom:0}
  183. #footer{max-width:100%;background-color:rgba(0,0,0,.8);padding:1.25em}
  184. #footer-text{color:rgba(255,255,255,.8);line-height:1.44}
  185. .sect1{padding-bottom:.625em}
  186. @media only screen and (min-width:768px){.sect1{padding-bottom:1.25em}}
  187. .sect1+.sect1{border-top:1px solid #efefed}
  188. #content h1>a.anchor,h2>a.anchor,h3>a.anchor,#toctitle>a.anchor,.sidebarblock>.content>.title>a.anchor,h4>a.anchor,h5>a.anchor,h6>a.anchor{position:absolute;z-index:1001;width:1.5ex;margin-left:-1.5ex;display:block;text-decoration:none!important;visibility:hidden;text-align:center;font-weight:400}
  189. #content h1>a.anchor:before,h2>a.anchor:before,h3>a.anchor:before,#toctitle>a.anchor:before,.sidebarblock>.content>.title>a.anchor:before,h4>a.anchor:before,h5>a.anchor:before,h6>a.anchor:before{content:"\00A7";font-size:.85em;display:block;padding-top:.1em}
  190. #content h1:hover>a.anchor,#content h1>a.anchor:hover,h2:hover>a.anchor,h2>a.anchor:hover,h3:hover>a.anchor,#toctitle:hover>a.anchor,.sidebarblock>.content>.title:hover>a.anchor,h3>a.anchor:hover,#toctitle>a.anchor:hover,.sidebarblock>.content>.title>a.anchor:hover,h4:hover>a.anchor,h4>a.anchor:hover,h5:hover>a.anchor,h5>a.anchor:hover,h6:hover>a.anchor,h6>a.anchor:hover{visibility:visible}
  191. #content h1>a.link,h2>a.link,h3>a.link,#toctitle>a.link,.sidebarblock>.content>.title>a.link,h4>a.link,h5>a.link,h6>a.link{color:#ba3925;text-decoration:none}
  192. #content h1>a.link:hover,h2>a.link:hover,h3>a.link:hover,#toctitle>a.link:hover,.sidebarblock>.content>.title>a.link:hover,h4>a.link:hover,h5>a.link:hover,h6>a.link:hover{color:#a53221}
  193. .audioblock,.imageblock,.literalblock,.listingblock,.stemblock,.videoblock{margin-bottom:1.25em}
  194. .admonitionblock td.content>.title,.audioblock>.title,.exampleblock>.title,.imageblock>.title,.listingblock>.title,.literalblock>.title,.stemblock>.title,.openblock>.title,.paragraph>.title,.quoteblock>.title,table.tableblock>.title,.verseblock>.title,.videoblock>.title,.dlist>.title,.olist>.title,.ulist>.title,.qlist>.title,.hdlist>.title{text-rendering:optimizeLegibility;text-align:left;font-family:"Noto Serif","DejaVu Serif",serif;font-size:1rem;font-style:italic}
  195. table.tableblock>caption.title{white-space:nowrap;overflow:visible;max-width:0}
  196. .paragraph.lead>p,#preamble>.sectionbody>.paragraph:first-of-type p{color:rgba(0,0,0,.85)}
  197. table.tableblock #preamble>.sectionbody>.paragraph:first-of-type p{font-size:inherit}
  198. .admonitionblock>table{border-collapse:separate;border:0;background:none;width:100%}
  199. .admonitionblock>table td.icon{text-align:center;width:80px}
  200. .admonitionblock>table td.icon img{max-width:none}
  201. .admonitionblock>table td.icon .title{font-weight:bold;font-family:"Open Sans","DejaVu Sans",sans-serif;text-transform:uppercase}
  202. .admonitionblock>table td.content{padding-left:1.125em;padding-right:1.25em;border-left:1px solid #ddddd8;color:rgba(0,0,0,.6)}
  203. .admonitionblock>table td.content>:last-child>:last-child{margin-bottom:0}
  204. .exampleblock>.content{border-style:solid;border-width:1px;border-color:#e6e6e6;margin-bottom:1.25em;padding:1.25em;background:#fff;-webkit-border-radius:4px;border-radius:4px}
  205. .exampleblock>.content>:first-child{margin-top:0}
  206. .exampleblock>.content>:last-child{margin-bottom:0}
  207. .sidebarblock{border-style:solid;border-width:1px;border-color:#e0e0dc;margin-bottom:1.25em;padding:1.25em;background:#f8f8f7;-webkit-border-radius:4px;border-radius:4px}
  208. .sidebarblock>:first-child{margin-top:0}
  209. .sidebarblock>:last-child{margin-bottom:0}
  210. .sidebarblock>.content>.title{color:#7a2518;margin-top:0;text-align:center}
  211. .exampleblock>.content>:last-child>:last-child,.exampleblock>.content .olist>ol>li:last-child>:last-child,.exampleblock>.content .ulist>ul>li:last-child>:last-child,.exampleblock>.content .qlist>ol>li:last-child>:last-child,.sidebarblock>.content>:last-child>:last-child,.sidebarblock>.content .olist>ol>li:last-child>:last-child,.sidebarblock>.content .ulist>ul>li:last-child>:last-child,.sidebarblock>.content .qlist>ol>li:last-child>:last-child{margin-bottom:0}
  212. .literalblock pre,.listingblock pre:not(.highlight),.listingblock pre[class="highlight"],.listingblock pre[class^="highlight "],.listingblock pre.CodeRay,.listingblock pre.prettyprint{background:#f7f7f8}
  213. .sidebarblock .literalblock pre,.sidebarblock .listingblock pre:not(.highlight),.sidebarblock .listingblock pre[class="highlight"],.sidebarblock .listingblock pre[class^="highlight "],.sidebarblock .listingblock pre.CodeRay,.sidebarblock .listingblock pre.prettyprint{background:#f2f1f1}
  214. .literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{-webkit-border-radius:4px;border-radius:4px;word-wrap:break-word;padding:1em;font-size:.8125em}
  215. .literalblock pre.nowrap,.literalblock pre[class].nowrap,.listingblock pre.nowrap,.listingblock pre[class].nowrap{overflow-x:auto;white-space:pre;word-wrap:normal}
  216. @media only screen and (min-width:768px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:.90625em}}
  217. @media only screen and (min-width:1280px){.literalblock pre,.literalblock pre[class],.listingblock pre,.listingblock pre[class]{font-size:1em}}
  218. .literalblock.output pre{color:#f7f7f8;background-color:rgba(0,0,0,.9)}
  219. .listingblock pre.highlightjs{padding:0}
  220. .listingblock pre.highlightjs>code{padding:1em;-webkit-border-radius:4px;border-radius:4px}
  221. .listingblock pre.prettyprint{border-width:0}
  222. .listingblock>.content{position:relative}
  223. .listingblock code[data-lang]:before{display:none;content:attr(data-lang);position:absolute;font-size:.75em;top:.425rem;right:.5rem;line-height:1;text-transform:uppercase;color:#999}
  224. .listingblock:hover code[data-lang]:before{display:block}
  225. .listingblock.terminal pre .command:before{content:attr(data-prompt);padding-right:.5em;color:#999}
  226. .listingblock.terminal pre .command:not([data-prompt]):before{content:"$"}
  227. table.pyhltable{border-collapse:separate;border:0;margin-bottom:0;background:none}
  228. table.pyhltable td{vertical-align:top;padding-top:0;padding-bottom:0;line-height:1.45}
  229. table.pyhltable td.code{padding-left:.75em;padding-right:0}
  230. pre.pygments .lineno,table.pyhltable td:not(.code){color:#999;padding-left:0;padding-right:.5em;border-right:1px solid #ddddd8}
  231. pre.pygments .lineno{display:inline-block;margin-right:.25em}
  232. table.pyhltable .linenodiv{background:none!important;padding-right:0!important}
  233. .quoteblock{margin:0 1em 1.25em 1.5em;display:table}
  234. .quoteblock>.title{margin-left:-1.5em;margin-bottom:.75em}
  235. .quoteblock blockquote,.quoteblock blockquote p{color:rgba(0,0,0,.85);font-size:1.15rem;line-height:1.75;word-spacing:.1em;letter-spacing:0;font-style:italic;text-align:justify}
  236. .quoteblock blockquote{margin:0;padding:0;border:0}
  237. .quoteblock blockquote:before{content:"\201c";float:left;font-size:2.75em;font-weight:bold;line-height:.6em;margin-left:-.6em;color:#7a2518;text-shadow:0 1px 2px rgba(0,0,0,.1)}
  238. .quoteblock blockquote>.paragraph:last-child p{margin-bottom:0}
  239. .quoteblock .attribution{margin-top:.5em;margin-right:.5ex;text-align:right}
  240. .quoteblock .quoteblock{margin-left:0;margin-right:0;padding:.5em 0;border-left:3px solid rgba(0,0,0,.6)}
  241. .quoteblock .quoteblock blockquote{padding:0 0 0 .75em}
  242. .quoteblock .quoteblock blockquote:before{display:none}
  243. .verseblock{margin:0 1em 1.25em 1em}
  244. .verseblock pre{font-family:"Open Sans","DejaVu Sans",sans;font-size:1.15rem;color:rgba(0,0,0,.85);font-weight:300;text-rendering:optimizeLegibility}
  245. .verseblock pre strong{font-weight:400}
  246. .verseblock .attribution{margin-top:1.25rem;margin-left:.5ex}
  247. .quoteblock .attribution,.verseblock .attribution{font-size:.9375em;line-height:1.45;font-style:italic}
  248. .quoteblock .attribution br,.verseblock .attribution br{display:none}
  249. .quoteblock .attribution cite,.verseblock .attribution cite{display:block;letter-spacing:-.025em;color:rgba(0,0,0,.6)}
  250. .quoteblock.abstract{margin:0 0 1.25em 0;display:block}
  251. .quoteblock.abstract blockquote,.quoteblock.abstract blockquote p{text-align:left;word-spacing:0}
  252. .quoteblock.abstract blockquote:before,.quoteblock.abstract blockquote p:first-of-type:before{display:none}
  253. table.tableblock{max-width:100%;border-collapse:separate}
  254. table.tableblock td>.paragraph:last-child p>p:last-child,table.tableblock th>p:last-child,table.tableblock td>p:last-child{margin-bottom:0}
  255. table.tableblock,th.tableblock,td.tableblock{border:0 solid #dedede}
  256. table.grid-all th.tableblock,table.grid-all td.tableblock{border-width:0 1px 1px 0}
  257. table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
  258. table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
  259. table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
  260. table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
  261. table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
  262. table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}
  263. table.frame-all{border-width:1px}
  264. table.frame-sides{border-width:0 1px}
  265. table.frame-topbot{border-width:1px 0}
  266. th.halign-left,td.halign-left{text-align:left}
  267. th.halign-right,td.halign-right{text-align:right}
  268. th.halign-center,td.halign-center{text-align:center}
  269. th.valign-top,td.valign-top{vertical-align:top}
  270. th.valign-bottom,td.valign-bottom{vertical-align:bottom}
  271. th.valign-middle,td.valign-middle{vertical-align:middle}
  272. table thead th,table tfoot th{font-weight:bold}
  273. tbody tr th{display:table-cell;line-height:1.6;background:#f7f8f7}
  274. tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{color:rgba(0,0,0,.8);font-weight:bold}
  275. p.tableblock>code:only-child{background:none;padding:0}
  276. p.tableblock{font-size:1em}
  277. td>div.verse{white-space:pre}
  278. ol{margin-left:1.75em}
  279. ul li ol{margin-left:1.5em}
  280. dl dd{margin-left:1.125em}
  281. dl dd:last-child,dl dd:last-child>:last-child{margin-bottom:0}
  282. ol>li p,ul>li p,ul dd,ol dd,.olist .olist,.ulist .ulist,.ulist .olist,.olist .ulist{margin-bottom:.625em}
  283. ul.unstyled,ol.unnumbered,ul.checklist,ul.none{list-style-type:none}
  284. ul.unstyled,ol.unnumbered,ul.checklist{margin-left:.625em}
  285. ul.checklist li>p:first-child>.fa-square-o:first-child,ul.checklist li>p:first-child>.fa-check-square-o:first-child{width:1em;font-size:.85em}
  286. ul.checklist li>p:first-child>input[type="checkbox"]:first-child{width:1em;position:relative;top:1px}
  287. ul.inline{margin:0 auto .625em auto;margin-left:-1.375em;margin-right:0;padding:0;list-style:none;overflow:hidden}
  288. ul.inline>li{list-style:none;float:left;margin-left:1.375em;display:block}
  289. ul.inline>li>*{display:block}
  290. .unstyled dl dt{font-weight:400;font-style:normal}
  291. ol.arabic{list-style-type:decimal}
  292. ol.decimal{list-style-type:decimal-leading-zero}
  293. ol.loweralpha{list-style-type:lower-alpha}
  294. ol.upperalpha{list-style-type:upper-alpha}
  295. ol.lowerroman{list-style-type:lower-roman}
  296. ol.upperroman{list-style-type:upper-roman}
  297. ol.lowergreek{list-style-type:lower-greek}
  298. .hdlist>table,.colist>table{border:0;background:none}
  299. .hdlist>table>tbody>tr,.colist>table>tbody>tr{background:none}
  300. td.hdlist1,td.hdlist2{vertical-align:top;padding:0 .625em}
  301. td.hdlist1{font-weight:bold;padding-bottom:1.25em}
  302. .literalblock+.colist,.listingblock+.colist{margin-top:-.5em}
  303. .colist>table tr>td:first-of-type{padding:0 .75em;line-height:1}
  304. .colist>table tr>td:last-of-type{padding:.25em 0}
  305. .thumb,.th{line-height:0;display:inline-block;border:solid 4px #fff;-webkit-box-shadow:0 0 0 1px #ddd;box-shadow:0 0 0 1px #ddd}
  306. .imageblock.left,.imageblock[style*="float: left"]{margin:.25em .625em 1.25em 0}
  307. .imageblock.right,.imageblock[style*="float: right"]{margin:.25em 0 1.25em .625em}
  308. .imageblock>.title{margin-bottom:0}
  309. .imageblock.thumb,.imageblock.th{border-width:6px}
  310. .imageblock.thumb>.title,.imageblock.th>.title{padding:0 .125em}
  311. .image.left,.image.right{margin-top:.25em;margin-bottom:.25em;display:inline-block;line-height:0}
  312. .image.left{margin-right:.625em}
  313. .image.right{margin-left:.625em}
  314. a.image{text-decoration:none;display:inline-block}
  315. a.image object{pointer-events:none}
  316. sup.footnote,sup.footnoteref{font-size:.875em;position:static;vertical-align:super}
  317. sup.footnote a,sup.footnoteref a{text-decoration:none}
  318. sup.footnote a:active,sup.footnoteref a:active{text-decoration:underline}
  319. #footnotes{padding-top:.75em;padding-bottom:.75em;margin-bottom:.625em}
  320. #footnotes hr{width:20%;min-width:6.25em;margin:-.25em 0 .75em 0;border-width:1px 0 0 0}
  321. #footnotes .footnote{padding:0 .375em 0 .225em;line-height:1.3334;font-size:.875em;margin-left:1.2em;text-indent:-1.05em;margin-bottom:.2em}
  322. #footnotes .footnote a:first-of-type{font-weight:bold;text-decoration:none}
  323. #footnotes .footnote:last-of-type{margin-bottom:0}
  324. #content #footnotes{margin-top:-.625em;margin-bottom:0;padding:.75em 0}
  325. .gist .file-data>table{border:0;background:#fff;width:100%;margin-bottom:0}
  326. .gist .file-data>table td.line-data{width:99%}
  327. div.unbreakable{page-break-inside:avoid}
  328. .big{font-size:larger}
  329. .small{font-size:smaller}
  330. .underline{text-decoration:underline}
  331. .overline{text-decoration:overline}
  332. .line-through{text-decoration:line-through}
  333. .aqua{color:#00bfbf}
  334. .aqua-background{background-color:#00fafa}
  335. .black{color:#000}
  336. .black-background{background-color:#000}
  337. .blue{color:#0000bf}
  338. .blue-background{background-color:#0000fa}
  339. .fuchsia{color:#bf00bf}
  340. .fuchsia-background{background-color:#fa00fa}
  341. .gray{color:#606060}
  342. .gray-background{background-color:#7d7d7d}
  343. .green{color:#006000}
  344. .green-background{background-color:#007d00}
  345. .lime{color:#00bf00}
  346. .lime-background{background-color:#00fa00}
  347. .maroon{color:#600000}
  348. .maroon-background{background-color:#7d0000}
  349. .navy{color:#000060}
  350. .navy-background{background-color:#00007d}
  351. .olive{color:#606000}
  352. .olive-background{background-color:#7d7d00}
  353. .purple{color:#600060}
  354. .purple-background{background-color:#7d007d}
  355. .red{color:#bf0000}
  356. .red-background{background-color:#fa0000}
  357. .silver{color:#909090}
  358. .silver-background{background-color:#bcbcbc}
  359. .teal{color:#006060}
  360. .teal-background{background-color:#007d7d}
  361. .white{color:#bfbfbf}
  362. .white-background{background-color:#fafafa}
  363. .yellow{color:#bfbf00}
  364. .yellow-background{background-color:#fafa00}
  365. span.icon>.fa{cursor:default}
  366. .admonitionblock td.icon [class^="fa icon-"]{font-size:2.5em;text-shadow:1px 1px 2px rgba(0,0,0,.5);cursor:default}
  367. .admonitionblock td.icon .icon-note:before{content:"\f05a";color:#19407c}
  368. .admonitionblock td.icon .icon-tip:before{content:"\f0eb";text-shadow:1px 1px 2px rgba(155,155,0,.8);color:#111}
  369. .admonitionblock td.icon .icon-warning:before{content:"\f071";color:#bf6900}
  370. .admonitionblock td.icon .icon-caution:before{content:"\f06d";color:#bf3400}
  371. .admonitionblock td.icon .icon-important:before{content:"\f06a";color:#bf0000}
  372. .conum[data-value]{display:inline-block;color:#fff!important;background-color:rgba(0,0,0,.8);-webkit-border-radius:100px;border-radius:100px;text-align:center;font-size:.75em;width:1.67em;height:1.67em;line-height:1.67em;font-family:"Open Sans","DejaVu Sans",sans-serif;font-style:normal;font-weight:bold}
  373. .conum[data-value] *{color:#fff!important}
  374. .conum[data-value]+b{display:none}
  375. .conum[data-value]:after{content:attr(data-value)}
  376. pre .conum[data-value]{position:relative;top:-.125em}
  377. b.conum *{color:inherit!important}
  378. .conum:not([data-value]):empty{display:none}
  379. dt,th.tableblock,td.content,div.footnote{text-rendering:optimizeLegibility}
  380. h1,h2,p,td.content,span.alt{letter-spacing:-.01em}
  381. p strong,td.content strong,div.footnote strong{letter-spacing:-.005em}
  382. p,blockquote,dt,td.content,span.alt{font-size:1.0625rem}
  383. p{margin-bottom:1.25rem}
  384. .sidebarblock p,.sidebarblock dt,.sidebarblock td.content,p.tableblock{font-size:1em}
  385. .exampleblock>.content{background-color:#fffef7;border-color:#e0e0dc;-webkit-box-shadow:0 1px 4px #e0e0dc;box-shadow:0 1px 4px #e0e0dc}
  386. .print-only{display:none!important}
  387. @media print{@page{margin:1.25cm .75cm}
  388. *{-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}
  389. a{color:inherit!important;text-decoration:underline!important}
  390. a.bare,a[href^="#"],a[href^="mailto:"]{text-decoration:none!important}
  391. a[href^="http:"]:not(.bare):after,a[href^="https:"]:not(.bare):after{content:"(" attr(href) ")";display:inline-block;font-size:.875em;padding-left:.25em}
  392. abbr[title]:after{content:" (" attr(title) ")"}
  393. pre,blockquote,tr,img,object,svg{page-break-inside:avoid}
  394. thead{display:table-header-group}
  395. svg{max-width:100%}
  396. p,blockquote,dt,td.content{font-size:1em;orphans:3;widows:3}
  397. h2,h3,#toctitle,.sidebarblock>.content>.title{page-break-after:avoid}
  398. #toc,.sidebarblock,.exampleblock>.content{background:none!important}
  399. #toc{border-bottom:1px solid #ddddd8!important;padding-bottom:0!important}
  400. .sect1{padding-bottom:0!important}
  401. .sect1+.sect1{border:0!important}
  402. #header>h1:first-child{margin-top:1.25rem}
  403. body.book #header{text-align:center}
  404. body.book #header>h1:first-child{border:0!important;margin:2.5em 0 1em 0}
  405. body.book #header .details{border:0!important;display:block;padding:0!important}
  406. body.book #header .details span:first-child{margin-left:0!important}
  407. body.book #header .details br{display:block}
  408. body.book #header .details br+span:before{content:none!important}
  409. body.book #toc{border:0!important;text-align:left!important;padding:0!important;margin:0!important}
  410. body.book #toc,body.book #preamble,body.book h1.sect0,body.book .sect1>h2{page-break-before:always}
  411. .listingblock code[data-lang]:before{display:block}
  412. #footer{background:none!important;padding:0 .9375em}
  413. #footer-text{color:rgba(0,0,0,.6)!important;font-size:.9em}
  414. .hide-on-print{display:none!important}
  415. .print-only{display:block!important}
  416. .hide-for-print{display:none!important}
  417. .show-for-print{display:inherit!important}}
  418. </style>
  419. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  420. <style>
  421. /* Stylesheet for CodeRay to match GitHub theme | MIT License | http://foundation.zurb.com */
  422. /*pre.CodeRay {background-color:#f7f7f8;}*/
  423. .CodeRay .line-numbers{border-right:1px solid #d8d8d8;padding:0 0.5em 0 .25em}
  424. .CodeRay span.line-numbers{display:inline-block;margin-right:.5em;color:rgba(0,0,0,.3)}
  425. .CodeRay .line-numbers strong{color:rgba(0,0,0,.4)}
  426. table.CodeRay{border-collapse:separate;border-spacing:0;margin-bottom:0;border:0;background:none}
  427. table.CodeRay td{vertical-align: top;line-height:1.45}
  428. table.CodeRay td.line-numbers{text-align:right}
  429. table.CodeRay td.line-numbers>pre{padding:0;color:rgba(0,0,0,.3)}
  430. table.CodeRay td.code{padding:0 0 0 .5em}
  431. table.CodeRay td.code>pre{padding:0}
  432. .CodeRay .debug{color:#fff !important;background:#000080 !important}
  433. .CodeRay .annotation{color:#007}
  434. .CodeRay .attribute-name{color:#000080}
  435. .CodeRay .attribute-value{color:#700}
  436. .CodeRay .binary{color:#509}
  437. .CodeRay .comment{color:#998;font-style:italic}
  438. .CodeRay .char{color:#04d}
  439. .CodeRay .char .content{color:#04d}
  440. .CodeRay .char .delimiter{color:#039}
  441. .CodeRay .class{color:#458;font-weight:bold}
  442. .CodeRay .complex{color:#a08}
  443. .CodeRay .constant,.CodeRay .predefined-constant{color:#008080}
  444. .CodeRay .color{color:#099}
  445. .CodeRay .class-variable{color:#369}
  446. .CodeRay .decorator{color:#b0b}
  447. .CodeRay .definition{color:#099}
  448. .CodeRay .delimiter{color:#000}
  449. .CodeRay .doc{color:#970}
  450. .CodeRay .doctype{color:#34b}
  451. .CodeRay .doc-string{color:#d42}
  452. .CodeRay .escape{color:#666}
  453. .CodeRay .entity{color:#800}
  454. .CodeRay .error{color:#808}
  455. .CodeRay .exception{color:inherit}
  456. .CodeRay .filename{color:#099}
  457. .CodeRay .function{color:#900;font-weight:bold}
  458. .CodeRay .global-variable{color:#008080}
  459. .CodeRay .hex{color:#058}
  460. .CodeRay .integer,.CodeRay .float{color:#099}
  461. .CodeRay .include{color:#555}
  462. .CodeRay .inline{color:#000}
  463. .CodeRay .inline .inline{background:#ccc}
  464. .CodeRay .inline .inline .inline{background:#bbb}
  465. .CodeRay .inline .inline-delimiter{color:#d14}
  466. .CodeRay .inline-delimiter{color:#d14}
  467. .CodeRay .important{color:#555;font-weight:bold}
  468. .CodeRay .interpreted{color:#b2b}
  469. .CodeRay .instance-variable{color:#008080}
  470. .CodeRay .label{color:#970}
  471. .CodeRay .local-variable{color:#963}
  472. .CodeRay .octal{color:#40e}
  473. .CodeRay .predefined{color:#369}
  474. .CodeRay .preprocessor{color:#579}
  475. .CodeRay .pseudo-class{color:#555}
  476. .CodeRay .directive{font-weight:bold}
  477. .CodeRay .type{font-weight:bold}
  478. .CodeRay .predefined-type{color:inherit}
  479. .CodeRay .reserved,.CodeRay .keyword {color:#000;font-weight:bold}
  480. .CodeRay .key{color:#808}
  481. .CodeRay .key .delimiter{color:#606}
  482. .CodeRay .key .char{color:#80f}
  483. .CodeRay .value{color:#088}
  484. .CodeRay .regexp .delimiter{color:#808}
  485. .CodeRay .regexp .content{color:#808}
  486. .CodeRay .regexp .modifier{color:#808}
  487. .CodeRay .regexp .char{color:#d14}
  488. .CodeRay .regexp .function{color:#404;font-weight:bold}
  489. .CodeRay .string{color:#d20}
  490. .CodeRay .string .string .string{background:#ffd0d0}
  491. .CodeRay .string .content{color:#d14}
  492. .CodeRay .string .char{color:#d14}
  493. .CodeRay .string .delimiter{color:#d14}
  494. .CodeRay .shell{color:#d14}
  495. .CodeRay .shell .delimiter{color:#d14}
  496. .CodeRay .symbol{color:#990073}
  497. .CodeRay .symbol .content{color:#a60}
  498. .CodeRay .symbol .delimiter{color:#630}
  499. .CodeRay .tag{color:#008080}
  500. .CodeRay .tag-special{color:#d70}
  501. .CodeRay .variable{color:#036}
  502. .CodeRay .insert{background:#afa}
  503. .CodeRay .delete{background:#faa}
  504. .CodeRay .change{color:#aaf;background:#007}
  505. .CodeRay .head{color:#f8f;background:#505}
  506. .CodeRay .insert .insert{color:#080}
  507. .CodeRay .delete .delete{color:#800}
  508. .CodeRay .change .change{color:#66f}
  509. .CodeRay .head .head{color:#f4f}
  510. </style>
  511. </head>
  512. <body class="article toc2 toc-left">
  513. <div id="header">
  514. <div id="toc" class="toc2">
  515. <div id="toctitle">Table of Contents</div>
  516. <ul class="sectlevel0">
  517. <li><a href="#introduction-to-marine-navigation">Introduction to Marine Navigation</a></li>
  518. <li><a href="#chart-projection">Chart Projection</a></li>
  519. </ul>
  520. </div>
  521. </div>
  522. <div id="content">
  523. <div class="paragraph">
  524. <p>This article describes JME&#8217;s mercator projection tool. If you don&#8217;t know what this means, we suggest you begin by reading <a href="http://en.wikisource.org/wiki/The_American_Practical_Navigator">The American Practical Navigator</a> or browsing Wikipedia. If you do know what a Mercator projection is, then our “Introduction to Marine Navigation might serve to refresh your mind.</p>
  525. </div>
  526. <div class="paragraph">
  527. <p><a href="http://en.wikipedia.org/wiki/Latitude">Wikipedia</a> is a source for formulas shown here. Read it. Absorb it.</p>
  528. </div>
  529. <h1 id="introduction-to-marine-navigation" class="sect0">Introduction to Marine Navigation</h1>
  530. <div class="paragraph">
  531. <p><strong>Terms, Conventions and Definitions</strong>
  532. <strong>Charts</strong> are defined as “graphic representations of areas of the earth for use in marine or air navigation whereby nautical charts depict features of particular interest to the marine navigator[1].</p>
  533. </div>
  534. <div class="paragraph">
  535. <p><strong>Prime Meridian</strong> designates the Greenwich meridian as of 1884.</p>
  536. </div>
  537. <div class="paragraph">
  538. <p><strong>Distance</strong> is designated in nautical miles whereby one nautical mile corresponds to one meridian arc minute (1,852 metres) at the equator.</p>
  539. </div>
  540. <div class="paragraph">
  541. <p><strong>Sailing</strong> refers to various mathematical methods for determining course, distance, and position.
  542. <strong>Speed</strong> refers to the rate of motion, or distance per unit of time and is measured in knots (kn). One knot is equal to one nautical mile per hour.</p>
  543. </div>
  544. <div class="paragraph">
  545. <p><strong>Coordinates</strong>
  546. The purpose of coordinates is to define a distinct position on earth. For the purpose of this project, only latitude and longitude are of importance, although the reader should be aware that other coordinate systems exists such as UMT (Universal Transverse Mercator) and UPS (Universal Polar Stereographic).</p>
  547. </div>
  548. <div class="paragraph">
  549. <p>Latitude is the angular distance from the equator, measured northward or southward along a meridian from 0◦ at the equator to 90◦ at the poles[1]. Within aviation and maritime navigation, latitude is designated north (N) or south (S) to indicate the direction of measurement. An equally valid notation designates north (N) to be positive and south (S) to be negative. For example 18◦ N becomes 18 whilst 18◦ S becomes -18.
  550. Longitude is the angular distance between the prime meridian and the meridian of a point on the earth, measured eastward or westward from the prime meridian through 180◦. It is designated east (E) or west (W) to indicate the direction of measurement[1] however similar to angular measurements from the equator, may be expressed in terms of negative (W) and positive (S). For ex- ample 18◦ E becomes 18 whilst 18◦ W becomes -18.
  551. It is worth noting that degrees can be further subdivided into minutes, whereby one degree equals 60 minutes. Minutes in turn are subdivided into seconds whereby each minute equals 60 seconds. Latitude and longitude coordinates are therefore typically specified as degrees (◦), minutes (’) and seconds (”).</p>
  552. </div>
  553. <div class="paragraph">
  554. <p>For example: 1◦ 2’ 3” W meaning 1 degree, 2 minutes and 3 seconds West. This in turn can be translated into decimal notation whereby degrees are expressed as a decimal fraction: therefore 1◦ 2’ 3” W would become -1.034167. Alternatively these angular measurements may be converted to radians (in which case they would be expressed as a signed fraction of π).
  555. The difference of latitude between two places is the angular length of arc of any meridian between their parallels. That is, it is the numerical difference of the latitudes if the places are on the same side of the equator or the sum of the latitudes if the points are on opposite sides of the equator.[1]</p>
  556. </div>
  557. <div class="paragraph">
  558. <p>Similarly, the difference of longitude between two places is the shorter arc of the parallel or the smaller angle at the pole between the meridians of the two places. If both places are on the same side (i.e east or west) of Greenwich, then difference of longitude is the numerical difference of the longitudes of the two places; otherwise the difference of longitude is their numerical sum (unless of course this exceeds 180◦. In that case it is 360◦ minus the sum).</p>
  559. </div>
  560. <div class="paragraph">
  561. <p><span class="image"><img src="images/jme3/tools/globe_lat_long.png" alt="Figure 1: Illustrated latitude (φ) and longitude (λ). Photo courtesy of Wikimedia Inc." height=""></span></p>
  562. </div>
  563. <div class="paragraph">
  564. <p><strong>Meridional Parts</strong>
  565. As described by Bowditch, Meridional parts are ”units of latitude that have been adjusted to compensate for the distortion that results from projecting a three-dimensional globe onto a two-dimensional Mercator chart”.</p>
  566. </div>
  567. <div class="paragraph">
  568. <p><strong>Bearing</strong>
  569. In marine navigation, bearing is defined as ”the direction one object is from another object, usually, the direction of an object from one’s own vessel”. Note that this is not to be confused with the equivalent term within aviation were bearing refers to ”the actual (corrected) compass direction of the forward course of the aircraft.”</p>
  570. </div>
  571. <div class="paragraph">
  572. <p><strong>Heading and Course</strong>
  573. Heading is the direction in which a vessel is pointed and is expressed as degrees from 0 to 359.
  574. Course is the over ground track in which a vessel moves. With wind, water movement and steering error, heading and course are not necessary equal.</p>
  575. </div>
  576. <div class="paragraph">
  577. <p><strong>Mercator Projection</strong>
  578. Mercator projections are a standard within nautical charts an represent rhumb lines (a.k.a loxodromes) as straight segments. A mercator projection is of non- linear scale as it accounts for distortion in latitude as one moves away from the Equator and towards the poles (with the poles being defined as infinity. This notion is illustrated to the right by figure 1.2). These distortions arise from the fact that the earth is an oblate spheriod i.e. a sphere with a flattened top and bottom (the poles). Therefore, as one moves away from the equator, nautical metrics skew to the extend whereby the length of one degree of latitude along the poles covers approximately 1 percent more distance than at the equator.</p>
  579. </div>
  580. <h1 id="chart-projection" class="sect0">Chart Projection</h1>
  581. <div class="paragraph">
  582. <p>A Mercator projection is defined by its meridians and parallels, both of which are expanded at an equal ratio with increasing latitude. This expansion is due to the distortion that results from projecting an oblate spheroid onto a two- dimensional surface (see introductory notes above) and equates to the secant of the latitude in addition to a correction for this distortion. Note that the secant of 90◦ is infinity, and therefore Mercator projections cannot include the poles (thus the mercator projection employed here stops at 85◦ North and South of the equator).</p>
  583. </div>
  584. <div class="paragraph">
  585. <p>Rhumb lines appear as straight lines.</p>
  586. </div>
  587. <div class="paragraph">
  588. <p>The projection calculations are handled by the <code>MapModel2D</code> class, in the case of 2D, and by <code>MapModel3D</code>, in the case of a 3D projection. Fundamentally both projections function in the same manner, with their only real differences being that <code>MapModel3D</code> introduces an extra co-ordinate (z) and the replacement of the <code>toPixel()</code> method with <code>toWorldUnit()</code> which converts a latitude/longitude coordinate object into (x,y,z) world units as opposed to pixel (x,y) coordinates.
  589. The core functionality of the entire system relies on the accurate conversion of latitude/longitude into pixels/world units and vice versa. These conversions are handled by <code>toPixel()</code>, <code>toWorldUnit()</code> and <code>toPosition()</code> respectively.
  590. Note that all sailings used by this class are located inside the NavCalculator class and will be elaborated upon in the next section of this chapter.</p>
  591. </div>
  592. <div class="paragraph">
  593. <p><strong>Minutes per pixel / Minutes per World Unit</strong>
  594. The number of pixels or world units per minute serves as a baseline for all coordinate conversions and is derived by dividing the total number of minutes of longitude composing the chart (i.e. 360 * 60) by the width of the canvas on which to render the projection (aka viewport):
  595. <code>minutesPerPixel = (mapWidthInLongitude * 60) / (double) viewportWidth;</code></p>
  596. </div>
  597. <div class="paragraph">
  598. <p><strong>toPixel</strong>
  599. Unlike commonly assumed, this method is not derived from the inverse Guder- mannian function. Accepting a set of latitude/longitude coordinates encapsulated in a Position object as a parameter, the method returns the equivalent pixel (x, y) encapsulated as a Point object. This conversion can be summarized as follows[2]:</p>
  600. </div>
  601. <div class="olist arabic">
  602. <ol class="arabic">
  603. <li>
  604. <p>Ordered List Item Get the distance between the given position’s longitude coordinate and the chart’s longitude centre.</p>
  605. </li>
  606. <li>
  607. <p>Convert the obtained distance into pixels by dividing it with the number of pixels that are contained within one minute. Refer to it as distanceInPixels.</p>
  608. </li>
  609. <li>
  610. <p>Calculate the x-coordinate by subtracting or adding it to the canvas’ x-centre coordinate (the canvas’ x-centre coordinate being the canvas width di- vided by two) depending on the location of the position itself and the chart’s centre: That is, if the chart is centred west of the prime meridian and if the position to be converted is west of the centre, then the resulting x-coordinate is the difference between the x-centre and the distanceInPixels obtained in step 2 above. If however the centre is West and the position is east of the centre, then the resulting x-coordinate equates to the sum of the x-centre and its dis- tanceInPixels. The opposite is true for an easterly centre and a position west of this centre or an easterly centre and a position east of this centre.</p>
  611. </li>
  612. <li>
  613. <p>Ordered List Item For the y-coordinate, the difference in meridional parts between the chart’s latitude centre and the position’s latitude serves as a baseline. Con- vert the difference to pixels by dividing it by the number of pixels contained</p>
  614. </li>
  615. </ol>
  616. </div>
  617. <div class="paragraph">
  618. <p>within one minute. Refer to it as dmp1.</p>
  619. </div>
  620. <div class="olist arabic">
  621. <ol class="arabic">
  622. <li>
  623. <p>Ordered List Item Similar to step 3 above, calculate the y-coordinate by subtracting or</p>
  624. </li>
  625. </ol>
  626. </div>
  627. <div class="paragraph">
  628. <p>adding it to the canvas’ y-centre coordinate (the canvas’ y-centre being the canvas height divided by two) depending on the location of the position itself and the chart’s centre: That is, if the centre is north and the position is north of the centre, then the resulting y-coordinates equates to the difference between dmp and the y-centre coordinate. If however the centre is north but the position is south of the centre, then the resulting y-coordinate equates to their sum. The opposites are true given that the centre lies in the southern hemisphere.</p>
  629. </div>
  630. <div class="paragraph">
  631. <p>The following converts a latitude/longitude coordinate pair into a JME world-unit vector:</p>
  632. </div>
  633. <div class="listingblock">
  634. <div class="content">
  635. <pre class="CodeRay highlight"><code data-lang="java">----<span class="keyword">try</span> {
  636. <span class="type">int</span> worldWidth = <span class="integer">800</span>;
  637. MapModel3D m = <span class="keyword">new</span> MapModel3D(worldWidth);
  638. Vector3f v = m.toWorldUnit(<span class="keyword">new</span> <span class="predefined-type">Position</span>(-<span class="integer">53</span>, <span class="float">8.0</span>));
  639. } <span class="keyword">catch</span> (InvalidPositionException e) { e.printStackTrace(); }----
  640. To convert world units into latitude/longitude coordinates, use the map model<span class="error">’</span>s toPosition method:</code></pre>
  641. </div>
  642. </div>
  643. <div class="listingblock">
  644. <div class="content">
  645. <pre class="CodeRay highlight"><code data-lang="java">----<span class="keyword">try</span> {
  646. <span class="type">int</span> worldWidth = <span class="integer">800</span>; MapModel3D m = <span class="keyword">new</span> MapModel3D(worldWidth);
  647. <span class="predefined-type">Position</span> pos = m.toPosition(<span class="keyword">new</span> Vector3f(<span class="integer">10</span>, <span class="integer">10</span>, <span class="integer">10</span>));
  648. <span class="predefined-type">System</span>.out.println(<span class="string"><span class="delimiter">&quot;</span><span class="content">Latitude: </span><span class="delimiter">&quot;</span></span> + pos.getLatitude() + <span class="string"><span class="delimiter">&quot;</span><span class="content"> Longitude: </span><span class="delimiter">&quot;</span></span> + pos.getLongitude());
  649. } <span class="keyword">catch</span> (InvalidPositionException e) {
  650. e.printStackTrace();
  651. }----
  652. Navigational calculations are performed inside the <span class="error">`</span>NavCalculator<span class="error">`</span> <span class="type">class</span>.</code></pre>
  653. </div>
  654. </div>
  655. <div class="paragraph">
  656. <p><strong>Mercator Sailing</strong>
  657. Mercator sailing is defined as ’the process of solving problems involving course, distance, difference of latitude and difference of longitude, by considering them in relation to a Mercator chart’[1]. Essentially, this refers to the plotting of a rhumb line2 on a Mercator chart whereby the rhumb line will appear as a straight line. That is, given a constant bearing β north of the rhumb line, longitude λ0 where the line passes the equator, λ1 being any longitude point of the rhumb line, and φ being any latitude point on the rhumb line then its Mercator projection can be derived as:</p>
  658. </div>
  659. <div class="ulist">
  660. <ul>
  661. <li>
  662. <p>x = λ1</p>
  663. </li>
  664. <li>
  665. <p>y = m(λ1 − λ0)</p>
  666. </li>
  667. </ul>
  668. </div>
  669. <div class="paragraph">
  670. <p>where slope m is cot(β), then λ and φ can be expressed as</p>
  671. </div>
  672. <div class="ulist">
  673. <ul>
  674. <li>
  675. <p>x = λ1</p>
  676. </li>
  677. <li>
  678. <p>y = tanh−1(sin(φ) φ = sin−1(tanh(m(λ1 − λ0)))</p>
  679. </li>
  680. </ul>
  681. </div>
  682. <div class="paragraph">
  683. <p>That is, tan(course) = (differenceinlongitude)/(differenceinmeridionalparts)
  684. and distance = (differenceinlatitude/cos(course)) where the difference in meridional parts is defined in terms of a Clarke Spheroid.</p>
  685. </div>
  686. <div class="paragraph">
  687. <p>This is implemented as follows where <code>RLSailing</code> and <code>Position</code> are wrapper classes.</p>
  688. </div>
  689. <div class="listingblock">
  690. <div class="content">
  691. <pre class="CodeRay highlight"><code data-lang="java">----<span class="directive">public</span> RLSailing mercatorSailing(<span class="predefined-type">Position</span> p1, <span class="predefined-type">Position</span> p2) {
  692. <span class="type">double</span> dLat = computeDLat(p1.getLatitude(), p2.getLatitude());
  693. <span class="keyword">if</span> (dLat == <span class="integer">0</span>) {
  694. RLSailing rl = planeSailing(p1, p2); <span class="keyword">return</span> rl;
  695. }
  696. <span class="type">double</span> dLong = computeDLong(p1.getLongitude(), p2.getLongitude());
  697. <span class="type">double</span> dmp = (<span class="type">float</span>) computeDMPClarkeSpheroid(p1.getLatitude(), p2.getLatitude());
  698. trueCourse = (<span class="type">float</span>) <span class="predefined-type">Math</span>.toDegrees(<span class="predefined-type">Math</span>.atan(dLong / dmp));
  699. <span class="type">double</span> degCrs = convertCourse((<span class="type">float</span>) trueCourse, p1, p2);
  700. distance = (<span class="type">float</span>) <span class="predefined-type">Math</span>.abs(dLat / <span class="predefined-type">Math</span>.cos(<span class="predefined-type">Math</span>.toRadians(trueCourse)));</code></pre>
  701. </div>
  702. </div>
  703. <div class="literalblock">
  704. <div class="content">
  705. <pre> RLSailing rl = new RLSailing(degCrs, (float) distance);
  706. trueCourse = rl.getCourse();
  707. return rl;
  708. }----
  709. where _dmp_ refers to the difference in meridional parts.</pre>
  710. </div>
  711. </div>
  712. <div class="paragraph">
  713. <p><strong>Difference in Meridional Parts</strong>
  714. Meridional parts are units of latitude that have been adjusted to compensate for the distortion that results from projecting an oblate spheroid onto a two- dimensional surface.</p>
  715. </div>
  716. <div class="paragraph">
  717. <p>Although other datums (such as WGS 84) are equally valid, the navigation module performs all calculations within the context of the Clarke spheroid of 1880 which has an equatorial radius of 6,378,249.145 meters, a polar radius of 6,356,514.870 meters and an inverse flattening of 293.465 meters.
  718. The meridional part for any latitude L is therefore defined as:
  719. M = 7915.704468 ∗ log(tan(45 + (L/2))) − 23.268932 ∗ (sin(L)) − 0.052500 ∗ (sin(L))3 − 0.000213 ∗ (sin(L))5</p>
  720. </div>
  721. <div class="paragraph">
  722. <p>Where m1 and m2 refer to the meridional parts of the offset and destination point respectively, the difference of meridional parts is calculated as |m1 − m2| if both points are north, or south of the equator or as their sum if one of the points is north and the other south of the equator:</p>
  723. </div>
  724. <div class="listingblock">
  725. <div class="content">
  726. <pre class="CodeRay highlight"><code data-lang="java">----<span class="directive">public</span> <span class="directive">static</span> <span class="type">double</span> computeDMPClarkeSpheroid(<span class="type">double</span> lat1, <span class="type">double</span> lat2) {
  727. <span class="type">double</span> absLat1 = <span class="predefined-type">Math</span>.abs(lat1); <span class="type">double</span> absLat2 = <span class="predefined-type">Math</span>.abs(lat2);
  728. <span class="type">double</span> m1 = (<span class="float">7915.704468</span> * (<span class="predefined-type">Math</span>.log(<span class="predefined-type">Math</span>.tan(<span class="predefined-type">Math</span>.toRadians(<span class="integer">45</span> + (absLat1 / <span class="integer">2</span>)))) / <span class="predefined-type">Math</span>.log(<span class="integer">10</span>)) - <span class="float">23.268932</span> * <span class="predefined-type">Math</span>.sin(<span class="predefined-type">Math</span>.toRadians(absLat1)) - <span class="float">0.052500</span> * <span class="predefined-type">Math</span>.pow(<span class="predefined-type">Math</span>.sin(<span class="predefined-type">Math</span>.toRadians(absLat1)), <span class="integer">3</span>) - <span class="float">0.000213</span> * <span class="predefined-type">Math</span>.pow(<span class="predefined-type">Math</span>.sin(<span class="predefined-type">Math</span>.toRadians(absLat1)), <span class="integer">5</span>));
  729. <span class="type">double</span> m2 = (<span class="float">7915.704468</span> * (<span class="predefined-type">Math</span>.log(<span class="predefined-type">Math</span>.tan(<span class="predefined-type">Math</span>.toRadians(<span class="integer">45</span> + (absLat2 / <span class="integer">2</span>)))) / <span class="predefined-type">Math</span>.log(<span class="integer">10</span>))
  730. - <span class="float">23.268932</span> * <span class="predefined-type">Math</span>.sin(<span class="predefined-type">Math</span>.toRadians(absLat2)) - <span class="float">0.052500</span> * <span class="predefined-type">Math</span>.pow(<span class="predefined-type">Math</span>.sin(<span class="predefined-type">Math</span>.toRadians(absLat2)), <span class="integer">3</span>) - <span class="float">0.000213</span> * <span class="predefined-type">Math</span>.pow(<span class="predefined-type">Math</span>.sin(<span class="predefined-type">Math</span>.toRadians(absLat2)), <span class="integer">5</span>));
  731. <span class="keyword">if</span> ((lat1 &lt;= <span class="integer">0</span> &amp;&amp; lat2 &lt;= <span class="integer">0</span>) || (lat1 &gt; <span class="integer">0</span> &amp;&amp; lat2 &gt; <span class="integer">0</span>)) {
  732. <span class="keyword">return</span> <span class="predefined-type">Math</span>.abs(m1 - m2);
  733. } <span class="keyword">else</span> {
  734. <span class="keyword">return</span> m1 + m2;
  735. }
  736. }----
  737. *Course Conversion*
  738. The conversion of a <span class="predefined-constant">true</span> course to its equivalent compass course (i.e. con- version of <span class="predefined-constant">true</span> course to the targets course over ground (COG) where <span class="error">’</span><span class="predefined-constant">true</span> course<span class="error">’</span> is defined as the course to be steered from <span class="predefined-constant">true</span> north3) as used by the <span class="error">`</span>mercatorSailing<span class="error">`</span> method is achieved by subtracting the course variation from the <span class="predefined-constant">true</span> course, where variation is the angular difference between <span class="predefined-constant">true</span> north and the direction of the Earth<span class="error">’</span>s magnetic field (consequently variation is termed East or West depending on the target<span class="error">’</span>s position relative to <span class="predefined-constant">true</span> north).
  739. Given the <span class="predefined-constant">true</span> course between two positions, the COG is calculated by calling NavCalculator.convertCourse(tc, p1, p2)</code></pre>
  740. </div>
  741. </div>
  742. <div class="paragraph">
  743. <p><strong>Difference in Latitude</strong>
  744. The difference in latitude depends on the hemisphere in which both positions are can be determined by calling <code>NavCalculator.computeDLat(lat1, lat2)</code>.</p>
  745. </div>
  746. <div class="paragraph">
  747. <p><strong>Difference in Longitude</strong>
  748. Similar to the difference in latitude, the difference in longitude depends on which side of the prime meridian both positions are in and can be determined by calling NavCalculator.computeDLong(long1, long2).</p>
  749. </div>
  750. <div class="paragraph">
  751. <p><strong>Bearing</strong>
  752. The direction that one target is from another. Given the latitude of two points (φ0andφ1) and the longitude of two points(λ0andλ1), bearing (θ) is defined as follows:
  753. Let dLon be the difference in longitude of λ0andλ1, then</p>
  754. </div>
  755. <div class="ulist">
  756. <ul>
  757. <li>
  758. <p>x = (sin(dLon) ∗ cos(φ1)</p>
  759. </li>
  760. <li>
  761. <p>y = cos(φ0) ∗ sin(φ1) − sin(φ0) ∗ cos(φ1) ∗ cos(dLon))</p>
  762. </li>
  763. <li>
  764. <p>θ = 2arctan√ θ = atan2(y, x)</p>
  765. </li>
  766. <li>
  767. <p>y</p>
  768. </li>
  769. </ul>
  770. </div>
  771. <div class="paragraph">
  772. <p>x2+y2+x</p>
  773. </div>
  774. <div class="paragraph">
  775. <p>Which can be determined as follows:</p>
  776. </div>
  777. <div class="listingblock">
  778. <div class="content">
  779. <pre class="CodeRay highlight"><code data-lang="java">----<span class="keyword">try</span> {
  780. <span class="type">double</span> bearing = NavCalculator.computeBearing(<span class="keyword">new</span> <span class="predefined-type">Position</span>(-<span class="float">53.6</span>, <span class="float">8.1</span>), <span class="keyword">new</span> <span class="predefined-type">Position</span>(-<span class="integer">53</span>, <span class="integer">8</span>.
  781. } <span class="keyword">catch</span> (InvalidPositionException e) {
  782. e.printStackTrace();
  783. }----
  784. [<span class="integer">1</span>] Nathaniel Bowditch (<span class="integer">1995</span>), The American Practical Navigator,. United States Government, National Ocean Service Publishing.
  785. [<span class="integer">2</span>] Gebruers C., <span class="error">“</span>JMarine</code></pre>
  786. </div>
  787. </div>
  788. </div>
  789. <div id="footer">
  790. <div id="footer-text">
  791. Last updated 2016-05-21 23:44:18 UTC
  792. </div>
  793. </div>
  794. </body>
  795. </html>