@mappedin/react-native-sdk 3.4.4 → 4.0.4-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/README.md +12 -8
  2. package/dist/index.d.ts +5753 -0
  3. package/dist/index.js +3552 -0
  4. package/dist/index.js.map +7 -0
  5. package/package.json +26 -22
  6. package/CHANGELOG.md +0 -42
  7. package/dist/get-venue/package.json +0 -44
  8. package/dist/get-venue/src/Mappedin.API.types.d.ts +0 -203
  9. package/dist/get-venue/src/Mappedin.API.types.d.ts.map +0 -1
  10. package/dist/get-venue/src/Mappedin.API.types.js +0 -4
  11. package/dist/get-venue/src/Mappedin.d.ts +0 -256
  12. package/dist/get-venue/src/Mappedin.d.ts.map +0 -1
  13. package/dist/get-venue/src/Mappedin.js +0 -248
  14. package/dist/get-venue/src/Mappedin.types.d.ts +0 -30
  15. package/dist/get-venue/src/Mappedin.types.d.ts.map +0 -1
  16. package/dist/get-venue/src/Mappedin.types.js +0 -1
  17. package/dist/get-venue/src/MappedinCategory.d.ts +0 -48
  18. package/dist/get-venue/src/MappedinCategory.d.ts.map +0 -1
  19. package/dist/get-venue/src/MappedinCategory.js +0 -87
  20. package/dist/get-venue/src/MappedinCoordinate.d.ts +0 -42
  21. package/dist/get-venue/src/MappedinCoordinate.d.ts.map +0 -1
  22. package/dist/get-venue/src/MappedinCoordinate.js +0 -43
  23. package/dist/get-venue/src/MappedinCoordinate.test.d.ts +0 -2
  24. package/dist/get-venue/src/MappedinCoordinate.test.d.ts.map +0 -1
  25. package/dist/get-venue/src/MappedinCoordinate.test.js +0 -19
  26. package/dist/get-venue/src/MappedinDestinationSet.d.ts +0 -8
  27. package/dist/get-venue/src/MappedinDestinationSet.d.ts.map +0 -1
  28. package/dist/get-venue/src/MappedinDestinationSet.js +0 -6
  29. package/dist/get-venue/src/MappedinDirections.d.ts +0 -56
  30. package/dist/get-venue/src/MappedinDirections.d.ts.map +0 -1
  31. package/dist/get-venue/src/MappedinDirections.js +0 -42
  32. package/dist/get-venue/src/MappedinEvent.d.ts +0 -30
  33. package/dist/get-venue/src/MappedinEvent.d.ts.map +0 -1
  34. package/dist/get-venue/src/MappedinEvent.js +0 -67
  35. package/dist/get-venue/src/MappedinJSONScene.d.ts +0 -9
  36. package/dist/get-venue/src/MappedinJSONScene.d.ts.map +0 -1
  37. package/dist/get-venue/src/MappedinJSONScene.js +0 -24
  38. package/dist/get-venue/src/MappedinLocation.d.ts +0 -89
  39. package/dist/get-venue/src/MappedinLocation.d.ts.map +0 -1
  40. package/dist/get-venue/src/MappedinLocation.js +0 -223
  41. package/dist/get-venue/src/MappedinLocationRankings.d.ts +0 -12
  42. package/dist/get-venue/src/MappedinLocationRankings.d.ts.map +0 -1
  43. package/dist/get-venue/src/MappedinLocationRankings.js +0 -26
  44. package/dist/get-venue/src/MappedinLocationState.d.ts +0 -14
  45. package/dist/get-venue/src/MappedinLocationState.d.ts.map +0 -1
  46. package/dist/get-venue/src/MappedinLocationState.js +0 -33
  47. package/dist/get-venue/src/MappedinMap.d.ts +0 -64
  48. package/dist/get-venue/src/MappedinMap.d.ts.map +0 -1
  49. package/dist/get-venue/src/MappedinMap.js +0 -215
  50. package/dist/get-venue/src/MappedinMapGroup.d.ts +0 -23
  51. package/dist/get-venue/src/MappedinMapGroup.d.ts.map +0 -1
  52. package/dist/get-venue/src/MappedinMapGroup.js +0 -62
  53. package/dist/get-venue/src/MappedinNavigatable.d.ts +0 -38
  54. package/dist/get-venue/src/MappedinNavigatable.d.ts.map +0 -1
  55. package/dist/get-venue/src/MappedinNavigatable.js +0 -82
  56. package/dist/get-venue/src/MappedinNode.d.ts +0 -65
  57. package/dist/get-venue/src/MappedinNode.d.ts.map +0 -1
  58. package/dist/get-venue/src/MappedinNode.js +0 -153
  59. package/dist/get-venue/src/MappedinPolygon.d.ts +0 -60
  60. package/dist/get-venue/src/MappedinPolygon.d.ts.map +0 -1
  61. package/dist/get-venue/src/MappedinPolygon.js +0 -164
  62. package/dist/get-venue/src/MappedinRankings.d.ts +0 -32
  63. package/dist/get-venue/src/MappedinRankings.d.ts.map +0 -1
  64. package/dist/get-venue/src/MappedinRankings.js +0 -46
  65. package/dist/get-venue/src/MappedinTheme.d.ts +0 -15
  66. package/dist/get-venue/src/MappedinTheme.d.ts.map +0 -1
  67. package/dist/get-venue/src/MappedinTheme.js +0 -41
  68. package/dist/get-venue/src/MappedinVenue.d.ts +0 -47
  69. package/dist/get-venue/src/MappedinVenue.d.ts.map +0 -1
  70. package/dist/get-venue/src/MappedinVenue.js +0 -61
  71. package/dist/get-venue/src/MappedinVortex.d.ts +0 -26
  72. package/dist/get-venue/src/MappedinVortex.d.ts.map +0 -1
  73. package/dist/get-venue/src/MappedinVortex.js +0 -54
  74. package/dist/get-venue/src/default-things.d.ts +0 -14
  75. package/dist/get-venue/src/default-things.d.ts.map +0 -1
  76. package/dist/get-venue/src/default-things.js +0 -60
  77. package/dist/get-venue/src/fixtures/MappedinDemoMall.json +0 -1
  78. package/dist/get-venue/src/index.cjs.js +0 -16
  79. package/dist/get-venue/src/index.d.ts +0 -65
  80. package/dist/get-venue/src/index.d.ts.map +0 -1
  81. package/dist/get-venue/src/index.js +0 -16
  82. package/dist/get-venue/src/utils.d.ts +0 -15
  83. package/dist/get-venue/src/utils.d.ts.map +0 -1
  84. package/dist/get-venue/src/utils.js +0 -188
  85. package/dist/get-venue/tsconfig.docs.json +0 -7
  86. package/dist/get-venue/tsconfig.isomorphic.json +0 -20
  87. package/dist/get-venue/tsconfig.isomorphic.tsbuildinfo +0 -2262
  88. package/dist/get-venue/tsconfig.json +0 -19
  89. package/dist/get-venue/tsconfig.tsbuildinfo +0 -2758
  90. package/dist/sdk/src/MappedinController.d.ts +0 -45
  91. package/dist/sdk/src/MappedinController.d.ts.map +0 -1
  92. package/dist/sdk/src/MappedinController.js +0 -1
  93. package/dist/sdk/src/MiMapView.d.ts +0 -80
  94. package/dist/sdk/src/MiMapView.d.ts.map +0 -1
  95. package/dist/sdk/src/MiMapView.element.d.ts +0 -8
  96. package/dist/sdk/src/MiMapView.element.d.ts.map +0 -1
  97. package/dist/sdk/src/MiMapView.element.js +0 -5
  98. package/dist/sdk/src/MiMapView.element.web.d.ts +0 -6
  99. package/dist/sdk/src/MiMapView.element.web.d.ts.map +0 -1
  100. package/dist/sdk/src/MiMapView.element.web.js +0 -1
  101. package/dist/sdk/src/MiMapView.js +0 -1
  102. package/dist/sdk/src/MiMapView.store.d.ts +0 -197
  103. package/dist/sdk/src/MiMapView.store.d.ts.map +0 -1
  104. package/dist/sdk/src/MiMapView.store.js +0 -1
  105. package/dist/sdk/src/MiMapView.store.types.d.ts +0 -202
  106. package/dist/sdk/src/MiMapView.store.types.d.ts.map +0 -1
  107. package/dist/sdk/src/MiMapView.store.types.js +0 -1
  108. package/dist/sdk/src/MiMiniMap.d.ts +0 -31
  109. package/dist/sdk/src/MiMiniMap.d.ts.map +0 -1
  110. package/dist/sdk/src/MiMiniMap.js +0 -3
  111. package/dist/sdk/src/MiMiniMap.store.d.ts +0 -22
  112. package/dist/sdk/src/MiMiniMap.store.d.ts.map +0 -1
  113. package/dist/sdk/src/MiMiniMap.store.js +0 -1
  114. package/dist/sdk/src/assets/index.html.d.ts +0 -3
  115. package/dist/sdk/src/assets/index.html.d.ts.map +0 -1
  116. package/dist/sdk/src/assets/index.html.js +0 -1
  117. package/dist/sdk/src/index.d.ts +0 -186
  118. package/dist/sdk/src/index.d.ts.map +0 -1
  119. package/dist/sdk/src/index.js +0 -1
  120. package/dist/sdk/src/pub-sub.d.ts +0 -27
  121. package/dist/sdk/src/pub-sub.d.ts.map +0 -1
  122. package/dist/sdk/src/pub-sub.js +0 -1
  123. package/dist/sdk/src/utils.d.ts +0 -18
  124. package/dist/sdk/src/utils.d.ts.map +0 -1
  125. package/dist/sdk/src/utils.js +0 -1
  126. package/dist/sdk/tsconfig.build.tsbuildinfo +0 -6928
  127. package/dist/types/src/Mappedin.bridge.events.d.ts +0 -74
  128. package/dist/types/src/Mappedin.bridge.events.d.ts.map +0 -1
  129. package/dist/types/src/Mappedin.bridge.events.js +0 -1
  130. package/dist/types/src/index.d.ts +0 -4
  131. package/dist/types/src/index.d.ts.map +0 -1
  132. package/dist/types/src/index.js +0 -1
  133. package/dist/types/src/navigator.d.ts +0 -78
  134. package/dist/types/src/navigator.d.ts.map +0 -1
  135. package/dist/types/src/navigator.js +0 -1
  136. package/dist/types/tsconfig.tsbuildinfo +0 -1819
  137. package/dist/types_mappedin__mappedin-js/tsconfig.tsbuildinfo +0 -1781
  138. package/dist/types_mappedin__mappedin-js/types.d.ts +0 -205
  139. package/dist/types_mappedin__mappedin-js/types.d.ts.map +0 -1
  140. package/dist/types_mappedin__mappedin-js/types.js +0 -53
  141. package/docs/assets/css/main.css +0 -2660
  142. package/docs/assets/images/icons.png +0 -0
  143. package/docs/assets/images/icons@2x.png +0 -0
  144. package/docs/assets/images/widgets.png +0 -0
  145. package/docs/assets/images/widgets@2x.png +0 -0
  146. package/docs/assets/js/main.js +0 -248
  147. package/docs/assets/js/search.js +0 -1
  148. package/docs/classes/mappedin.html +0 -560
  149. package/docs/classes/mappedincategory.html +0 -373
  150. package/docs/classes/mappedindestinationset.html +0 -184
  151. package/docs/classes/mappedindirections.html +0 -258
  152. package/docs/classes/mappedinevent.html +0 -387
  153. package/docs/classes/mappedinlocation.html +0 -942
  154. package/docs/classes/mappedinmap.html +0 -501
  155. package/docs/classes/mappedinmapgroup.html +0 -329
  156. package/docs/classes/mappedinnode.html +0 -717
  157. package/docs/classes/mappedinpolygon.html +0 -714
  158. package/docs/classes/mappedinrankings.html +0 -288
  159. package/docs/classes/mappedinvenue.html +0 -494
  160. package/docs/classes/mappedinvortex.html +0 -331
  161. package/docs/classes/mapviewstore.html +0 -1233
  162. package/docs/enums/action_type.html +0 -188
  163. package/docs/enums/bearing_type.html +0 -188
  164. package/docs/enums/collision_ranking_tiers.html +0 -177
  165. package/docs/enums/e_bluedot_state.html +0 -223
  166. package/docs/enums/e_bluedot_state_reason.html +0 -197
  167. package/docs/enums/e_marker_state.html +0 -204
  168. package/docs/enums/marker_anchor.html +0 -188
  169. package/docs/enums/state.html +0 -160
  170. package/docs/index.html +0 -1078
  171. package/docs/modules.html +0 -1898
