Map.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title> Map</title>
  7. <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  8. <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  9. <script src="./build/entry.js"></script>
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  11. <!--[if lt IE 9]>
  12. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  13. <![endif]-->
  14. <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700|Inconsolata,700" rel="stylesheet">
  15. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  16. <link type="text/css" rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night.min.css">
  17. <link type="text/css" rel="stylesheet" href="styles/app.min.css">
  18. <link type="text/css" rel="stylesheet" href="styles/iframe.css">
  19. <link type="text/css" rel="stylesheet" href="">
  20. <script async defer src="https://buttons.github.io/buttons.js"></script>
  21. </head>
  22. <body class="layout small-header">
  23. <div id="stickyNavbarOverlay"></div>
  24. <div class="top-nav">
  25. <div class="inner">
  26. <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  27. <span aria-hidden="true"></span>
  28. <span aria-hidden="true"></span>
  29. <span aria-hidden="true"></span>
  30. </a>
  31. <div class="logo">
  32. </div>
  33. <div class="menu">
  34. <div class="navigation">
  35. <a
  36. href="index.html"
  37. class="link"
  38. >
  39. API Documentation
  40. </a>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <div id="main">
  46. <div
  47. class="sidebar "
  48. id="sidebarNav"
  49. >
  50. <nav>
  51. <h2><a href="index.html">Documentation</a></h2><div class="category"><h3>Interfaces</h3><ul><li><a href="AddLandmarkProps.html">AddLandmarkProps</a></li><li><a href="CommentProps.html">CommentProps</a></li><li><a href="IdToken.html">IdToken</a></li><li><a href="IntroProps.html">IntroProps</a></li><li><a href="Landmark.html">Landmark</a></li><li><a href="LandmarkDetailsProps.html">LandmarkDetailsProps</a></li><li><a href="LandmarkPinProps.html">LandmarkPinProps</a></li><li><a href="LMComment.html">LMComment</a></li><li><a href="ProfileProps.html">ProfileProps</a></li><li><a href="RegisterProps.html">RegisterProps</a></li><li><a href="UserProfile.html">UserProfile</a></li></ul><h3>Components</h3><ul><li><a href="App.html">App</a></li><li><a href="Atlas.html">Atlas</a></li><li><a href="Comment.html">Comment</a></li><li><a href="PrimaryButton.html">PrimaryButton</a></li><li><a href="Profile.html">Profile</a></li><li><a href="SecondaryButton.html">SecondaryButton</a></li></ul><h3>Global</h3><ul><li><a href="global.html#IconStrings">IconStrings</a></li></ul></div><div class="category"><h2>Hooks</h2><h3>Namespaces</h3><ul><li><a href="useAuth.html">useAuth</a></li><li><a href="useLandmarks.html">useLandmarks</a></li><li><a href="useProfile.html">useProfile</a></li></ul></div><div class="category"><h2>Map</h2><h3>Interfaces</h3><ul><li><a href="UserLocation.html">UserLocation</a></li></ul><h3>Components</h3><ul><li><a href="AddLandmark.html">AddLandmark</a></li><li><a href="LandmarkDetails.html">LandmarkDetails</a></li><li><a href="LandmarkPin.html">LandmarkPin</a></li><li><a href="Map.html">Map</a></li></ul></div><div class="category"><h2>Navigation</h2><h3>Components</h3><ul><li><a href="AuthorizedNavigator.html">AuthorizedNavigator</a></li><li><a href="UnauthorizedNavigator.html">UnauthorizedNavigator</a></li></ul><h3><a href="global.html">Global</a></h3></div><div class="category"><h2>Stores</h2><h3>Classes</h3><ul><li><a href="AuthStore.html">AuthStore</a></li></ul></div><div class="category"><h2>Unauthorized</h2><h3>Components</h3><ul><li><a href="Intro.html">Intro</a></li><li><a href="UnauthorizedLayout.html">UnauthorizedLayout</a></li></ul><h3>Components / Registration</h3><ul><li><a href="RegisterMain.html">RegisterMain</a></li></ul></div>
  52. </nav>
  53. </div>
  54. <div class="core" id="main-content-wrapper">
  55. <div class="content">
  56. <header class="page-title">
  57. <p>Components</p>
  58. <h1>Map</h1>
  59. </header>
  60. <section>
  61. <header>
  62. <h2>
  63. &ltMap /&gt
  64. </h2>
  65. </header>
  66. <article>
  67. <div class="container-overview">
  68. <div class='vertical-section'>
  69. <div class="members">
  70. <div class="member">
  71. <div class=name>
  72. <span class="tag">Constructor</span>
  73. </div>
  74. <h4 class="name" id="Map">
  75. <a class="href-link" href="#Map">#</a>
  76. <span class="code-name">
  77. &ltMap /&gt
  78. </span>
  79. </h4>
  80. <div class="description">
  81. <p>The screen component containing the <a href="https://github.com/react-native-maps/react-native-maps">react-native-maps</a> Map and all related functionality.</p>
  82. </div>
  83. <dl class="details">
  84. <p class="tag-source">
  85. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  86. <span>
  87. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line19">line 19</a>
  88. </span>
  89. </p>
  90. </dl>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <div class='vertical-section'>
  96. <h1>Members</h1>
  97. <div class="members">
  98. <div class="member">
  99. <h4 class="name" id="~followUserState">
  100. <a class="href-link" href="#~followUserState">#</a>
  101. <span class='tag'>inner</span>
  102. <span class='tag'>constant</span>
  103. <span class="code-name">
  104. followUserState
  105. </span>
  106. </h4>
  107. <div class="description">
  108. <p>Flag that determines whether the map should focus and follow the user's location.</p>
  109. </div>
  110. <dl class="details">
  111. <p class="tag-source">
  112. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  113. <span>
  114. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line54">line 54</a>
  115. </span>
  116. </p>
  117. </dl>
  118. </div>
  119. <div class="member">
  120. <h4 class="name" id="~lmAddVisibleState">
  121. <a class="href-link" href="#~lmAddVisibleState">#</a>
  122. <span class='tag'>inner</span>
  123. <span class='tag'>constant</span>
  124. <span class="code-name">
  125. lmAddVisibleState
  126. </span>
  127. </h4>
  128. <div class="description">
  129. <p>Holds the visibility state of the <a href="AddLandmark.html">AddLandmark</a> modal.</p>
  130. </div>
  131. <dl class="details">
  132. <p class="tag-source">
  133. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  134. <span>
  135. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line33">line 33</a>
  136. </span>
  137. </p>
  138. </dl>
  139. </div>
  140. <div class="member">
  141. <h4 class="name" id="~lmDetailsEditingState">
  142. <a class="href-link" href="#~lmDetailsEditingState">#</a>
  143. <span class='tag'>inner</span>
  144. <span class='tag'>constant</span>
  145. <span class="code-name">
  146. lmDetailsEditingState
  147. </span>
  148. </h4>
  149. <div class="description">
  150. <p>Flag that toggles whether or not editing is enabled in the <a href="LandmarkDetails.html">LandmarkDetails</a> modal.
  151. The parent Map component has access to it so that it can disable closing the modal on backdrop press when it is enabled.</p>
  152. </div>
  153. <dl class="details">
  154. <p class="tag-source">
  155. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  156. <span>
  157. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line44">line 44</a>
  158. </span>
  159. </p>
  160. </dl>
  161. </div>
  162. <div class="member">
  163. <h4 class="name" id="~lmDetailsVisibleState">
  164. <a class="href-link" href="#~lmDetailsVisibleState">#</a>
  165. <span class='tag'>inner</span>
  166. <span class='tag'>constant</span>
  167. <span class="code-name">
  168. lmDetailsVisibleState
  169. </span>
  170. </h4>
  171. <div class="description">
  172. <p>Holds the visibility state of the <a href="LandmarkDetails.html">LandmarkDetails</a> modal.</p>
  173. </div>
  174. <dl class="details">
  175. <p class="tag-source">
  176. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  177. <span>
  178. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line38">line 38</a>
  179. </span>
  180. </p>
  181. </dl>
  182. </div>
  183. <div class="member">
  184. <h4 class="name" id="~mapRef">
  185. <a class="href-link" href="#~mapRef">#</a>
  186. <span class='tag'>inner</span>
  187. <span class='tag'>constant</span>
  188. <span class="code-name">
  189. mapRef
  190. </span>
  191. </h4>
  192. <div class="description">
  193. <p>Ref that holds the loaded <a href="https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md">MapView</a> instance.</p>
  194. </div>
  195. <dl class="details">
  196. <p class="tag-source">
  197. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  198. <span>
  199. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line61">line 61</a>
  200. </span>
  201. </p>
  202. </dl>
  203. </div>
  204. <div class="member">
  205. <h4 class="name" id="~newLandmarkState">
  206. <a class="href-link" href="#~newLandmarkState">#</a>
  207. <span class='tag'>inner</span>
  208. <span class='tag'>constant</span>
  209. <span class="code-name">
  210. newLandmarkState
  211. </span>
  212. </h4>
  213. <div class="description">
  214. <p>State that contains the new <a href="Landmark.html">Landmark</a> object which is passed down to the <a href="AddLandmark.html">AddLandmark</a> modal.</p>
  215. </div>
  216. <dl class="details">
  217. <p class="tag-source">
  218. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  219. <span>
  220. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line23">line 23</a>
  221. </span>
  222. </p>
  223. </dl>
  224. </div>
  225. <div class="member">
  226. <h4 class="name" id="~selectedLandmarkState">
  227. <a class="href-link" href="#~selectedLandmarkState">#</a>
  228. <span class='tag'>inner</span>
  229. <span class='tag'>constant</span>
  230. <span class="code-name">
  231. selectedLandmarkState
  232. </span>
  233. </h4>
  234. <div class="description">
  235. <p>State that contains the selected <a href="Landmark.html">Landmark</a> object which is passed down to the <a href="LandmarkDetails.html">LandmarkDetails</a> modal.</p>
  236. </div>
  237. <dl class="details">
  238. <p class="tag-source">
  239. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  240. <span>
  241. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line28">line 28</a>
  242. </span>
  243. </p>
  244. </dl>
  245. </div>
  246. <div class="member">
  247. <h4 class="name" id="~userLocationState">
  248. <a class="href-link" href="#~userLocationState">#</a>
  249. <span class='tag'>inner</span>
  250. <span class='tag'>constant</span>
  251. <span class="code-name">
  252. userLocationState
  253. </span>
  254. </h4>
  255. <div class="description">
  256. <p>State that holds a <a href="UserLocation.html">UserLocation</a> object retrieved from location services.</p>
  257. </div>
  258. <dl class="details">
  259. <p class="tag-source">
  260. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  261. <span>
  262. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line49">line 49</a>
  263. </span>
  264. </p>
  265. </dl>
  266. </div>
  267. </div>
  268. </div>
  269. <div class='vertical-section'>
  270. <h1>Methods</h1>
  271. <div class="members">
  272. <div class="member">
  273. <h4 class="name" id=".openAddLandmark">
  274. <a class="href-link" href="#.openAddLandmark">#</a>
  275. <span class='tag'>static</span>
  276. <span class="code-name">
  277. openAddLandmark<span class="signature">()</span><span class="type-signature"></span>
  278. </span>
  279. </h4>
  280. <div class="description">
  281. <p>Opens the <a href="AddLandmark.html">AddLandmark</a> modal when the user creates newLandmarkState by longpressing the map.
  282. Embedded in a <a href="https://reactjs.org/docs/hooks-effect.html">useEffect</a> hook that listens to <code>newLandmarkState</code>.</p>
  283. </div>
  284. <dl class="details">
  285. <p class="tag-source">
  286. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  287. <span>
  288. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line98">line 98</a>
  289. </span>
  290. </p>
  291. </dl>
  292. </div>
  293. <div class="member">
  294. <h4 class="name" id=".requestLocationPermissions">
  295. <a class="href-link" href="#.requestLocationPermissions">#</a>
  296. <span class='tag'>async</span>
  297. <span class='tag'>static</span>
  298. <span class="code-name">
  299. requestLocationPermissions<span class="signature">()</span><span class="type-signature"></span>
  300. </span>
  301. </h4>
  302. <div class="description">
  303. <p>Prompts user to give permission to track their location using <a href="https://docs.expo.dev/versions/latest/sdk/location/">expo-location</a>.
  304. If permission is granted, user location will be retrieved and stored in <code>userLocationState</code>.</p>
  305. </div>
  306. <dl class="details">
  307. <p class="tag-source">
  308. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  309. <span>
  310. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line68">line 68</a>
  311. </span>
  312. </p>
  313. </dl>
  314. </div>
  315. <div class="member">
  316. <h4 class="name" id="~flyToUser">
  317. <a class="href-link" href="#~flyToUser">#</a>
  318. <span class='tag'>inner</span>
  319. <span class="code-name">
  320. flyToUser<span class="signature">()</span><span class="type-signature"></span>
  321. </span>
  322. </h4>
  323. <div class="description">
  324. <p>Animates the map to fly over to and focus on the user's location.</p>
  325. </div>
  326. <dl class="details">
  327. <p class="tag-source">
  328. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  329. <span>
  330. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line123">line 123</a>
  331. </span>
  332. </p>
  333. </dl>
  334. </div>
  335. <div class="member">
  336. <h4 class="name" id="~focusLandmark">
  337. <a class="href-link" href="#~focusLandmark">#</a>
  338. <span class='tag'>inner</span>
  339. <span class="code-name">
  340. focusLandmark<span class="signature">()</span><span class="type-signature"></span>
  341. </span>
  342. </h4>
  343. <div class="description">
  344. <p>Triggered by on a <a href="Landmark.html">Landmark</a> displayed on the map.
  345. Sets <code>selectedLandmark</code> to the pressed <a href="Landmark.html">Landmark</a> object's value and toggles the <a href="LandmarkDetails.html">LandmarkDetails</a> modal.</p>
  346. </div>
  347. <dl class="details">
  348. <p class="tag-source">
  349. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  350. <span>
  351. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line116">line 116</a>
  352. </span>
  353. </p>
  354. </dl>
  355. </div>
  356. <div class="member">
  357. <h4 class="name" id="~promptAddLandmark">
  358. <a class="href-link" href="#~promptAddLandmark">#</a>
  359. <span class='tag'>inner</span>
  360. <span class="code-name">
  361. promptAddLandmark<span class="signature">()</span><span class="type-signature"></span>
  362. </span>
  363. </h4>
  364. <div class="description">
  365. <p>Triggered by long pressing on the map.
  366. Sets <code>newLandmarkState</code> to a skeleton <a href="Landmark.html">Landmark</a> object that only contains the pressed coordinates.
  367. Triggers openAddLandmark via useEffect because the asyncronous nature of useState does not set the coordinates fast enough to toggle the modal directly through this method.</p>
  368. </div>
  369. <dl class="details">
  370. <p class="tag-source">
  371. <a href="src_components_Map.tsx.html" class="button">View Source</a>
  372. <span>
  373. <a href="src_components_Map.tsx.html">src/components/Map.tsx</a>, <a href="src_components_Map.tsx.html#line89">line 89</a>
  374. </span>
  375. </p>
  376. </dl>
  377. </div>
  378. </div>
  379. </div>
  380. </article>
  381. </section>
  382. </div>
  383. <footer class="footer">
  384. <div class="content has-text-centered">
  385. <p>Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.7</a></p>
  386. <p class="sidebar-created-by">
  387. <a href="https://github.com/SoftwareBrothers/better-docs" target="_blank">BetterDocs theme</a> provided with <i class="fas fa-heart"></i> by
  388. <a href="http://softwarebrothers.co" target="_blank">SoftwareBrothers - JavaScript Development Agency</a>
  389. </p>
  390. </div>
  391. </footer>
  392. </div>
  393. <div id="side-nav" class="side-nav">
  394. </div>
  395. </div>
  396. <script src="scripts/app.min.js"></script>
  397. <script>PR.prettyPrint();</script>
  398. <script src="scripts/linenumber.js"> </script>
  399. </body>
  400. </html>