package/docs/index.html DELETED
@@ -1,1078 +0,0 @@
1
- <!doctype html>
2
- <html class="default no-js">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
- <title>@mappedin/react-native-sdk</title>
7
- <meta name="description" content="Documentation for @mappedin/react-native-sdk">
8
- <meta name="viewport" content="width=device-width, initial-scale=1">
9
- <link rel="stylesheet" href="assets/css/main.css">
10
- <script async src="assets/js/search.js" id="search-script"></script>
11
- </head>
12
- <body>
13
- <header>
14
- <div class="tsd-page-toolbar">
15
- <div class="container">
16
- <div class="table-wrap">
17
- <div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
18
- <div class="field">
19
- <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
20
- <input id="tsd-search-field" type="text" />
21
- </div>
22
- <ul class="results">
23
- <li class="state loading">Preparing search index...</li>
24
- <li class="state failure">The search index is not available</li>
25
- </ul>
26
- <a href="index.html" class="title">@mappedin/react-native-sdk</a>
27
- </div>
28
- <div class="table-cell" id="tsd-widgets">
29
- <div id="tsd-filter">
30
- <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
31
- <div class="tsd-filter-group">
32
- <div class="tsd-select" id="tsd-filter-visibility">
33
- <span class="tsd-select-label">All</span>
34
- <ul class="tsd-select-list">
35
- <li data-value="public">Public</li>
36
- <li data-value="protected">Public/Protected</li>
37
- <li data-value="private" class="selected">All</li>
38
- </ul>
39
- </div>
40
- <input type="checkbox" id="tsd-filter-inherited" checked />
41
- <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
42
- <input type="checkbox" id="tsd-filter-externals" checked />
43
- <label class="tsd-widget" for="tsd-filter-externals">Externals</label>
44
- </div>
45
- </div>
46
- <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
47
- </div>
48
- </div>
49
- </div>
50
- </div>
51
- <div class="tsd-page-title">
52
- <div class="container">
53
- <h1>@mappedin/react-native-sdk</h1>
54
- </div>
55
- </div>
56
- </header>
57
- <div class="container container-main">
58
- <div class="row">
59
- <div class="col-8 col-content">
60
- <div class="tsd-panel tsd-typography">
61
- <a href="#mappedin-react-native-sdk" id="mappedin-react-native-sdk" style="color: inherit; text-decoration: none;">
62
- <h1>Mappedin React Native SDK</h1>
63
- </a>
64
- <a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
65
- <h2>Installation</h2>
66
- </a>
67
- <p>NPM:</p>
68
- <p><code>npm install @mappedin/react-native-sdk react-native-webview</code></p>
69
- <p>YARN:</p>
70
- <p><code>yarn add @mappedin/react-native-sdk react-native-webview</code></p>
71
- <a href="#usage" id="usage" style="color: inherit; text-decoration: none;">
72
- <h1>Usage:</h1>
73
- </a>
74
- <p>We provide both a declarative API using props and an imperative API with methods. For example, to listen to polygon clicks, we provide a prop <code>onPolygonClicked</code>; in order to focus the map onto this polygon, we provide an imperative API method <a href="classes/mapviewstore.html#focuson"><code>focusOn</code></a>.</p>
75
- <p>Component Signature:</p>
76
- <pre><code class="language-typescript"><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">MiMapView</span><span style="color: #000000"> = (</span><span style="color: #001080">props</span><span style="color: #000000">: </span><span style="color: #267F99">TMapViewProps</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #001080">ReactElement</span><span style="color: #000000">;</span>
77
- </code></pre>
78
- <a href="#props" id="props" style="color: inherit; text-decoration: none;">
79
- <h3>Props:</h3>
80
- </a>
81
- <p><a href="modules.html#tmimapviewprops">Documented in Detail here</a></p>
82
- <table>
83
- <thead>
84
- <tr>
85
- <th>Prop</th>
86
- <th>Description</th>
87
- <th>Signature</th>
88
- <th>Required</th>
89
- </tr>
90
- </thead>
91
- <tbody><tr>
92
- <td>options</td>
93
- <td>Options to initialize MapView with</td>
94
- <td><a href="modules.html#tmimapviewoptions"><code>TMiMapViewOptions</code><a></td>
95
- <td>Yes</td>
96
- </tr>
97
- <tr>
98
- <td>ref</td>
99
- <td>Exposes Imperative API <a href="classes/mapviewstore.html"><code>MapViewStore</code></a></td>
100
- <td>React.MutableRefObject&lt;<a href="classes/mapviewstore.html"><code>MapViewStore</code></a>&gt;</td>
101
- <td>No</td>
102
- </tr>
103
- <tr>
104
- <td>onPolygonClicked</td>
105
- <td>Gets called when clicking interactive polygon</td>
106
- <td>({ polygon: <a href="classes/mappedinpolygon.html"><code>MappedinPolygon</code></a> }) =&gt; void</td>
107
- <td>No</td>
108
- </tr>
109
- <tr>
110
- <td>onDataLoaded</td>
111
- <td>Fired when <a href="classes/mappedin.html"><code>Mappedin</code></a> data is loaded</td>
112
- <td>({ venueData: <a href="classes/mappedin.html"><code>Mappedin</code></a> }) =&gt; void</td>
113
- <td>No</td>
114
- </tr>
115
- <tr>
116
- <td>onFirstMapLoaded</td>
117
- <td>Fires when map can first be interacted with</td>
118
- <td>() =&gt; void</td>
119
- <td>No</td>
120
- </tr>
121
- <tr>
122
- <td>(deprecated) onBlueDotUpdated</td>
123
- <td>Fires when BlueDot updates</td>
124
- <td>({ update: <a href="modules.html#tbluedotupdate"><code>TBlueDotUpdate</code></a> }) =&gt; void</td>
125
- <td>No</td>
126
- </tr>
127
- <tr>
128
- <td>onBlueDotStateChanged</td>
129
- <td>Fires when BlueDot state changes</td>
130
- <td>({ stateChange: <a href="modules.html#tbluedotstatechange"><code>TBlueDotStateChange</code></a> }) =&gt; void</td>
131
- <td>No</td>
132
- </tr>
133
- <tr>
134
- <td>onBlueDotPositionUpdated</td>
135
- <td>Fires when BlueDot position changes</td>
136
- <td>({ update: <a href="modules.html#tbluedotpositionupdate"><code>TBlueDotPositionUpdate</code></a> }) =&gt; void</td>
137
- <td>No</td>
138
- </tr>
139
- <tr>
140
- <td>onStateChanged</td>
141
- <td>Fires when SDK State changes</td>
142
- <td>({ state: <a href="enums/state.html"><code>STATE</code></a> }) =&gt; void</td>
143
- <td>No</td>
144
- </tr>
145
- </tbody></table>
146
- <a href="#imperative-api" id="imperative-api" style="color: inherit; text-decoration: none;">
147
- <h3>Imperative API</h3>
148
- </a>
149
- <p><a href="classes/mapviewstore.html">Documented in Detail here: MapViewStore</a></p>
150
- <a href="#render-map" id="render-map" style="color: inherit; text-decoration: none;">
151
- <h2>Render map</h2>
152
- </a>
153
- <p>Example:</p>
154
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">Mappedin</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
155
-
156
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">options</span><span style="color: #000000"> = {</span>
157
- <span style="color: #000000"> </span><span style="color: #001080">clientId:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;****&#039;</span><span style="color: #000000">,</span>
158
- <span style="color: #000000"> </span><span style="color: #001080">clientSecret:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;***&#039;</span><span style="color: #000000">,</span>
159
- <span style="color: #000000"> </span><span style="color: #001080">venue:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;venue-slug&#039;</span><span style="color: #000000">,</span>
160
- <span style="color: #000000"> </span><span style="color: #001080">perspective:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;Website&#039;</span><span style="color: #000000">,</span>
161
- <span style="color: #000000">};</span>
162
-
163
- <span style="color: #008000">// Render map</span>
164
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
165
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span><span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span><span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span><span style="color: #000000"> </span><span style="color: #800000">/&gt;</span><span style="color: #000000">;</span>
166
- <span style="color: #000000">};</span>
167
- </code></pre>
168
- <p>Example:</p>
169
- <pre><code class="language-typescript"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
170
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> { </span><span style="color: #001080">Mappedin</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
171
-
172
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
173
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> [</span><span style="color: #0070C1">venueData</span><span style="color: #000000">, </span><span style="color: #0070C1">setVenueData</span><span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">Mappedin</span><span style="color: #000000">&gt;({});</span>
174
-
175
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
176
- <span style="color: #000000"> &lt;</span><span style="color: #001080">MiMapView</span>
177
- <span style="color: #000000"> </span><span style="color: #001080">options</span><span style="color: #000000">={</span><span style="color: #001080">options</span><span style="color: #000000">}</span>
178
- <span style="color: #000000"> </span><span style="color: #001080">onDataLoaded</span><span style="color: #000000">={({ </span><span style="color: #001080">venueData</span><span style="color: #000000"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
179
- <span style="color: #000000"> </span><span style="color: #795E26">setVenueData</span><span style="color: #000000">(</span><span style="color: #001080">venueData</span><span style="color: #000000">);</span>
180
- <span style="color: #000000"> }}</span>
181
- <span style="color: #000000"> /&gt;</span>
182
- <span style="color: #000000"> );</span>
183
- <span style="color: #000000">};</span>
184
- </code></pre>
185
- <a href="#fetching-venue-data-outside-of-the-mimapview-component" id="fetching-venue-data-outside-of-the-mimapview-component" style="color: inherit; text-decoration: none;">
186
- <h3>Fetching venue data outside of the MiMapView component</h3>
187
- </a>
188
- <p>It is possible to fetch venue data (locations, maps, etc), outside of the MiMapView component. This can be helpful for cases where a map isn&#39;t always needed or there is a need to fetch the data first, and render the map later.</p>
189
- <pre><code class="language-tsx">
190
- <span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">getVenue</span><span style="color: #000000">, </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
191
-
192
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">options</span><span style="color: #000000"> = {</span>
193
- <span style="color: #000000"> </span><span style="color: #001080">clientId:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;****&#039;</span><span style="color: #000000">,</span>
194
- <span style="color: #000000"> </span><span style="color: #001080">clientSecret:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;***&#039;</span><span style="color: #000000">,</span>
195
- <span style="color: #000000"> </span><span style="color: #001080">venue:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;venue-slug&#039;</span><span style="color: #000000">,</span>
196
- <span style="color: #000000"> </span><span style="color: #001080">perspective:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;Website&#039;</span><span style="color: #000000">,</span>
197
- <span style="color: #000000">};</span>
198
-
199
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
200
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> [</span><span style="color: #0070C1">venueData</span><span style="color: #000000">, </span><span style="color: #0070C1">setVenueData</span><span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">Mappedin</span><span style="color: #000000">&gt;({});</span>
201
-
202
- <span style="color: #000000"> </span><span style="color: #795E26">useEffect</span><span style="color: #000000">(() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
203
- <span style="color: #000000"> </span><span style="color: #0000FF">async</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">init</span><span style="color: #000000">() {</span>
204
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">venueData</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">getVenue</span><span style="color: #000000">(</span><span style="color: #001080">options</span><span style="color: #000000">);</span>
205
- <span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #001080">venueData</span><span style="color: #000000">.</span><span style="color: #001080">locations</span><span style="color: #000000">);</span>
206
- <span style="color: #000000"> </span><span style="color: #795E26">setVenueData</span><span style="color: #000000">(</span><span style="color: #001080">venueData</span><span style="color: #000000">);</span>
207
- <span style="color: #000000"> }</span>
208
- <span style="color: #000000"> }, []);</span>
209
-
210
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
211
- <span style="color: #000000"> {</span><span style="color: #001080">venueData</span><span style="color: #000000"> != </span><span style="color: #001080">null</span><span style="color: #000000"> &amp;&amp;</span>
212
- <span style="color: #000000"> &lt;</span><span style="color: #001080">MiMapView</span>
213
- <span style="color: #000000"> </span><span style="color: #001080">style</span><span style="color: #000000">={{ </span><span style="color: #001080">flex:</span><span style="color: #000000"> </span><span style="color: #098658">1</span><span style="color: #000000"> }}</span>
214
- <span style="color: #000000"> </span><span style="color: #001080">options</span><span style="color: #000000">={</span><span style="color: #001080">options</span><span style="color: #000000">}</span>
215
- <span style="color: #000000"> </span><span style="color: #008000">// pass venueData in</span>
216
- <span style="color: #000000"> </span><span style="color: #001080">venueData</span><span style="color: #000000">={</span><span style="color: #001080">venueData</span><span style="color: #000000">}</span>
217
- <span style="color: #000000"> /&gt;</span>
218
- <span style="color: #000000"> }</span>
219
- <span style="color: #000000"> );</span>
220
- <span style="color: #000000">};</span>
221
- </code></pre>
222
- <a href="#listen-to-polygon-clicks" id="listen-to-polygon-clicks" style="color: inherit; text-decoration: none;">
223
- <h3>Listen to polygon clicks</h3>
224
- </a>
225
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
226
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> { </span><span style="color: #001080">MappedinLocation</span><span style="color: #000000">, </span><span style="color: #001080">Mappedin</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
227
-
228
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
229
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> [</span><span style="color: #0070C1">venueData</span><span style="color: #000000">, </span><span style="color: #0070C1">setVenueData</span><span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">Mappedin</span><span style="color: #000000">&gt;({});</span>
230
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> [</span>
231
- <span style="color: #000000"> </span><span style="color: #0070C1">selectedLocation</span><span style="color: #000000">,</span>
232
- <span style="color: #000000"> </span><span style="color: #0070C1">setSelectedLocation</span><span style="color: #000000">,</span>
233
- <span style="color: #000000"> ] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinLocation</span><span style="color: #000000">&gt;({});</span>
234
-
235
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
236
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
237
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
238
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
239
- <span style="color: #000000"> </span><span style="color: #FF0000">onDataLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">venueData</span><span style="color: #000000FF">: </span><span style="color: #001080">Mappedin</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
240
- <span style="color: #000000FF"> </span><span style="color: #795E26">setVenueData</span><span style="color: #000000FF">(</span><span style="color: #001080">venueData</span><span style="color: #000000FF">);</span>
241
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
242
- <span style="color: #000000"> </span><span style="color: #FF0000">onPolygonClicked</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">polygon</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
243
- <span style="color: #000000FF"> </span><span style="color: #795E26">setSelectedLocation</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">.</span><span style="color: #001080">locations</span><span style="color: #000000FF">[</span><span style="color: #098658">0</span><span style="color: #000000FF">]);</span>
244
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
245
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
246
- <span style="color: #000000"> );</span>
247
- <span style="color: #000000">};</span>
248
- </code></pre>
249
- <a href="#rotate-the-map" id="rotate-the-map" style="color: inherit; text-decoration: none;">
250
- <h3>Rotate the map</h3>
251
- </a>
252
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
253
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> { </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
254
-
255
- <span style="color: #008000">// Imperative API</span>
256
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
257
-
258
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
259
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
260
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
261
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
262
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
263
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
264
- <span style="color: #000000"> </span><span style="color: #FF0000">onFirstMapLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
265
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000">!</span><span style="color: #000000FF">.</span><span style="color: #001080">CameraControls</span><span style="color: #000000FF">.</span><span style="color: #795E26">setRotation</span><span style="color: #000000FF">(</span><span style="color: #098658">90</span><span style="color: #000000FF">);</span>
266
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
267
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
268
- <span style="color: #000000"> );</span>
269
- <span style="color: #000000">};</span>
270
- </code></pre>
271
- <a href="#focus-on-the-polygon-and-highlight-it" id="focus-on-the-polygon-and-highlight-it" style="color: inherit; text-decoration: none;">
272
- <h3>Focus on the polygon and highlight it</h3>
273
- </a>
274
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
275
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
276
- <span style="color: #000000"> </span><span style="color: #001080">MappedinPolygon</span><span style="color: #000000">,</span>
277
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
278
- <span style="color: #000000"> </span><span style="color: #001080">Mappedin</span><span style="color: #000000">,</span>
279
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
280
-
281
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
282
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> [</span><span style="color: #0070C1">venueData</span><span style="color: #000000">, </span><span style="color: #0070C1">setVenueData</span><span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">Mappedin</span><span style="color: #000000">&gt;({});</span>
283
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> [</span>
284
- <span style="color: #000000"> </span><span style="color: #0070C1">selectedLocation</span><span style="color: #000000">,</span>
285
- <span style="color: #000000"> </span><span style="color: #0070C1">setSelectedLocation</span><span style="color: #000000">,</span>
286
- <span style="color: #000000"> ] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinLocation</span><span style="color: #000000">&gt;({});</span>
287
-
288
- <span style="color: #000000"> </span><span style="color: #008000">// Imperative API</span>
289
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
290
-
291
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
292
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
293
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
294
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
295
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
296
- <span style="color: #000000"> </span><span style="color: #FF0000">onDataLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">venueData</span><span style="color: #000000FF">: </span><span style="color: #001080">Mappedin</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
297
- <span style="color: #000000FF"> </span><span style="color: #795E26">setVenueData</span><span style="color: #000000FF">(</span><span style="color: #001080">venueData</span><span style="color: #000000FF">);</span>
298
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
299
- <span style="color: #000000"> </span><span style="color: #FF0000">onPolygonClicked</span><span style="color: #000000">=</span><span style="color: #0000FF">{async</span><span style="color: #000000FF"> ({ </span><span style="color: #001080">polygon</span><span style="color: #000000FF">: </span><span style="color: #001080">MappedinPolygon</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
300
- <span style="color: #000000FF"> </span><span style="color: #795E26">setSelectedLocation</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">.</span><span style="color: #001080">locations</span><span style="color: #000000FF">[</span><span style="color: #098658">0</span><span style="color: #000000FF">]);</span>
301
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">clearAllPolygonColors</span><span style="color: #000000FF">();</span>
302
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">setPolygonColor</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">, </span><span style="color: #A31515">&#039;red&#039;</span><span style="color: #000000FF">);</span>
303
- <span style="color: #000000FF"> </span><span style="color: #008000">// lets wait for the focusOn to complete</span>
304
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">await</span><span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">focusOn</span><span style="color: #000000FF">({</span>
305
- <span style="color: #000000FF"> </span><span style="color: #001080">polygons:</span><span style="color: #000000FF"> [</span><span style="color: #001080">polygon</span><span style="color: #000000FF">],</span>
306
- <span style="color: #000000FF"> });</span>
307
- <span style="color: #000000FF"> </span><span style="color: #001080">console</span><span style="color: #000000FF">.</span><span style="color: #795E26">log</span><span style="color: #000000FF">(</span><span style="color: #A31515">&#039;success!&#039;</span><span style="color: #000000FF">);</span>
308
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
309
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
310
- <span style="color: #000000"> );</span>
311
- <span style="color: #000000">};</span>
312
- </code></pre>
313
- <a href="#enable-blue-dot-and-listen-to-update-events" id="enable-blue-dot-and-listen-to-update-events" style="color: inherit; text-decoration: none;">
314
- <h3>Enable Blue Dot and listen to update events</h3>
315
- </a>
316
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
317
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
318
- <span style="color: #000000"> </span><span style="color: #001080">TBlueDotUpdate</span><span style="color: #000000">,</span>
319
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
320
- <span style="color: #000000"> </span><span style="color: #001080">MappedinMap</span><span style="color: #000000">,</span>
321
- <span style="color: #000000"> </span><span style="color: #001080">MappedinNode</span><span style="color: #000000">,</span>
322
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
323
-
324
- <span style="color: #008000">// Imperative API</span>
325
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
326
-
327
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
328
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
329
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
330
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
331
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
332
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
333
- <span style="color: #000000"> </span><span style="color: #FF0000">onFirstMapLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
334
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">BlueDot</span><span style="color: #000000FF">.</span><span style="color: #795E26">enable</span><span style="color: #000000FF">();</span>
335
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
336
- <span style="color: #000000"> </span><span style="color: #FF0000">onBlueDotStateChanged</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({</span>
337
- <span style="color: #000000FF"> </span><span style="color: #001080">stateChange</span><span style="color: #000000FF">,</span>
338
- <span style="color: #000000FF"> }: {</span>
339
- <span style="color: #000000FF"> </span><span style="color: #001080">stateChange:</span><span style="color: #000000FF"> </span><span style="color: #001080">TBlueDotStateChange</span><span style="color: #000000FF">;</span>
340
- <span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
341
- <span style="color: #000000FF"> </span><span style="color: #008000">// This event can be used to get real time updates as to what the nearest node is</span>
342
- <span style="color: #000000FF"> </span><span style="color: #0000FF">const</span><span style="color: #000000FF"> {</span>
343
- <span style="color: #000000FF"> </span><span style="color: #0070C1">map</span><span style="color: #000000FF">,</span>
344
- <span style="color: #000000FF"> </span><span style="color: #0070C1">nearestNode</span><span style="color: #000000FF">,</span>
345
- <span style="color: #000000FF"> }</span><span style="color: #000000">:</span><span style="color: #000000FF"> {</span>
346
- <span style="color: #000000FF"> </span><span style="color: #001080">map</span><span style="color: #000000">:</span><span style="color: #000000FF"> </span><span style="color: #267F99">MappedinMap</span><span style="color: #000000FF">;</span>
347
- <span style="color: #000000FF"> </span><span style="color: #001080">nearestNode</span><span style="color: #000000">:</span><span style="color: #000000FF"> </span><span style="color: #267F99">MappedinNode</span><span style="color: #000000FF">;</span>
348
- <span style="color: #000000FF"> } </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #001080">stateChange</span><span style="color: #000000FF">;</span>
349
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
350
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
351
- <span style="color: #000000"> );</span>
352
- <span style="color: #000000">};</span>
353
- </code></pre>
354
- <a href="#set-sdk-into-quotfollowquot-mode" id="set-sdk-into-quotfollowquot-mode" style="color: inherit; text-decoration: none;">
355
- <h3>Set SDK into &quot;FOLLOW&quot; mode</h3>
356
- </a>
357
- <p>Setting the SDK into follow mode will lock the camera to follow the BlueDot at the center of the screen. Interacting with the map will put the SDK back into EXPLORE mode and emit onStateChanged event.</p>
358
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
359
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
360
- <span style="color: #000000"> </span><span style="color: #001080">TBlueDotUpdate</span><span style="color: #000000">,</span>
361
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
362
- <span style="color: #000000"> </span><span style="color: #001080">MappedinLocation</span><span style="color: #000000">,</span>
363
- <span style="color: #000000"> </span><span style="color: #001080">MappedinNode</span><span style="color: #000000">,</span>
364
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
365
- <span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">STATE</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
366
-
367
- <span style="color: #008000">// Imperative API</span>
368
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
369
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">nearestNode</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinNode</span><span style="color: #000000">&gt;();</span>
370
- <span style="color: #0000FF">const</span><span style="color: #000000"> [</span>
371
- <span style="color: #000000"> </span><span style="color: #0070C1">selectedLocation</span><span style="color: #000000">,</span>
372
- <span style="color: #000000"> </span><span style="color: #0070C1">setSelectedLocation</span><span style="color: #000000">,</span>
373
- <span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinLocation</span><span style="color: #000000">&gt;({});</span>
374
-
375
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
376
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
377
- <span style="color: #000000"> </span><span style="color: #800000">&lt;&gt;</span>
378
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
379
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
380
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
381
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
382
- <span style="color: #000000"> </span><span style="color: #FF0000">onStateChanged</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">state</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
383
- <span style="color: #000000FF"> </span><span style="color: #001080">console</span><span style="color: #000000FF">.</span><span style="color: #795E26">log</span><span style="color: #000000FF">(</span><span style="color: #A31515">&#039;Current State is&#039;</span><span style="color: #000000FF">, </span><span style="color: #001080">state</span><span style="color: #000000FF">);</span>
384
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
385
- <span style="color: #000000"> </span><span style="color: #FF0000">onDataLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
386
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">setState</span><span style="color: #000000FF">(</span><span style="color: #0070C1">STATE</span><span style="color: #000000FF">.</span><span style="color: #0070C1">FOLLOW</span><span style="color: #000000FF">);</span>
387
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">BlueDot</span><span style="color: #000000FF">.</span><span style="color: #795E26">enable</span><span style="color: #000000FF">();</span>
388
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
389
- <span style="color: #000000"> </span><span style="color: #FF0000">onBlueStateChanged</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">stateChange</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
390
- <span style="color: #000000FF"> </span><span style="color: #001080">nearestNode</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #001080">stateChange</span><span style="color: #000000FF">.</span><span style="color: #001080">nearestNode</span><span style="color: #000000FF">;</span>
391
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
392
- <span style="color: #000000"> </span><span style="color: #FF0000">onPolygonClicked</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">polygon</span><span style="color: #000000FF">: </span><span style="color: #001080">MappedinPolygon</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
393
- <span style="color: #000000FF"> </span><span style="color: #795E26">setSelectedLocation</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">.</span><span style="color: #001080">locations</span><span style="color: #000000FF">[</span><span style="color: #098658">0</span><span style="color: #000000FF">]);</span>
394
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
395
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
396
- <span style="color: #000000"> </span><span style="color: #800000">&lt;/&gt;</span>
397
- <span style="color: #000000"> );</span>
398
- <span style="color: #000000">};</span>
399
- </code></pre>
400
- <a href="#get-directions" id="get-directions" style="color: inherit; text-decoration: none;">
401
- <h3>Get Directions</h3>
402
- </a>
403
- <p>This API can be used to get a directions object from any MappedinLocation | MappedinNode | MappedinPolygon to any MappedinLocation | MappedinNode | MappedinPolygon. This can be used to show Text directions, as well as draw paths.</p>
404
- <p>Example:</p>
405
- <pre><code class="language-tsx"><span style="color: #000000">...</span>
406
- <span style="color: #800000">&lt;</span><span style="color: #267F99">Button</span>
407
- <span style="color: #000000"> </span><span style="color: #FF0000">title</span><span style="color: #000000">=</span><span style="color: #A31515">&quot;Get Directions&quot;</span>
408
- <span style="color: #000000"> </span><span style="color: #FF0000">onPress</span><span style="color: #000000">=</span><span style="color: #0000FF">{async</span><span style="color: #000000FF"> () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
409
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">try</span><span style="color: #000000FF"> {</span>
410
- <span style="color: #000000FF"> </span><span style="color: #0000FF">const</span><span style="color: #000000FF"> </span><span style="color: #0070C1">directions</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #AF00DB">await</span><span style="color: #000000FF"> </span><span style="color: #001080">controller</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #795E26">getDirections</span><span style="color: #000000FF">({</span>
411
- <span style="color: #000000FF"> </span><span style="color: #001080">from:</span><span style="color: #000000FF"> </span><span style="color: #001080">selectedLocation</span><span style="color: #000000FF">,</span>
412
- <span style="color: #000000FF"> </span><span style="color: #001080">to:</span><span style="color: #000000FF"> </span><span style="color: #001080">destinationLocation</span><span style="color: #000000FF">,</span>
413
- <span style="color: #000000FF"> });</span>
414
- <span style="color: #000000FF"> </span><span style="color: #001080">console</span><span style="color: #000000FF">.</span><span style="color: #795E26">log</span><span style="color: #000000FF">(</span><span style="color: #001080">directions</span><span style="color: #000000FF">);</span>
415
- <span style="color: #000000FF"> } </span><span style="color: #AF00DB">catch</span><span style="color: #000000FF"> (</span><span style="color: #001080">e</span><span style="color: #000000FF">) {</span>
416
- <span style="color: #000000FF"> </span><span style="color: #001080">console</span><span style="color: #000000FF">.</span><span style="color: #795E26">error</span><span style="color: #000000FF">(</span><span style="color: #001080">e</span><span style="color: #000000FF">);</span>
417
- <span style="color: #000000FF"> }</span>
418
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
419
- <span style="color: #800000">&gt;&lt;/</span><span style="color: #267F99">Button</span><span style="color: #800000">&gt;</span>
420
- <span style="color: #000000">...</span>
421
-
422
- </code></pre>
423
- <a href="#get-directions-from-one-location-to-another-and-show-path-and-connections-on-map" id="get-directions-from-one-location-to-another-and-show-path-and-connections-on-map" style="color: inherit; text-decoration: none;">
424
- <h2>Get Directions from One Location to Another and show path and connections on map</h2>
425
- </a>
426
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
427
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
428
- <span style="color: #000000"> </span><span style="color: #001080">TBlueDotUpdate</span><span style="color: #000000">,</span>
429
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
430
- <span style="color: #000000"> </span><span style="color: #001080">MappedinLocation</span><span style="color: #000000">,</span>
431
- <span style="color: #000000"> </span><span style="color: #001080">MappedinNode</span><span style="color: #000000">,</span>
432
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
433
-
434
- <span style="color: #008000">// Imperative API</span>
435
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
436
- <span style="color: #0000FF">const</span><span style="color: #000000"> [</span><span style="color: #0070C1">destination</span><span style="color: #000000">, </span><span style="color: #0070C1">setDestination</span><span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinLocation</span><span style="color: #000000">&gt;();</span>
437
- <span style="color: #0000FF">const</span><span style="color: #000000"> [</span><span style="color: #0070C1">departure</span><span style="color: #000000">, </span><span style="color: #0070C1">setDeparture</span><span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinLocation</span><span style="color: #000000">&gt;({});</span>
438
-
439
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
440
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
441
- <span style="color: #000000"> </span><span style="color: #800000">&lt;&gt;</span>
442
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
443
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
444
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
445
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
446
- <span style="color: #000000"> </span><span style="color: #FF0000">onDataLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
447
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">BlueDot</span><span style="color: #000000FF">.</span><span style="color: #795E26">enable</span><span style="color: #000000FF">();</span>
448
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
449
- <span style="color: #000000"> </span><span style="color: #FF0000">onPolygonClicked</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">polygon</span><span style="color: #000000FF">: </span><span style="color: #001080">MappedinPolygon</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
450
- <span style="color: #000000FF"> </span><span style="color: #008000">// first, let&#039;s set departure</span>
451
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">if</span><span style="color: #000000FF"> (</span><span style="color: #001080">departure</span><span style="color: #000000FF"> </span><span style="color: #000000">==</span><span style="color: #000000FF"> </span><span style="color: #0000FF">null</span><span style="color: #000000FF">) {</span>
452
- <span style="color: #000000FF"> </span><span style="color: #795E26">setDeparture</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">.</span><span style="color: #001080">locations</span><span style="color: #000000FF">[</span><span style="color: #098658">0</span><span style="color: #000000FF">]);</span>
453
- <span style="color: #000000FF"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000FF"> {</span>
454
- <span style="color: #000000FF"> </span><span style="color: #008000">// then, destination</span>
455
- <span style="color: #000000FF"> </span><span style="color: #795E26">setDestination</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">.</span><span style="color: #001080">locations</span><span style="color: #000000FF">[</span><span style="color: #098658">0</span><span style="color: #000000FF">]);</span>
456
- <span style="color: #000000FF"> }</span>
457
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
458
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
459
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">Button</span>
460
- <span style="color: #000000"> </span><span style="color: #FF0000">title</span><span style="color: #000000">=</span><span style="color: #A31515">&quot;Get Directions&quot;</span>
461
- <span style="color: #000000"> </span><span style="color: #FF0000">onPress</span><span style="color: #000000">=</span><span style="color: #0000FF">{async</span><span style="color: #000000FF"> () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
462
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">try</span><span style="color: #000000FF"> {</span>
463
- <span style="color: #000000FF"> </span><span style="color: #008000">// get Directions</span>
464
- <span style="color: #000000FF"> </span><span style="color: #0000FF">const</span><span style="color: #000000FF"> </span><span style="color: #0070C1">directions</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #AF00DB">await</span><span style="color: #000000FF"> </span><span style="color: #001080">controller</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #795E26">getDirections</span><span style="color: #000000FF">({</span>
465
- <span style="color: #000000FF"> </span><span style="color: #001080">from:</span><span style="color: #000000FF"> </span><span style="color: #001080">departuer</span><span style="color: #000000FF">,</span>
466
- <span style="color: #000000FF"> </span><span style="color: #001080">to:</span><span style="color: #000000FF"> </span><span style="color: #001080">destination</span><span style="color: #000000FF">,</span>
467
- <span style="color: #000000FF"> });</span>
468
- <span style="color: #000000FF"> </span><span style="color: #008000">// draw path on map</span>
469
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">await</span><span style="color: #000000FF"> </span><span style="color: #001080">controller</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #001080">Journey</span><span style="color: #000000FF">.</span><span style="color: #795E26">draw</span><span style="color: #000000FF">(</span><span style="color: #001080">directions</span><span style="color: #000000FF">);</span>
470
- <span style="color: #000000FF"> </span><span style="color: #008000">// focus on the path</span>
471
- <span style="color: #000000FF"> </span><span style="color: #001080">controller</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #795E26">focusOn</span><span style="color: #000000FF">({</span>
472
- <span style="color: #000000FF"> </span><span style="color: #001080">nodes:</span><span style="color: #000000FF"> </span><span style="color: #001080">directions</span><span style="color: #000000FF">.</span><span style="color: #001080">path</span><span style="color: #000000FF">,</span>
473
- <span style="color: #000000FF"> });</span>
474
- <span style="color: #000000FF"> } </span><span style="color: #AF00DB">catch</span><span style="color: #000000FF"> (</span><span style="color: #001080">e</span><span style="color: #000000FF">) {</span>
475
- <span style="color: #000000FF"> </span><span style="color: #001080">console</span><span style="color: #000000FF">.</span><span style="color: #795E26">error</span><span style="color: #000000FF">(</span><span style="color: #001080">e</span><span style="color: #000000FF">);</span>
476
- <span style="color: #000000FF"> }</span>
477
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
478
- <span style="color: #000000"> </span><span style="color: #800000">&gt;&lt;/</span><span style="color: #267F99">Button</span><span style="color: #800000">&gt;</span>
479
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">Button</span>
480
- <span style="color: #000000"> </span><span style="color: #FF0000">title</span><span style="color: #000000">=</span><span style="color: #A31515">&quot;Reset&quot;</span>
481
- <span style="color: #000000"> </span><span style="color: #FF0000">onPress</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
482
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">Journey</span><span style="color: #000000FF">.</span><span style="color: #795E26">clear</span><span style="color: #000000FF">();</span>
483
- <span style="color: #000000FF"> </span><span style="color: #795E26">setDeparture</span><span style="color: #000000FF">(</span><span style="color: #0000FF">undefined</span><span style="color: #000000FF">);</span>
484
- <span style="color: #000000FF"> </span><span style="color: #795E26">setDestination</span><span style="color: #000000FF">(</span><span style="color: #0000FF">undefined</span><span style="color: #000000FF">);</span>
485
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
486
- <span style="color: #000000"> </span><span style="color: #800000">&gt;&lt;/</span><span style="color: #267F99">Button</span><span style="color: #800000">&gt;</span>
487
- <span style="color: #000000"> </span><span style="color: #800000">&lt;/&gt;</span>
488
- <span style="color: #000000"> );</span>
489
- <span style="color: #000000">};</span>
490
- </code></pre>
491
- <a href="#preparing-svgs-for-use-as-assets-in-markerstooltipsetc" id="preparing-svgs-for-use-as-assets-in-markerstooltipsetc" style="color: inherit; text-decoration: none;">
492
- <h2>Preparing SVGs for use as assets in markers/tooltips/etc</h2>
493
- </a>
494
- <p>SVG is a popular format for image assets, which means there are a lot of proprietary, broken, or unnecessary tags when getting SVGs online.</p>
495
- <p>Before using SVGs with our SDKs, they need to get “cleaned up” - this also drastically reduces their file size, so win-win.</p>
496
- <a href="#preparing" id="preparing" style="color: inherit; text-decoration: none;">
497
- <h3>Preparing</h3>
498
- </a>
499
- <ol>
500
- <li>Go to <a href="https://jakearchibald.github.io/svgomg/">https://jakearchibald.github.io/svgomg/</a></li>
501
- <li>Drag and drop your SVG</li>
502
- <li>All default settings will work well, but we also recommend enabling “prefer viewBox to width/height”</li>
503
- <li>You can now download the clean SVG or copy and paste its contents.</li>
504
- </ol>
505
- <p>Once the SVGs are prepared, they need to be wrapped in a <code>div</code> element which will give them an explicit size. This allows markers to be any desired size and the SVG will grow/shrink appropriately. The element can also add a background, shadows, and any other styles.</p>
506
- <pre><code class="language-html"><span style="color: #000000">`</span>
507
- <span style="color: #800000">&lt;div</span><span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;width: 32px; height: 32px;&quot;</span><span style="color: #800000">&gt;</span>
508
- <span style="color: #000000"> </span><span style="color: #800000">&lt;svg</span><span style="color: #000000"> </span><span style="color: #FF0000">xmlns</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color: #800000">&gt;</span><span style="color: #000000">...</span><span style="color: #800000">&lt;/svg&gt;</span>
509
- <span style="color: #800000">&lt;/div&gt;</span>
510
- <span style="color: #000000">`</span>
511
- </code></pre>
512
- <a href="#adding-a-coordinate-by-latlon" id="adding-a-coordinate-by-latlon" style="color: inherit; text-decoration: none;">
513
- <h2>Adding a Coordinate by lat/lon</h2>
514
- </a>
515
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
516
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
517
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
518
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
519
-
520
- <span style="color: #008000">// Imperative API</span>
521
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
522
-
523
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
524
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
525
- <span style="color: #000000"> </span><span style="color: #800000">&lt;&gt;</span>
526
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
527
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
528
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
529
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
530
- <span style="color: #000000"> </span><span style="color: #FF0000">onFirstMapLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
531
- <span style="color: #000000FF"> </span><span style="color: #008000">// create a coordinate</span>
532
- <span style="color: #000000FF"> </span><span style="color: #0000FF">const</span><span style="color: #000000FF"> </span><span style="color: #0070C1">coordinate</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">venueData</span><span style="color: #000000FF">.</span><span style="color: #001080">maps</span><span style="color: #000000FF">[</span><span style="color: #098658">1</span><span style="color: #000000FF">].</span><span style="color: #795E26">createCoordinate</span><span style="color: #000000FF">(</span><span style="color: #098658">43.52117572969203</span><span style="color: #000000FF">, </span><span style="color: #000000">-</span><span style="color: #098658">80.53869317220372</span><span style="color: #000000FF">);</span>
533
-
534
- <span style="color: #000000FF"> </span><span style="color: #0000FF">const</span><span style="color: #000000FF"> </span><span style="color: #0070C1">coordinate2</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">venueData</span><span style="color: #000000FF">.</span><span style="color: #001080">maps</span><span style="color: #000000FF">[</span><span style="color: #098658">1</span><span style="color: #000000FF">].</span><span style="color: #795E26">createCoordinate</span><span style="color: #000000FF">(</span><span style="color: #098658">44.52117572969203</span><span style="color: #000000FF">, </span><span style="color: #000000">-</span><span style="color: #098658">79.53869317220372</span><span style="color: #000000FF">);</span>
535
- <span style="color: #000000FF"> </span><span style="color: #008000">// find distance between coordinates:</span>
536
- <span style="color: #000000FF"> </span><span style="color: #001080">console</span><span style="color: #000000FF">.</span><span style="color: #795E26">log</span><span style="color: #000000FF">(</span><span style="color: #001080">coordinate</span><span style="color: #000000FF">.</span><span style="color: #795E26">absoluteDistanceTo</span><span style="color: #000000FF">(</span><span style="color: #001080">coordinate2</span><span style="color: #000000FF">));</span>
537
-
538
- <span style="color: #000000FF"> </span><span style="color: #008000">// coordinates can also be used to place markers:</span>
539
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">createMarker</span><span style="color: #000000FF">(</span><span style="color: #001080">coordinate</span><span style="color: #000000FF">, </span><span style="color: #000000">...</span><span style="color: #000000FF">)</span>
540
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
541
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
542
- <span style="color: #000000"> )</span>
543
- <span style="color: #000000">}</span>
544
- </code></pre>
545
- <a href="#customizing-appearance-of-labels" id="customizing-appearance-of-labels" style="color: inherit; text-decoration: none;">
546
- <h2>Customizing appearance of labels</h2>
547
- </a>
548
- <p>Labels are added on map load by default, but this can be overriden by setting <a href="modules.html#tshowvenueoptions">labelAllLocationsOnInit</a> to false and taking control of labeling. We provide <a href="modules.html#labelthemes">2 themes</a>, and <a href="modules.html#tlabelappearance">full control</a> over further customization.</p>
549
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000">, </span><span style="color: #001080">labelThemes</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
550
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
551
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
552
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
553
-
554
- <span style="color: #008000">// Imperative API</span>
555
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
556
-
557
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
558
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
559
- <span style="color: #000000"> </span><span style="color: #800000">&lt;&gt;</span>
560
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
561
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
562
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
563
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #000000">...</span><span style="color: #001080">options</span><span style="color: #000000FF">, </span><span style="color: #001080">labelAllLocationsOnInit:</span><span style="color: #000000FF"> </span><span style="color: #0000FF">false</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
564
- <span style="color: #000000"> </span><span style="color: #FF0000">onFirstMapLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
565
- <span style="color: #000000FF"> </span><span style="color: #008000">// use one of the themes</span>
566
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">labelAllLocations</span><span style="color: #000000FF">({ </span><span style="color: #001080">appearance:</span><span style="color: #000000FF"> </span><span style="color: #001080">labelThemes</span><span style="color: #000000FF">.</span><span style="color: #001080">lightOnDark</span><span style="color: #000000FF"> })</span>
567
- <span style="color: #000000FF"> </span><span style="color: #008000">// OR, customize a set of properties</span>
568
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">labelAllLocations</span><span style="color: #000000FF">({ </span><span style="color: #001080">appearance:</span><span style="color: #000000FF"> { </span><span style="color: #001080">text:</span><span style="color: #000000FF"> { </span><span style="color: #001080">size:</span><span style="color: #000000FF"> </span><span style="color: #098658">12</span><span style="color: #000000FF"> }} })</span>
569
- <span style="color: #000000FF"> </span><span style="color: #008000">// OR, do both</span>
570
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">labelAllLocations</span><span style="color: #000000FF">({ </span><span style="color: #001080">appearance:</span>
571
- <span style="color: #000000FF"> {</span>
572
- <span style="color: #000000FF"> </span><span style="color: #000000">...</span><span style="color: #001080">labelThemes</span><span style="color: #000000FF">.</span><span style="color: #001080">lightOnDark</span><span style="color: #000000FF">,</span>
573
- <span style="color: #000000FF"> </span><span style="color: #001080">margin:</span><span style="color: #000000FF"> </span><span style="color: #098658">20</span><span style="color: #000000FF">,</span>
574
- <span style="color: #000000FF"> </span><span style="color: #001080">text:</span><span style="color: #000000FF"> {</span>
575
- <span style="color: #000000FF"> </span><span style="color: #000000">...</span><span style="color: #001080">labelThemes</span><span style="color: #000000FF">.</span><span style="color: #001080">lightOnDark</span><span style="color: #000000FF">.</span><span style="color: #001080">text</span><span style="color: #000000FF">,</span>
576
- <span style="color: #000000FF"> </span><span style="color: #001080">size:</span><span style="color: #000000FF"> </span><span style="color: #098658">20</span>
577
- <span style="color: #000000FF"> }</span>
578
- <span style="color: #000000FF"> }</span>
579
- <span style="color: #000000FF"> })</span>
580
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
581
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
582
- <span style="color: #000000"> )</span>
583
- <span style="color: #000000">}</span>
584
- </code></pre>
585
- <a href="#addingremoving-markers" id="addingremoving-markers" style="color: inherit; text-decoration: none;">
586
- <h2>Adding/Removing markers</h2>
587
- </a>
588
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
589
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
590
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
591
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
592
-
593
- <span style="color: #008000">// Imperative API</span>
594
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
595
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">markerId</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">(</span><span style="color: #0000FF">null</span><span style="color: #000000">);</span>
596
-
597
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
598
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
599
- <span style="color: #000000"> </span><span style="color: #800000">&lt;&gt;</span>
600
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
601
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
602
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
603
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
604
- <span style="color: #000000"> </span><span style="color: #FF0000">onDataLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
605
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">BlueDot</span><span style="color: #000000FF">.</span><span style="color: #795E26">enable</span><span style="color: #000000FF">();</span>
606
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
607
- <span style="color: #000000"> </span><span style="color: #FF0000">onPolygonClicked</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">polygon</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
608
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">if</span><span style="color: #000000FF"> (</span><span style="color: #001080">markerId</span><span style="color: #000000FF"> </span><span style="color: #000000">!=</span><span style="color: #000000FF"> </span><span style="color: #0000FF">null</span><span style="color: #000000FF">) {</span>
609
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">removeMarker</span><span style="color: #000000FF">(</span><span style="color: #001080">markerId</span><span style="color: #000000FF">);</span>
610
- <span style="color: #000000FF"> }</span>
611
- <span style="color: #000000FF"> </span><span style="color: #008000">// Let&#039;s add a marker anchored to the top of the first entrance to polygon</span>
612
- <span style="color: #000000FF"> </span><span style="color: #001080">markerId</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #795E26">createMarker</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">.</span><span style="color: #001080">entrances</span><span style="color: #000000FF">[</span><span style="color: #098658">0</span><span style="color: #000000FF">], </span><span style="color: #A31515">`</span>
613
- <span style="color: #A31515"> &lt;div style=&quot;width: 32px; height: 32px;&quot;&gt;</span>
614
- <span style="color: #A31515"> &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 293.334 293.334&quot;&gt;&lt;g fill=&quot;#010002&quot;&gt;&lt;path d=&quot;M146.667 0C94.903 0 52.946 41.957 52.946 93.721c0 22.322 7.849 42.789 20.891 58.878 4.204 5.178 11.237 13.331 14.903 18.906 21.109 32.069 48.19 78.643 56.082 116.864 1.354 6.527 2.986 6.641 4.743.212 5.629-20.609 20.228-65.639 50.377-112.757 3.595-5.619 10.884-13.483 15.409-18.379a94.561 94.561 0 0016.154-24.084c5.651-12.086 8.882-25.466 8.882-39.629C240.387 41.962 198.43 0 146.667 0zm0 144.358c-28.892 0-52.313-23.421-52.313-52.313 0-28.887 23.421-52.307 52.313-52.307s52.313 23.421 52.313 52.307c0 28.893-23.421 52.313-52.313 52.313z&quot;/&gt;&lt;circle cx=&quot;146.667&quot; cy=&quot;90.196&quot; r=&quot;21.756&quot;/&gt;&lt;/g&gt;&lt;/svg&gt;</span>
615
- <span style="color: #A31515"> &lt;/div&gt;</span>
616
- <span style="color: #A31515"> `</span><span style="color: #000000FF">,</span>
617
- <span style="color: #000000FF"> {</span>
618
- <span style="color: #000000FF"> </span><span style="color: #001080">anchor:</span><span style="color: #000000FF"> </span><span style="color: #0070C1">MARKER_ANCHOR</span><span style="color: #000000FF">.</span><span style="color: #0070C1">TOP</span><span style="color: #000000FF">,</span>
619
- <span style="color: #000000FF"> })</span>
620
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
621
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
622
- <span style="color: #000000"> )</span>
623
- <span style="color: #000000">}</span>
624
- </code></pre>
625
- <a href="#get-nearest-node-to-point-on-screen" id="get-nearest-node-to-point-on-screen" style="color: inherit; text-decoration: none;">
626
- <h2>Get nearest node to point on screen</h2>
627
- </a>
628
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
629
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> { </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
630
-
631
- <span style="color: #008000">// Imperative API</span>
632
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
633
-
634
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
635
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
636
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">TouchableWithoutFeedback</span>
637
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
638
- <span style="color: #000000"> </span><span style="color: #FF0000">onPress</span><span style="color: #000000">=</span><span style="color: #0000FF">{async</span><span style="color: #000000FF"> ({ </span><span style="color: #001080">locationX</span><span style="color: #000000FF">, </span><span style="color: #001080">locationY</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
639
- <span style="color: #000000FF"> </span><span style="color: #008000">// get nearest node to X,Y screen coordinate</span>
640
- <span style="color: #000000FF"> </span><span style="color: #0000FF">const</span><span style="color: #000000FF"> </span><span style="color: #0070C1">node</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #AF00DB">await</span><span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #795E26">getNearestNodeByScreenCoordinates</span><span style="color: #000000FF">(</span>
641
- <span style="color: #000000FF"> </span><span style="color: #001080">locationX</span><span style="color: #000000FF">,</span>
642
- <span style="color: #000000FF"> </span><span style="color: #001080">locationY</span><span style="color: #000000FF">,</span>
643
- <span style="color: #000000FF"> );</span>
644
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
645
- <span style="color: #000000"> </span><span style="color: #800000">&gt;</span>
646
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span><span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span><span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span><span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span><span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
647
- <span style="color: #000000"> </span><span style="color: #800000">&lt;/</span><span style="color: #267F99">TouchableWithoutFeedback</span><span style="color: #800000">&gt;</span>
648
- <span style="color: #000000"> );</span>
649
- <span style="color: #000000">};</span>
650
- </code></pre>
651
- <a href="#get-directions-from-bluedot-and-show-path-and-connections-on-map" id="get-directions-from-bluedot-and-show-path-and-connections-on-map" style="color: inherit; text-decoration: none;">
652
- <h2>Get Directions from BlueDot and show path and connections on map</h2>
653
- </a>
654
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">MiMapView</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
655
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #AF00DB">type</span><span style="color: #000000"> {</span>
656
- <span style="color: #000000"> </span><span style="color: #001080">TBlueDotUpdate</span><span style="color: #000000">,</span>
657
- <span style="color: #000000"> </span><span style="color: #001080">IMapViewStore</span><span style="color: #000000">,</span>
658
- <span style="color: #000000"> </span><span style="color: #001080">MappedinLocation</span><span style="color: #000000">,</span>
659
- <span style="color: #000000"> </span><span style="color: #001080">MappedinNode</span><span style="color: #000000">,</span>
660
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
661
-
662
- <span style="color: #008000">// Imperative API</span>
663
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">mapView</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">IMapViewStore</span><span style="color: #000000">&gt;();</span>
664
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">nearestNode</span><span style="color: #000000"> = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useRef</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinNode</span><span style="color: #000000">&gt;();</span>
665
- <span style="color: #0000FF">const</span><span style="color: #000000"> [</span>
666
- <span style="color: #000000"> </span><span style="color: #0070C1">selectedLocation</span><span style="color: #000000">,</span>
667
- <span style="color: #000000"> </span><span style="color: #0070C1">setSelectedLocation</span><span style="color: #000000">,</span>
668
- <span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">MappedinLocation</span><span style="color: #000000">&gt;({});</span>
669
-
670
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
671
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
672
- <span style="color: #000000"> </span><span style="color: #800000">&lt;&gt;</span>
673
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
674
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
675
- <span style="color: #000000"> </span><span style="color: #FF0000">ref</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">mapView</span><span style="color: #0000FF">}</span>
676
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
677
- <span style="color: #000000"> </span><span style="color: #FF0000">onDataLoaded</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
678
- <span style="color: #000000FF"> </span><span style="color: #001080">mapView</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">.</span><span style="color: #001080">BlueDot</span><span style="color: #000000FF">.</span><span style="color: #795E26">enable</span><span style="color: #000000FF">();</span>
679
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
680
- <span style="color: #000000"> </span><span style="color: #FF0000">onBlueDotStateChanged</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">stateChange</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
681
- <span style="color: #000000FF"> </span><span style="color: #001080">nearestNode</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #001080">stateChange</span><span style="color: #000000FF">.</span><span style="color: #001080">nearestNode</span><span style="color: #000000FF">;</span>
682
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
683
- <span style="color: #000000"> </span><span style="color: #FF0000">onPolygonClicked</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">({ </span><span style="color: #001080">polygon</span><span style="color: #000000FF">: </span><span style="color: #001080">MappedinPolygon</span><span style="color: #000000FF"> }) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
684
- <span style="color: #000000FF"> </span><span style="color: #795E26">setSelectedLocation</span><span style="color: #000000FF">(</span><span style="color: #001080">polygon</span><span style="color: #000000FF">.</span><span style="color: #001080">locations</span><span style="color: #000000FF">[</span><span style="color: #098658">0</span><span style="color: #000000FF">]);</span>
685
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
686
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
687
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">Button</span>
688
- <span style="color: #000000"> </span><span style="color: #FF0000">title</span><span style="color: #000000">=</span><span style="color: #A31515">&quot;Get Directions&quot;</span>
689
- <span style="color: #000000"> </span><span style="color: #FF0000">onPress</span><span style="color: #000000">=</span><span style="color: #0000FF">{async</span><span style="color: #000000FF"> () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {</span>
690
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">try</span><span style="color: #000000FF"> {</span>
691
- <span style="color: #000000FF"> </span><span style="color: #008000">// get Directions</span>
692
- <span style="color: #000000FF"> </span><span style="color: #0000FF">const</span><span style="color: #000000FF"> </span><span style="color: #0070C1">directions</span><span style="color: #000000FF"> </span><span style="color: #000000">=</span><span style="color: #000000FF"> </span><span style="color: #AF00DB">await</span><span style="color: #000000FF"> </span><span style="color: #001080">controller</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #795E26">getDirections</span><span style="color: #000000FF">({</span>
693
- <span style="color: #000000FF"> </span><span style="color: #001080">from:</span><span style="color: #000000FF"> </span><span style="color: #001080">nearestNode</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">,</span>
694
- <span style="color: #000000FF"> </span><span style="color: #001080">to:</span><span style="color: #000000FF"> </span><span style="color: #001080">selectedLocation</span><span style="color: #000000FF">,</span>
695
- <span style="color: #000000FF"> });</span>
696
- <span style="color: #000000FF"> </span><span style="color: #008000">// draw path and connections on map</span>
697
- <span style="color: #000000FF"> </span><span style="color: #AF00DB">await</span><span style="color: #000000FF"> </span><span style="color: #001080">controller</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #001080">Journey</span><span style="color: #000000FF">.</span><span style="color: #795E26">draw</span><span style="color: #000000FF">(</span><span style="color: #001080">directions</span><span style="color: #000000FF">);</span>
698
- <span style="color: #000000FF"> </span><span style="color: #008000">// focus on the path</span>
699
- <span style="color: #000000FF"> </span><span style="color: #001080">controller</span><span style="color: #000000FF">.</span><span style="color: #001080">current</span><span style="color: #000000FF">?.</span><span style="color: #795E26">focusOn</span><span style="color: #000000FF">({</span>
700
- <span style="color: #000000FF"> </span><span style="color: #001080">nodes:</span><span style="color: #000000FF"> </span><span style="color: #001080">directions</span><span style="color: #000000FF">.</span><span style="color: #001080">path</span><span style="color: #000000FF">,</span>
701
- <span style="color: #000000FF"> });</span>
702
- <span style="color: #000000FF"> } </span><span style="color: #AF00DB">catch</span><span style="color: #000000FF"> (</span><span style="color: #001080">e</span><span style="color: #000000FF">) {</span>
703
- <span style="color: #000000FF"> </span><span style="color: #001080">console</span><span style="color: #000000FF">.</span><span style="color: #795E26">error</span><span style="color: #000000FF">(</span><span style="color: #001080">e</span><span style="color: #000000FF">);</span>
704
- <span style="color: #000000FF"> }</span>
705
- <span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
706
- <span style="color: #000000"> </span><span style="color: #800000">&gt;&lt;/</span><span style="color: #267F99">Button</span><span style="color: #800000">&gt;</span>
707
- <span style="color: #000000"> </span><span style="color: #800000">&lt;/&gt;</span>
708
- <span style="color: #000000"> );</span>
709
- <span style="color: #000000">};</span>
710
- </code></pre>
711
- <a href="#use-react-native-location-to-power-bluedot" id="use-react-native-location-to-power-bluedot" style="color: inherit; text-decoration: none;">
712
- <h2>Use <code>react-native-location</code> to power BlueDot</h2>
713
- </a>
714
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">RNLocation</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react-native-location&#039;</span><span style="color: #000000">;</span>
715
-
716
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
717
- <span style="color: #000000"> ...</span>
718
-
719
- <span style="color: #000000"> </span><span style="color: #001080">RNLocation</span><span style="color: #000000">.</span><span style="color: #795E26">requestPermission</span><span style="color: #000000">({</span>
720
- <span style="color: #000000"> </span><span style="color: #001080">ios:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;whenInUse&#039;</span><span style="color: #000000">,</span>
721
- <span style="color: #000000"> </span><span style="color: #001080">android:</span><span style="color: #000000"> {</span>
722
- <span style="color: #000000"> </span><span style="color: #001080">detail:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;coarse&#039;</span><span style="color: #000000">,</span>
723
- <span style="color: #000000"> },</span>
724
- <span style="color: #000000"> }).</span><span style="color: #795E26">then</span><span style="color: #000000">((</span><span style="color: #001080">granted</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
725
- <span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080">granted</span><span style="color: #000000">) {</span>
726
- <span style="color: #000000"> </span><span style="color: #008000">// Enable blue dot</span>
727
- <span style="color: #000000"> </span><span style="color: #001080">mapView</span><span style="color: #000000">.</span><span style="color: #001080">current</span><span style="color: #000000">.</span><span style="color: #001080">BlueDot</span><span style="color: #000000">.</span><span style="color: #795E26">enable</span><span style="color: #000000">();</span>
728
- <span style="color: #000000"> </span><span style="color: #001080">RNLocation</span><span style="color: #000000">.</span><span style="color: #795E26">subscribeToLocationUpdates</span><span style="color: #000000">((</span><span style="color: #001080">locations</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
729
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> {</span>
730
- <span style="color: #000000"> </span><span style="color: #0070C1">accuracy</span><span style="color: #000000">,</span>
731
- <span style="color: #000000"> </span><span style="color: #0070C1">floor</span><span style="color: #000000">,</span>
732
- <span style="color: #000000"> </span><span style="color: #0070C1">latitude</span><span style="color: #000000">,</span>
733
- <span style="color: #000000"> </span><span style="color: #0070C1">longitude</span><span style="color: #000000">,</span>
734
- <span style="color: #000000"> </span><span style="color: #0070C1">timestamp</span><span style="color: #000000">,</span>
735
- <span style="color: #000000"> } = </span><span style="color: #001080">locations</span><span style="color: #000000">[</span><span style="color: #098658">0</span><span style="color: #000000">];</span>
736
-
737
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">location</span><span style="color: #000000"> = {</span>
738
- <span style="color: #000000"> </span><span style="color: #001080">timestamp</span><span style="color: #000000">,</span>
739
- <span style="color: #000000"> </span><span style="color: #001080">coords:</span><span style="color: #000000"> {</span>
740
- <span style="color: #000000"> </span><span style="color: #001080">latitude</span><span style="color: #000000">,</span>
741
- <span style="color: #000000"> </span><span style="color: #001080">longitude</span><span style="color: #000000">,</span>
742
- <span style="color: #000000"> </span><span style="color: #001080">accuracy</span><span style="color: #000000">,</span>
743
- <span style="color: #000000"> </span><span style="color: #001080">floorLevel:</span><span style="color: #000000"> </span><span style="color: #001080">floor</span><span style="color: #000000">,</span>
744
- <span style="color: #000000"> },</span>
745
- <span style="color: #000000"> };</span>
746
- <span style="color: #000000"> </span><span style="color: #008000">// pass locations in</span>
747
- <span style="color: #000000"> </span><span style="color: #001080">mapView</span><span style="color: #000000">.</span><span style="color: #001080">current</span><span style="color: #000000">.</span><span style="color: #795E26">overrideLocation</span><span style="color: #000000">(</span><span style="color: #001080">location</span><span style="color: #000000">);</span>
748
- <span style="color: #000000"> });</span>
749
- <span style="color: #000000"> }</span>
750
- <span style="color: #000000"> });</span>
751
-
752
- <span style="color: #000000"> ...</span>
753
- <span style="color: #000000">};</span>
754
- </code></pre>
755
- <a href="#minimap" id="minimap" style="color: inherit; text-decoration: none;">
756
- <h2>MiniMap</h2>
757
- </a>
758
- <p>Component Signature:</p>
759
- <pre><code class="language-typescript"><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">MiMiniMap</span><span style="color: #000000"> = (</span><span style="color: #001080">props</span><span style="color: #000000">: </span><span style="color: #267F99">TMiniMapProps</span><span style="color: #000000">) </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #001080">ReactElement</span><span style="color: #000000">;</span>
760
- </code></pre>
761
- <a href="#props-1" id="props-1" style="color: inherit; text-decoration: none;">
762
- <h3>Props:</h3>
763
- </a>
764
- <p><a href="modules.html#tmiminimapprops">Documented in Detail here</a></p>
765
- <table>
766
- <thead>
767
- <tr>
768
- <th>Prop</th>
769
- <th>Description</th>
770
- <th>Signature</th>
771
- <th>Required</th>
772
- </tr>
773
- </thead>
774
- <tbody><tr>
775
- <td>options</td>
776
- <td>Options to initialize MapView with</td>
777
- <td><a href="modules.html#tmimapviewoptions"><code>TMiMapViewOptions</code><a></td>
778
- <td>Yes</td>
779
- </tr>
780
- <tr>
781
- <td>location</td>
782
- <td>Options to initialize MapView with</td>
783
- <td><a href="mclasses/mappedinlocation.html"><code>MappedinLocation | string</code><a></td>
784
- <td>Yes</td>
785
- </tr>
786
- <tr>
787
- <td>onLoad</td>
788
- <td>Gets called when minimap is rendered</td>
789
- <td>() =&gt; void</td>
790
- <td>No</td>
791
- </tr>
792
- <tr>
793
- <td>polygonHighlightColor</td>
794
- <td>Color to use when highlighting polygon</td>
795
- <td><code>string</code></td>
796
- <td>No</td>
797
- </tr>
798
- <tr>
799
- <td>focusOptions</td>
800
- <td>Override focus Options when generating minimap</td>
801
- <td><a href="modules.html#tfocusoptions"><code>TFocusOptions</code></a></td>
802
- <td>No</td>
803
- </tr>
804
- </tbody></table>
805
- <p>Example:</p>
806
- <pre><code class="language-tsx"><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
807
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
808
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMiniMap</span>
809
- <span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">width:</span><span style="color: #000000FF"> </span><span style="color: #098658">500</span><span style="color: #000000FF">, </span><span style="color: #001080">height:</span><span style="color: #000000FF"> </span><span style="color: #098658">200</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
810
- <span style="color: #000000"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #000000FF">: </span><span style="color: #001080">TGetVenueOptions</span><span style="color: #0000FF">}</span>
811
- <span style="color: #000000"> </span><span style="color: #008000">/**</span>
812
- <span style="color: #008000"> * Called when miniMap is rendered</span>
813
- <span style="color: #008000"> */</span>
814
- <span style="color: #000000"> </span><span style="color: #FF0000">onLoad</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000FF"> {}</span><span style="color: #0000FF">}</span>
815
- <span style="color: #000000"> </span><span style="color: #008000">/**</span>
816
- <span style="color: #008000"> * What color to use when highlighting polygon</span>
817
- <span style="color: #008000"> */</span>
818
- <span style="color: #000000"> </span><span style="color: #FF0000">polygonHighlightColor</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">string</span><span style="color: #0000FF">}</span>
819
- <span style="color: #000000"> </span><span style="color: #008000">/**</span>
820
- <span style="color: #008000"> * Finer control over focus</span>
821
- <span style="color: #008000"> */</span>
822
- <span style="color: #000000"> </span><span style="color: #FF0000">focusOptions</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #000000FF">: </span><span style="color: #001080">TFocusOptions</span><span style="color: #0000FF">}</span>
823
- <span style="color: #000000"> </span><span style="color: #FF0000">location</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">selectedLocation</span><span style="color: #000000FF">: </span><span style="color: #001080">MappedinLocation</span><span style="color: #000000FF"> </span><span style="color: #000000">|</span><span style="color: #000000FF"> </span><span style="color: #001080">MappedinLocation</span><span style="color: #000000FF">[</span><span style="color: #A31515">&quot;id&quot;</span><span style="color: #000000FF">]</span><span style="color: #0000FF">}</span>
824
- <span style="color: #000000"> </span><span style="color: #800000">/&gt;</span>
825
- <span style="color: #000000"> );</span>
826
- <span style="color: #000000">};</span>
827
- </code></pre>
828
- <a href="#experimental-fetching-an-offline-venue-bundle" id="experimental-fetching-an-offline-venue-bundle" style="color: inherit; text-decoration: none;">
829
- <h3>[experimental] Fetching an offline Venue bundle</h3>
830
- </a>
831
- <p>It is possible to download the venue bundle with all assets built in, which allows for caching/offline solutions.</p>
832
- <p>Note 1: This must be enabled by Mappedin&#39;s Customer Solutions team.</p>
833
- <p>Note 2: This may slow down map rendering for large venues, especially those with many images. We have improvements to this on our roadmap.</p>
834
- <pre><code class="language-tsx"><span style="color: #AF00DB">import</span><span style="color: #000000"> {</span>
835
- <span style="color: #000000"> </span><span style="color: #001080">getVenueBundle</span><span style="color: #000000">,</span>
836
- <span style="color: #000000"> </span><span style="color: #001080">MiMapView</span><span style="color: #000000">,</span>
837
- <span style="color: #000000"> </span><span style="color: #001080">Mappedin</span><span style="color: #000000">,</span>
838
- <span style="color: #000000">} </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;@mappedin/react-native-sdk&#039;</span><span style="color: #000000">;</span>
839
- <span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">View</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react-native&#039;</span><span style="color: #000000">;</span>
840
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">React</span><span style="color: #000000">, { </span><span style="color: #001080">useEffect</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react&#039;</span><span style="color: #000000">;</span>
841
- <span style="color: #AF00DB">import</span><span style="color: #000000"> </span><span style="color: #001080">fs</span><span style="color: #000000"> </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;react-native-fs&#039;</span><span style="color: #000000">;</span>
842
-
843
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">options</span><span style="color: #000000"> = {</span>
844
- <span style="color: #000000"> </span><span style="color: #001080">clientId:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;clientId&#039;</span><span style="color: #000000">,</span>
845
- <span style="color: #000000"> </span><span style="color: #001080">clientSecret:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;clientSecret&#039;</span><span style="color: #000000">,</span>
846
- <span style="color: #000000"> </span><span style="color: #001080">venue:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;venue-slug&#039;</span><span style="color: #000000">,</span>
847
- <span style="color: #000000"> </span><span style="color: #001080">perspective:</span><span style="color: #000000"> </span><span style="color: #A31515">&#039;Website&#039;</span><span style="color: #000000">,</span>
848
- <span style="color: #000000">};</span>
849
-
850
- <span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">App</span><span style="color: #000000"> = () </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
851
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> [</span><span style="color: #0070C1">venueData</span><span style="color: #000000">, </span><span style="color: #0070C1">setVenueData</span><span style="color: #000000">] = </span><span style="color: #001080">React</span><span style="color: #000000">.</span><span style="color: #795E26">useState</span><span style="color: #000000">&lt;</span><span style="color: #267F99">Mappedin</span><span style="color: #000000">&gt;();</span>
852
-
853
- <span style="color: #000000"> </span><span style="color: #795E26">useEffect</span><span style="color: #000000">(() </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
854
- <span style="color: #000000"> </span><span style="color: #0000FF">async</span><span style="color: #000000"> </span><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26">init</span><span style="color: #000000">() {</span>
855
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">path</span><span style="color: #000000"> = </span><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #001080">DocumentDirectoryPath</span><span style="color: #000000"> + </span><span style="color: #A31515">&#039;/bundle.json&#039;</span><span style="color: #000000">;</span>
856
- <span style="color: #000000"> </span><span style="color: #AF00DB">try</span><span style="color: #000000"> {</span>
857
- <span style="color: #000000"> </span><span style="color: #008000">// let&#039;s check if cache exists</span>
858
- <span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (!(</span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #795E26">exists</span><span style="color: #000000">(</span><span style="color: #001080">path</span><span style="color: #000000">))) {</span>
859
- <span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;cache doesnt exist&#039;</span><span style="color: #000000">);</span>
860
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">venue</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">getVenueBundle</span><span style="color: #000000">(</span><span style="color: #001080">options</span><span style="color: #000000">);</span>
861
- <span style="color: #000000"> </span><span style="color: #795E26">setVenueData</span><span style="color: #000000">(</span><span style="color: #001080">venue</span><span style="color: #000000">);</span>
862
- <span style="color: #000000"> </span><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #795E26">writeFile</span><span style="color: #000000">(</span><span style="color: #001080">path</span><span style="color: #000000">, </span><span style="color: #001080">venue</span><span style="color: #000000">.</span><span style="color: #795E26">toString</span><span style="color: #000000">());</span>
863
- <span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span>
864
- <span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #A31515">&#039;cache exists, using&#039;</span><span style="color: #000000">);</span>
865
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">venueString</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #001080">fs</span><span style="color: #000000">.</span><span style="color: #795E26">readFile</span><span style="color: #000000">(</span><span style="color: #001080">path</span><span style="color: #000000">);</span>
866
- <span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">venue</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #795E26">Mappedin</span><span style="color: #000000">(</span><span style="color: #001080">options</span><span style="color: #000000">);</span>
867
- <span style="color: #000000"> </span><span style="color: #008000">// hydrate the instance with cached data</span>
868
- <span style="color: #000000"> </span><span style="color: #001080">venue</span><span style="color: #000000">.</span><span style="color: #795E26">hydrate</span><span style="color: #000000">(</span><span style="color: #001080">venueString</span><span style="color: #000000">);</span>
869
- <span style="color: #000000"> </span><span style="color: #795E26">setVenueData</span><span style="color: #000000">(</span><span style="color: #001080">venue</span><span style="color: #000000">);</span>
870
- <span style="color: #000000"> }</span>
871
- <span style="color: #000000"> } </span><span style="color: #AF00DB">catch</span><span style="color: #000000"> (</span><span style="color: #001080">e</span><span style="color: #000000">) {</span>
872
- <span style="color: #000000"> </span><span style="color: #001080">console</span><span style="color: #000000">.</span><span style="color: #795E26">error</span><span style="color: #000000">(</span><span style="color: #001080">e</span><span style="color: #000000">);</span>
873
- <span style="color: #000000"> }</span>
874
- <span style="color: #000000"> }</span>
875
- <span style="color: #000000"> </span><span style="color: #795E26">init</span><span style="color: #000000">();</span>
876
- <span style="color: #000000"> }, []);</span>
877
-
878
- <span style="color: #000000"> </span><span style="color: #AF00DB">return</span><span style="color: #000000"> (</span>
879
- <span style="color: #000000"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">View</span><span style="color: #000000"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span><span style="color: #800000">&gt;</span>
880
- <span style="color: #000000"> </span><span style="color: #0000FF">{</span><span style="color: #001080">venueData</span><span style="color: #000000FF"> </span><span style="color: #000000">!=</span><span style="color: #000000FF"> </span><span style="color: #0000FF">null</span><span style="color: #000000FF"> </span><span style="color: #000000">&amp;&amp;</span><span style="color: #000000FF"> (</span>
881
- <span style="color: #000000FF"> </span><span style="color: #800000">&lt;</span><span style="color: #267F99">MiMapView</span>
882
- <span style="color: #000000FF"> </span><span style="color: #FF0000">style</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #000000FF">{ </span><span style="color: #001080">flex:</span><span style="color: #000000FF"> </span><span style="color: #098658">1</span><span style="color: #000000FF"> }</span><span style="color: #0000FF">}</span>
883
- <span style="color: #000000FF"> </span><span style="color: #FF0000">options</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">options</span><span style="color: #0000FF">}</span>
884
- <span style="color: #000000FF"> </span><span style="color: #008000">// pass venueData in</span>
885
- <span style="color: #000000FF"> </span><span style="color: #FF0000">venueData</span><span style="color: #000000">=</span><span style="color: #0000FF">{</span><span style="color: #001080">venueData</span><span style="color: #0000FF">}</span>
886
- <span style="color: #000000FF"> </span><span style="color: #800000">/&gt;</span>
887
- <span style="color: #000000FF"> )</span><span style="color: #0000FF">}</span>
888
- <span style="color: #000000"> </span><span style="color: #800000">&lt;/</span><span style="color: #267F99">View</span><span style="color: #800000">&gt;</span>
889
- <span style="color: #000000"> );</span>
890
- <span style="color: #000000">};</span>
891
- </code></pre>
892
- </div>
893
- </div>
894
- <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
895
- <nav class="tsd-navigation primary">
896
- <ul>
897
- <li class=" ">
898
- <a href="modules.html">Exports</a>
899
- </li>
900
- </ul>
901
- </nav>
902
- <nav class="tsd-navigation secondary menu-sticky">
903
- <ul class="before-current">
904
- <li class=" tsd-kind-enum">
905
- <a href="enums/action_type.html" class="tsd-kind-icon">ACTION_<wbr>TYPE</a>
906
- </li>
907
- <li class=" tsd-kind-enum">
908
- <a href="enums/bearing_type.html" class="tsd-kind-icon">BEARING_<wbr>TYPE</a>
909
- </li>
910
- <li class=" tsd-kind-enum">
911
- <a href="enums/collision_ranking_tiers.html" class="tsd-kind-icon">COLLISION_<wbr>RANKING_<wbr>TIERS</a>
912
- </li>
913
- <li class=" tsd-kind-enum">
914
- <a href="enums/e_bluedot_state.html" class="tsd-kind-icon">E_<wbr>BLUEDOT_<wbr>STATE</a>
915
- </li>
916
- <li class=" tsd-kind-enum">
917
- <a href="enums/e_bluedot_state_reason.html" class="tsd-kind-icon">E_<wbr>BLUEDOT_<wbr>STATE_<wbr>REASON</a>
918
- </li>
919
- <li class=" tsd-kind-enum">
920
- <a href="enums/e_marker_state.html" class="tsd-kind-icon">E_<wbr>MARKER_<wbr>STATE</a>
921
- </li>
922
- <li class=" tsd-kind-enum">
923
- <a href="enums/marker_anchor.html" class="tsd-kind-icon">MARKER_<wbr>ANCHOR</a>
924
- </li>
925
- <li class=" tsd-kind-enum">
926
- <a href="enums/state.html" class="tsd-kind-icon">STATE</a>
927
- </li>
928
- <li class=" tsd-kind-class">
929
- <a href="classes/mapviewstore.html" class="tsd-kind-icon">Map<wbr>View<wbr>Store</a>
930
- </li>
931
- <li class=" tsd-kind-class">
932
- <a href="classes/mappedin.html" class="tsd-kind-icon">Mappedin</a>
933
- </li>
934
- <li class=" tsd-kind-class">
935
- <a href="classes/mappedincategory.html" class="tsd-kind-icon">Mappedin<wbr>Category</a>
936
- </li>
937
- <li class=" tsd-kind-class">
938
- <a href="classes/mappedindestinationset.html" class="tsd-kind-icon">Mappedin<wbr>Destination<wbr>Set</a>
939
- </li>
940
- <li class=" tsd-kind-class">
941
- <a href="classes/mappedindirections.html" class="tsd-kind-icon">Mappedin<wbr>Directions</a>
942
- </li>
943
- <li class=" tsd-kind-class">
944
- <a href="classes/mappedinevent.html" class="tsd-kind-icon">Mappedin<wbr>Event</a>
945
- </li>
946
- <li class=" tsd-kind-class">
947
- <a href="classes/mappedinlocation.html" class="tsd-kind-icon">Mappedin<wbr>Location</a>
948
- </li>
949
- <li class=" tsd-kind-class">
950
- <a href="classes/mappedinmap.html" class="tsd-kind-icon">Mappedin<wbr>Map</a>
951
- </li>
952
- <li class=" tsd-kind-class">
953
- <a href="classes/mappedinmapgroup.html" class="tsd-kind-icon">Mappedin<wbr>Map<wbr>Group</a>
954
- </li>
955
- <li class=" tsd-kind-class">
956
- <a href="classes/mappedinnode.html" class="tsd-kind-icon">Mappedin<wbr>Node</a>
957
- </li>
958
- <li class=" tsd-kind-class">
959
- <a href="classes/mappedinpolygon.html" class="tsd-kind-icon">Mappedin<wbr>Polygon</a>
960
- </li>
961
- <li class=" tsd-kind-class">
962
- <a href="classes/mappedinrankings.html" class="tsd-kind-icon">Mappedin<wbr>Rankings</a>
963
- </li>
964
- <li class=" tsd-kind-class">
965
- <a href="classes/mappedinvenue.html" class="tsd-kind-icon">Mappedin<wbr>Venue</a>
966
- </li>
967
- <li class=" tsd-kind-class">
968
- <a href="classes/mappedinvortex.html" class="tsd-kind-icon">Mappedin<wbr>Vortex</a>
969
- </li>
970
- <li class=" tsd-kind-type-alias">
971
- <a href="modules.html#mimapview" class="tsd-kind-icon">Mi<wbr>Map<wbr>View</a>
972
- </li>
973
- <li class=" tsd-kind-type-alias">
974
- <a href="modules.html#miminimap" class="tsd-kind-icon">Mi<wbr>Mini<wbr>Map</a>
975
- </li>
976
- <li class=" tsd-kind-type-alias">
977
- <a href="modules.html#tbluedotoptions" class="tsd-kind-icon">TBlue<wbr>Dot<wbr>Options</a>
978
- </li>
979
- <li class=" tsd-kind-type-alias">
980
- <a href="modules.html#tbluedotpositionupdate" class="tsd-kind-icon">TBlue<wbr>Dot<wbr>Position<wbr>Update</a>
981
- </li>
982
- <li class=" tsd-kind-type-alias">
983
- <a href="modules.html#tbluedotstatechange" class="tsd-kind-icon">TBlue<wbr>Dot<wbr>State<wbr>Change</a>
984
- </li>
985
- <li class=" tsd-kind-type-alias">
986
- <a href="modules.html#tbluedotupdate" class="tsd-kind-icon">TBlue<wbr>Dot<wbr>Update</a>
987
- </li>
988
- <li class=" tsd-kind-type-alias">
989
- <a href="modules.html#tcreatemarkeroptions" class="tsd-kind-icon">TCreate<wbr>Marker<wbr>Options</a>
990
- </li>
991
- <li class=" tsd-kind-type-alias">
992
- <a href="modules.html#tfocusoptions" class="tsd-kind-icon">TFocus<wbr>Options</a>
993
- </li>
994
- <li class=" tsd-kind-type-alias">
995
- <a href="modules.html#tgeolocationobject" class="tsd-kind-icon">TGeolocation<wbr>Object</a>
996
- </li>
997
- <li class=" tsd-kind-type-alias">
998
- <a href="modules.html#tgetvenuebundleoptions" class="tsd-kind-icon">TGet<wbr>Venue<wbr>Bundle<wbr>Options</a>
999
- </li>
1000
- <li class=" tsd-kind-type-alias">
1001
- <a href="modules.html#tgetvenueoptions" class="tsd-kind-icon">TGet<wbr>Venue<wbr>Options</a>
1002
- </li>
1003
- <li class=" tsd-kind-type-alias">
1004
- <a href="modules.html#tjourneyoptions" class="tsd-kind-icon">TJourney<wbr>Options</a>
1005
- </li>
1006
- <li class=" tsd-kind-type-alias">
1007
- <a href="modules.html#tlabelalllocationsoptions" class="tsd-kind-icon">TLabel<wbr>All<wbr>Locations<wbr>Options</a>
1008
- </li>
1009
- <li class=" tsd-kind-type-alias">
1010
- <a href="modules.html#tlabelappearance" class="tsd-kind-icon">TLabel<wbr>Appearance</a>
1011
- </li>
1012
- <li class=" tsd-kind-type-alias">
1013
- <a href="modules.html#tlabeloptions" class="tsd-kind-icon">TLabel<wbr>Options</a>
1014
- </li>
1015
- <li class=" tsd-kind-type-alias">
1016
- <a href="modules.html#tmappedindirective" class="tsd-kind-icon">TMappedin<wbr>Directive</a>
1017
- </li>
1018
- <li class=" tsd-kind-type-alias">
1019
- <a href="modules.html#tmimapviewoptions" class="tsd-kind-icon">TMi<wbr>Map<wbr>View<wbr>Options</a>
1020
- </li>
1021
- <li class=" tsd-kind-type-alias">
1022
- <a href="modules.html#tmimapviewprops" class="tsd-kind-icon">TMi<wbr>Map<wbr>View<wbr>Props</a>
1023
- </li>
1024
- <li class=" tsd-kind-type-alias">
1025
- <a href="modules.html#tmiminimapprops" class="tsd-kind-icon">TMi<wbr>Mini<wbr>Map<wbr>Props</a>
1026
- </li>
1027
- <li class=" tsd-kind-type-alias">
1028
- <a href="modules.html#tpathoptions" class="tsd-kind-icon">TPath<wbr>Options</a>
1029
- </li>
1030
- <li class=" tsd-kind-type-alias">
1031
- <a href="modules.html#tshowvenueoptions" class="tsd-kind-icon">TShow<wbr>Venue<wbr>Options</a>
1032
- </li>
1033
- <li class=" tsd-kind-variable">
1034
- <a href="modules.html#mimapview" class="tsd-kind-icon">Mi<wbr>Map<wbr>View</a>
1035
- </li>
1036
- <li class=" tsd-kind-variable">
1037
- <a href="modules.html#miminimap" class="tsd-kind-icon">Mi<wbr>Mini<wbr>Map</a>
1038
- </li>
1039
- <li class=" tsd-kind-variable">
1040
- <a href="modules.html#labelthemes" class="tsd-kind-icon">label<wbr>Themes</a>
1041
- </li>
1042
- <li class=" tsd-kind-function">
1043
- <a href="modules.html#getvenue" class="tsd-kind-icon">get<wbr>Venue</a>
1044
- </li>
1045
- <li class=" tsd-kind-function">
1046
- <a href="modules.html#getvenuebundle" class="tsd-kind-icon">get<wbr>Venue<wbr>Bundle</a>
1047
- </li>
1048
- </ul>
1049
- </nav>
1050
- </div>
1051
- </div>
1052
- </div>
1053
- <footer>
1054
- <div class="container">
1055
- <h2>Legend</h2>
1056
- <div class="tsd-legend-group">
1057
- <ul class="tsd-legend">
1058
- <li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
1059
- <li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
1060
- <li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
1061
- <li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
1062
- </ul>
1063
- <ul class="tsd-legend">
1064
- <li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
1065
- </ul>
1066
- <ul class="tsd-legend">
1067
- <li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
1068
- </ul>
1069
- <ul class="tsd-legend">
1070
- <li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
1071
- </ul>
1072
- </div>
1073
- </div>
1074
- </footer>
1075
- <div class="overlay"></div>
1076
- <script src="assets/js/main.js"></script>
1077
- </body>
1078
- </html>