@mapcomponents/react-maplibre 0.1.14 → 0.1.15

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 (81) hide show
  1. package/.github/workflows/storybook.yml +4 -2
  2. package/coverage/clover.xml +325 -297
  3. package/coverage/coverage-final.json +8 -8
  4. package/coverage/lcov-report/index.html +63 -63
  5. package/coverage/lcov-report/src/components/MapLibreMap/MapLibreMap.js.html +1 -1
  6. package/coverage/lcov-report/src/components/MapLibreMap/index.html +1 -1
  7. package/coverage/lcov-report/src/components/MlCreatePdfButton/MlCreatePdfButton.js.html +1 -1
  8. package/coverage/lcov-report/src/components/MlCreatePdfButton/index.html +1 -1
  9. package/coverage/lcov-report/src/components/MlFeatureEditor/MlFeatureEditor.js.html +1 -1
  10. package/coverage/lcov-report/src/components/MlFeatureEditor/index.html +1 -1
  11. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.js.html +1 -1
  12. package/coverage/lcov-report/src/components/MlFillExtrusionLayer/index.html +1 -1
  13. package/coverage/lcov-report/src/components/MlFollowGps/MlFollowGps.js.html +37 -34
  14. package/coverage/lcov-report/src/components/MlFollowGps/index.html +11 -11
  15. package/coverage/lcov-report/src/components/MlGPXViewer/MlGPXViewer.js.html +1 -1
  16. package/coverage/lcov-report/src/components/MlGPXViewer/gpxConverter.js.html +1 -1
  17. package/coverage/lcov-report/src/components/MlGPXViewer/index.html +1 -1
  18. package/coverage/lcov-report/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js.html +96 -30
  19. package/coverage/lcov-report/src/components/MlGeoJsonLayer/index.html +19 -19
  20. package/coverage/lcov-report/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js.html +45 -150
  21. package/coverage/lcov-report/src/components/MlImageMarkerLayer/index.html +19 -19
  22. package/coverage/lcov-report/src/components/MlLayer/MlLayer.js.html +93 -27
  23. package/coverage/lcov-report/src/components/MlLayer/index.html +19 -19
  24. package/coverage/lcov-report/src/components/MlLayerMagnify/MlLayerMagnify.js.html +1 -1
  25. package/coverage/lcov-report/src/components/MlLayerMagnify/index.html +1 -1
  26. package/coverage/lcov-report/src/components/MlLayerSwipe/MlLayerSwipe.js.html +1 -1
  27. package/coverage/lcov-report/src/components/MlLayerSwipe/index.html +1 -1
  28. package/coverage/lcov-report/src/components/MlLayerSwitcher/MlLayerSwitcher.js.html +1 -1
  29. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/LayerBox.js.html +1 -1
  30. package/coverage/lcov-report/src/components/MlLayerSwitcher/components/index.html +1 -1
  31. package/coverage/lcov-report/src/components/MlLayerSwitcher/index.html +1 -1
  32. package/coverage/lcov-report/src/components/MlMarker/MlMarker.js.html +1 -1
  33. package/coverage/lcov-report/src/components/MlMarker/index.html +1 -1
  34. package/coverage/lcov-report/src/components/MlNavigationCompass/MlNavigationCompass.js.html +1 -1
  35. package/coverage/lcov-report/src/components/MlNavigationCompass/index.html +1 -1
  36. package/coverage/lcov-report/src/components/MlNavigationTools/MlNavigationTools.js.html +10 -13
  37. package/coverage/lcov-report/src/components/MlNavigationTools/index.html +7 -7
  38. package/coverage/lcov-report/src/components/MlOsmLayer/MlOsmLayer.js.html +1 -1
  39. package/coverage/lcov-report/src/components/MlOsmLayer/index.html +1 -1
  40. package/coverage/lcov-report/src/components/MlScaleReference/MlScaleReference.js.html +1 -1
  41. package/coverage/lcov-report/src/components/MlScaleReference/index.html +1 -1
  42. package/coverage/lcov-report/src/components/MlShareMapState/MlShareMapState.js.html +208 -16
  43. package/coverage/lcov-report/src/components/MlShareMapState/index.html +9 -9
  44. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.js.html +1 -1
  45. package/coverage/lcov-report/src/components/MlSpatialElevationProfile/index.html +1 -1
  46. package/coverage/lcov-report/src/components/MlThreeJsLayer/MlThreeJsLayer.js.html +1 -1
  47. package/coverage/lcov-report/src/components/MlThreeJsLayer/index.html +1 -1
  48. package/coverage/lcov-report/src/components/MlUseMapDebugger/MlUseMapDebugger.js.html +1 -1
  49. package/coverage/lcov-report/src/components/MlUseMapDebugger/index.html +1 -1
  50. package/coverage/lcov-report/src/components/MlVectorTileLayer/MlVectorTileLayer.js.html +1 -1
  51. package/coverage/lcov-report/src/components/MlVectorTileLayer/index.html +1 -1
  52. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/MlWmsFeatureInfoPopup.js.html +1 -1
  53. package/coverage/lcov-report/src/components/MlWmsFeatureInfoPopup/index.html +1 -1
  54. package/coverage/lcov-report/src/components/MlWmsLayer/MlWmsLayer.js.html +1 -1
  55. package/coverage/lcov-report/src/components/MlWmsLayer/index.html +1 -1
  56. package/coverage/lcov-report/src/components/MlWmsLoader/MlWmsLoader.js.html +1 -1
  57. package/coverage/lcov-report/src/components/MlWmsLoader/index.html +1 -1
  58. package/coverage/lcov-report/src/hooks/index.html +32 -32
  59. package/coverage/lcov-report/src/hooks/useMap.js.html +85 -163
  60. package/coverage/lcov-report/src/hooks/useMapState.js.html +82 -82
  61. package/coverage/lcov-report/src/hooks/useWms.js.html +1 -1
  62. package/coverage/lcov-report/src/i18n.js.html +1 -1
  63. package/coverage/lcov-report/src/index.html +1 -1
  64. package/coverage/lcov-report/src/translations/english.js.html +1 -1
  65. package/coverage/lcov-report/src/translations/german.js.html +1 -1
  66. package/coverage/lcov-report/src/translations/index.html +1 -1
  67. package/coverage/lcov.info +620 -570
  68. package/dist/index.esm.js +787 -665
  69. package/dist/index.esm.js.map +1 -1
  70. package/package.json +1 -1
  71. package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js +13 -12
  72. package/src/components/MlFollowGps/MlFollowGps.js +23 -22
  73. package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js +23 -1
  74. package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js +21 -56
  75. package/src/components/MlLayer/MlLayer.js +26 -4
  76. package/src/components/MlNavigationTools/MlNavigationTools.js +4 -5
  77. package/src/components/MlShareMapState/MlShareMapState.js +73 -9
  78. package/src/components/MlShareMapState/MlShareMapState.stories.js +24 -1
  79. package/src/hooks/useMap.js +36 -62
  80. package/src/hooks/useMapState.js +3 -3
  81. package/src/index.js +2 -0
package/coverage/lcov-report/src/hooks/index.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
26
+ <span class="strong">50.42% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/128</span>
28
+ <span class='fraction'>59/117</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">0% </span>
33
+ <span class="strong">33.33% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/42</span>
35
+ <span class='fraction'>14/42</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
40
+ <span class="strong">47.36% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/22</span>
42
+ <span class='fraction'>9/19</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
47
+ <span class="strong">50.44% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/124</span>
49
+ <span class='fraction'>57/113</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line low'></div>
64
+ <div class='status-line medium'></div>
65
65
  <div class="pad1">
66
66
  <table class="coverage-summary">
67
67
  <thead>
@@ -79,33 +79,33 @@
79
79
  </tr>
80
80
  </thead>
81
81
  <tbody><tr>
82
- <td class="file low" data-value="useMap.js"><a href="useMap.js.html">useMap.js</a></td>
83
- <td data-value="0" class="pic low">
84
- <div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
82
+ <td class="file medium" data-value="useMap.js"><a href="useMap.js.html">useMap.js</a></td>
83
+ <td data-value="77.41" class="pic medium">
84
+ <div class="chart"><div class="cover-fill" style="width: 77%"></div><div class="cover-empty" style="width: 23%"></div></div>
85
85
  </td>
86
- <td data-value="0" class="pct low">0%</td>
87
- <td data-value="42" class="abs low">0/42</td>
88
- <td data-value="0" class="pct low">0%</td>
89
- <td data-value="12" class="abs low">0/12</td>
90
- <td data-value="0" class="pct low">0%</td>
91
- <td data-value="8" class="abs low">0/8</td>
92
- <td data-value="0" class="pct low">0%</td>
93
- <td data-value="41" class="abs low">0/41</td>
86
+ <td data-value="77.41" class="pct medium">77.41%</td>
87
+ <td data-value="31" class="abs medium">24/31</td>
88
+ <td data-value="50" class="pct medium">50%</td>
89
+ <td data-value="12" class="abs medium">6/12</td>
90
+ <td data-value="80" class="pct high">80%</td>
91
+ <td data-value="5" class="abs high">4/5</td>
92
+ <td data-value="76.66" class="pct medium">76.66%</td>
93
+ <td data-value="30" class="abs medium">23/30</td>
94
94
  </tr>
95
95
 
96
96
  <tr>
97
- <td class="file low" data-value="useMapState.js"><a href="useMapState.js.html">useMapState.js</a></td>
98
- <td data-value="0" class="pic low">
99
- <div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
97
+ <td class="file medium" data-value="useMapState.js"><a href="useMapState.js.html">useMapState.js</a></td>
98
+ <td data-value="74.46" class="pic medium">
99
+ <div class="chart"><div class="cover-fill" style="width: 74%"></div><div class="cover-empty" style="width: 26%"></div></div>
100
100
  </td>
101
- <td data-value="0" class="pct low">0%</td>
102
- <td data-value="47" class="abs low">0/47</td>
103
- <td data-value="0" class="pct low">0%</td>
104
- <td data-value="22" class="abs low">0/22</td>
105
- <td data-value="0" class="pct low">0%</td>
106
- <td data-value="7" class="abs low">0/7</td>
107
- <td data-value="0" class="pct low">0%</td>
108
- <td data-value="46" class="abs low">0/46</td>
101
+ <td data-value="74.46" class="pct medium">74.46%</td>
102
+ <td data-value="47" class="abs medium">35/47</td>
103
+ <td data-value="36.36" class="pct low">36.36%</td>
104
+ <td data-value="22" class="abs low">8/22</td>
105
+ <td data-value="71.42" class="pct medium">71.42%</td>
106
+ <td data-value="7" class="abs medium">5/7</td>
107
+ <td data-value="73.91" class="pct medium">73.91%</td>
108
+ <td data-value="46" class="abs medium">34/46</td>
109
109
  </tr>
110
110
 
111
111
  <tr>
@@ -131,7 +131,7 @@
131
131
  <div class='footer quiet pad2 space-top1 center small'>
132
132
  Code coverage generated by
133
133
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
134
- at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
134
+ at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
135
135
  </div>
136
136
  </div>
137
137
  <script src="../../prettify.js"></script>
package/coverage/lcov-report/src/hooks/useMap.js.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">0% </span>
26
+ <span class="strong">77.41% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>0/42</span>
28
+ <span class='fraction'>24/31</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">0% </span>
33
+ <span class="strong">50% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>0/12</span>
35
+ <span class='fraction'>6/12</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">0% </span>
40
+ <span class="strong">80% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>0/8</span>
42
+ <span class='fraction'>4/5</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">0% </span>
47
+ <span class="strong">76.66% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>0/41</span>
49
+ <span class='fraction'>23/30</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line low'></div>
64
+ <div class='status-line medium'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -136,71 +136,16 @@
136
136
  <a name='L71'></a><a href='#L71'>71</a>
137
137
  <a name='L72'></a><a href='#L72'>72</a>
138
138
  <a name='L73'></a><a href='#L73'>73</a>
139
- <a name='L74'></a><a href='#L74'>74</a>
140
- <a name='L75'></a><a href='#L75'>75</a>
141
- <a name='L76'></a><a href='#L76'>76</a>
142
- <a name='L77'></a><a href='#L77'>77</a>
143
- <a name='L78'></a><a href='#L78'>78</a>
144
- <a name='L79'></a><a href='#L79'>79</a>
145
- <a name='L80'></a><a href='#L80'>80</a>
146
- <a name='L81'></a><a href='#L81'>81</a>
147
- <a name='L82'></a><a href='#L82'>82</a>
148
- <a name='L83'></a><a href='#L83'>83</a>
149
- <a name='L84'></a><a href='#L84'>84</a>
150
- <a name='L85'></a><a href='#L85'>85</a>
151
- <a name='L86'></a><a href='#L86'>86</a>
152
- <a name='L87'></a><a href='#L87'>87</a>
153
- <a name='L88'></a><a href='#L88'>88</a>
154
- <a name='L89'></a><a href='#L89'>89</a>
155
- <a name='L90'></a><a href='#L90'>90</a>
156
- <a name='L91'></a><a href='#L91'>91</a>
157
- <a name='L92'></a><a href='#L92'>92</a>
158
- <a name='L93'></a><a href='#L93'>93</a>
159
- <a name='L94'></a><a href='#L94'>94</a>
160
- <a name='L95'></a><a href='#L95'>95</a>
161
- <a name='L96'></a><a href='#L96'>96</a>
162
- <a name='L97'></a><a href='#L97'>97</a>
163
- <a name='L98'></a><a href='#L98'>98</a>
164
- <a name='L99'></a><a href='#L99'>99</a>
165
- <a name='L100'></a><a href='#L100'>100</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
139
+ <a name='L74'></a><a href='#L74'>74</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
166
140
  <span class="cline-any cline-neutral">&nbsp;</span>
167
141
  <span class="cline-any cline-neutral">&nbsp;</span>
168
142
  <span class="cline-any cline-neutral">&nbsp;</span>
169
143
  <span class="cline-any cline-neutral">&nbsp;</span>
170
144
  <span class="cline-any cline-neutral">&nbsp;</span>
171
- <span class="cline-any cline-no">&nbsp;</span>
172
- <span class="cline-any cline-neutral">&nbsp;</span>
173
- <span class="cline-any cline-no">&nbsp;</span>
174
- <span class="cline-any cline-no">&nbsp;</span>
175
- <span class="cline-any cline-neutral">&nbsp;</span>
176
- <span class="cline-any cline-no">&nbsp;</span>
177
- <span class="cline-any cline-no">&nbsp;</span>
178
- <span class="cline-any cline-no">&nbsp;</span>
179
- <span class="cline-any cline-neutral">&nbsp;</span>
180
- <span class="cline-any cline-no">&nbsp;</span>
181
- <span class="cline-any cline-no">&nbsp;</span>
182
- <span class="cline-any cline-neutral">&nbsp;</span>
183
- <span class="cline-any cline-no">&nbsp;</span>
184
- <span class="cline-any cline-neutral">&nbsp;</span>
185
- <span class="cline-any cline-no">&nbsp;</span>
186
- <span class="cline-any cline-no">&nbsp;</span>
187
- <span class="cline-any cline-neutral">&nbsp;</span>
188
- <span class="cline-any cline-no">&nbsp;</span>
189
- <span class="cline-any cline-no">&nbsp;</span>
190
- <span class="cline-any cline-no">&nbsp;</span>
191
- <span class="cline-any cline-no">&nbsp;</span>
192
- <span class="cline-any cline-neutral">&nbsp;</span>
193
- <span class="cline-any cline-no">&nbsp;</span>
194
- <span class="cline-any cline-neutral">&nbsp;</span>
195
- <span class="cline-any cline-neutral">&nbsp;</span>
196
- <span class="cline-any cline-neutral">&nbsp;</span>
197
- <span class="cline-any cline-no">&nbsp;</span>
198
- <span class="cline-any cline-no">&nbsp;</span>
199
- <span class="cline-any cline-no">&nbsp;</span>
200
- <span class="cline-any cline-no">&nbsp;</span>
201
- <span class="cline-any cline-no">&nbsp;</span>
202
145
  <span class="cline-any cline-neutral">&nbsp;</span>
146
+ <span class="cline-any cline-yes">12x</span>
203
147
  <span class="cline-any cline-neutral">&nbsp;</span>
148
+ <span class="cline-any cline-yes">12x</span>
204
149
  <span class="cline-any cline-neutral">&nbsp;</span>
205
150
  <span class="cline-any cline-neutral">&nbsp;</span>
206
151
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -209,51 +154,54 @@
209
154
  <span class="cline-any cline-neutral">&nbsp;</span>
210
155
  <span class="cline-any cline-neutral">&nbsp;</span>
211
156
  <span class="cline-any cline-neutral">&nbsp;</span>
157
+ <span class="cline-any cline-yes">12x</span>
158
+ <span class="cline-any cline-yes">12x</span>
212
159
  <span class="cline-any cline-neutral">&nbsp;</span>
160
+ <span class="cline-any cline-yes">12x</span>
213
161
  <span class="cline-any cline-neutral">&nbsp;</span>
162
+ <span class="cline-any cline-yes">12x</span>
214
163
  <span class="cline-any cline-neutral">&nbsp;</span>
164
+ <span class="cline-any cline-yes">12x</span>
165
+ <span class="cline-any cline-yes">4x</span>
215
166
  <span class="cline-any cline-neutral">&nbsp;</span>
216
- <span class="cline-any cline-no">&nbsp;</span>
167
+ <span class="cline-any cline-yes">4x</span>
168
+ <span class="cline-any cline-yes">2x</span>
169
+ <span class="cline-any cline-yes">2x</span>
170
+ <span class="cline-any cline-yes">2x</span>
217
171
  <span class="cline-any cline-neutral">&nbsp;</span>
172
+ <span class="cline-any cline-yes">2x</span>
173
+ <span class="cline-any cline-yes">2x</span>
218
174
  <span class="cline-any cline-neutral">&nbsp;</span>
219
- <span class="cline-any cline-no">&nbsp;</span>
220
- <span class="cline-any cline-no">&nbsp;</span>
221
175
  <span class="cline-any cline-neutral">&nbsp;</span>
222
176
  <span class="cline-any cline-neutral">&nbsp;</span>
223
- <span class="cline-any cline-no">&nbsp;</span>
224
- <span class="cline-any cline-no">&nbsp;</span>
177
+ <span class="cline-any cline-yes">12x</span>
178
+ <span class="cline-any cline-yes">12x</span>
225
179
  <span class="cline-any cline-neutral">&nbsp;</span>
226
- <span class="cline-any cline-no">&nbsp;</span>
227
- <span class="cline-any cline-no">&nbsp;</span>
180
+ <span class="cline-any cline-yes">4x</span>
228
181
  <span class="cline-any cline-neutral">&nbsp;</span>
229
- <span class="cline-any cline-neutral">&nbsp;</span>
230
- <span class="cline-any cline-no">&nbsp;</span>
231
- <span class="cline-any cline-no">&nbsp;</span>
232
- <span class="cline-any cline-no">&nbsp;</span>
182
+ <span class="cline-any cline-yes">4x</span>
233
183
  <span class="cline-any cline-no">&nbsp;</span>
234
184
  <span class="cline-any cline-neutral">&nbsp;</span>
235
- <span class="cline-any cline-neutral">&nbsp;</span>
236
- <span class="cline-any cline-no">&nbsp;</span>
237
185
  <span class="cline-any cline-no">&nbsp;</span>
238
186
  <span class="cline-any cline-no">&nbsp;</span>
239
187
  <span class="cline-any cline-no">&nbsp;</span>
240
188
  <span class="cline-any cline-no">&nbsp;</span>
241
189
  <span class="cline-any cline-neutral">&nbsp;</span>
242
190
  <span class="cline-any cline-neutral">&nbsp;</span>
243
- <span class="cline-any cline-neutral">&nbsp;</span>
244
- <span class="cline-any cline-neutral">&nbsp;</span>
245
- <span class="cline-any cline-neutral">&nbsp;</span>
246
191
  <span class="cline-any cline-no">&nbsp;</span>
247
192
  <span class="cline-any cline-no">&nbsp;</span>
248
193
  <span class="cline-any cline-neutral">&nbsp;</span>
249
194
  <span class="cline-any cline-neutral">&nbsp;</span>
250
- <span class="cline-any cline-no">&nbsp;</span>
195
+ <span class="cline-any cline-yes">4x</span>
251
196
  <span class="cline-any cline-neutral">&nbsp;</span>
252
197
  <span class="cline-any cline-neutral">&nbsp;</span>
198
+ <span class="cline-any cline-yes">4x</span>
199
+ <span class="cline-any cline-yes">4x</span>
200
+ <span class="cline-any cline-yes">4x</span>
253
201
  <span class="cline-any cline-neutral">&nbsp;</span>
254
202
  <span class="cline-any cline-neutral">&nbsp;</span>
203
+ <span class="cline-any cline-yes">12x</span>
255
204
  <span class="cline-any cline-neutral">&nbsp;</span>
256
- <span class="cline-any cline-no">&nbsp;</span>
257
205
  <span class="cline-any cline-neutral">&nbsp;</span>
258
206
  <span class="cline-any cline-neutral">&nbsp;</span>
259
207
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -264,98 +212,72 @@
264
212
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { useContext, useState, useEffect, useRef } from "react";
265
213
  import { v4 as uuidv4 } from "uuid";
266
214
  import { MapContext } from "@mapcomponents/react-core";
215
+ import useMapState from "./useMapState";
267
216
  &nbsp;
268
- function <span class="fstat-no" title="function not covered" >useMap(</span>props) {
217
+ function useMap(props) {
269
218
  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
270
- const mapContext = <span class="cstat-no" title="statement not covered" >useContext(MapContext);</span>
219
+ const mapContext = useContext(MapContext);
271
220
  &nbsp;
272
- const initializedRef = <span class="cstat-no" title="statement not covered" >useRef(false);</span>
273
- const mapRef = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
221
+ const mapState = useMapState({
222
+ mapId: props.mapId,
223
+ watch: {
224
+ viewport: false,
225
+ layers: true,
226
+ sources: false,
227
+ },
228
+ });
274
229
  &nbsp;
275
- const [center, setCenter] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
276
- const [layerIds, setLayerIds] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
277
- const layerIdsRef = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
230
+ const initializedRef = useRef(false);
231
+ const mapRef = useRef(undefined);
278
232
  &nbsp;
279
- const [layers, setLayers] = <span class="cstat-no" title="statement not covered" >useState(undefined);</span>
280
- const layersRef = <span class="cstat-no" title="statement not covered" >useRef(undefined);</span>
281
- //const mapRef = useRef(props.map);
282
- const componentId = <span class="cstat-no" title="statement not covered" >useRef(uuidv4());</span>
233
+ const componentId = useRef(uuidv4());
283
234
  &nbsp;
284
- <span class="cstat-no" title="statement not covered" > useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
285
- let _componentId = <span class="cstat-no" title="statement not covered" >componentId.current;</span>
235
+ const [mapIsReady, setMapIsReady] = useState(undefined);
286
236
  &nbsp;
287
- <span class="cstat-no" title="statement not covered" > return <span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
288
- <span class="cstat-no" title="statement not covered" > if (mapRef.current) {</span>
289
- <span class="cstat-no" title="statement not covered" > mapRef.current.cleanup(_componentId);</span>
290
- <span class="cstat-no" title="statement not covered" > mapRef.current = undefined;</span>
237
+ useEffect(() =&gt; {
238
+ let _componentId = componentId.current;
239
+ &nbsp;
240
+ return () =&gt; {
241
+ if (mapRef.current) {
242
+ mapRef.current.cleanup(_componentId);
243
+ mapRef.current = undefined;
291
244
  }
292
- <span class="cstat-no" title="statement not covered" > initializedRef.current = false;</span>
245
+ initializedRef.current = false;
246
+ setMapIsReady(false);
293
247
  };
294
248
  }, []);
295
249
  &nbsp;
296
- const buildLayerObjects = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(l</span>ayers) =&gt; {</span>
297
- let res = <span class="cstat-no" title="statement not covered" >{};</span>
298
- <span class="cstat-no" title="statement not covered" > Object.keys(layers).forEach(<span class="fstat-no" title="function not covered" >(l</span>ayerId) =&gt; {</span>
299
- <span class="cstat-no" title="statement not covered" > if (mapRef.current.baseLayers.indexOf(layerId) === -1) {</span>
300
- <span class="cstat-no" title="statement not covered" > res[layerId] = {</span>
301
- //filter: layers[layerId].filter,
302
- id: layers[layerId].id,
303
- //layout: layers[layerId].layout,
304
- //maxzoom: layers[layerId].maxzoom,
305
- //metadata: layers[layerId].metadata,
306
- //minzoom: layers[layerId].minzoom,
307
- paint: layers[layerId].paint,
308
- //source: layers[layerId].source,
309
- //sourceLayer: layers[layerId].sourceLayer,
310
- type: layers[layerId].type,
311
- visibility: layers[layerId].visibility,
312
- };
313
- }
314
- });
315
- <span class="cstat-no" title="statement not covered" > return res;</span>
316
- };
250
+ useEffect(() =&gt; {
251
+ if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
317
252
  &nbsp;
318
- <span class="cstat-no" title="statement not covered" > useEffect(<span class="fstat-no" title="function not covered" >()</span> =&gt; {</span>
319
- <span class="cstat-no" title="statement not covered" > if (!mapContext.mapExists(props.mapId) || initializedRef.current) <span class="cstat-no" title="statement not covered" >return;</span></span>
320
- // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
321
- // initialize the layer and add it to the MapLibre-gl instance or do something else with it
322
- <span class="cstat-no" title="statement not covered" > initializedRef.current = true;</span>
323
- <span class="cstat-no" title="statement not covered" > mapRef.current = mapContext.getMap(props.mapId);</span>
324
- &nbsp;
325
- <span class="cstat-no" title="statement not covered" > setLayerIds([...mapRef.current.style._order]);</span>
326
- <span class="cstat-no" title="statement not covered" > mapRef.current.on(</span>
327
- "idle",
328
- <span class="fstat-no" title="function not covered" > ()</span> =&gt; {
329
- <span class="cstat-no" title="statement not covered" > if (JSON.stringify(mapRef.current.style._order) !== layerIdsRef.current) {</span>
330
- let layerIds = <span class="cstat-no" title="statement not covered" >[...mapRef.current.style._order];</span>
331
- <span class="cstat-no" title="statement not covered" > layerIdsRef.current = JSON.stringify(layerIds);</span>
332
- <span class="cstat-no" title="statement not covered" > setLayerIds(layerIds);</span>
333
- }
253
+ console.log("initialize useMap hook");
254
+ //check if insertBeforeLayer exists
255
+ <span class="missing-if-branch" title="if path not taken" >I</span>if (props.waitForLayer) {
256
+ let layerFound = <span class="cstat-no" title="statement not covered" >false;</span>
334
257
  &nbsp;
335
- let layerStates = <span class="cstat-no" title="statement not covered" >buildLayerObjects(mapRef.current.style._layers);</span>
336
- let layerStatesString = <span class="cstat-no" title="statement not covered" >JSON.stringify(layerStates);</span>
337
- <span class="cstat-no" title="statement not covered" > if (layerStatesString !== layersRef.current) {</span>
338
- <span class="cstat-no" title="statement not covered" > layersRef.current = layerStatesString;</span>
339
- <span class="cstat-no" title="statement not covered" > setLayers(layerStates);</span>
258
+ <span class="cstat-no" title="statement not covered" > mapState?.layers?.forEach(<span class="fstat-no" title="function not covered" >(l</span>ayer) =&gt; {</span>
259
+ <span class="cstat-no" title="statement not covered" > console.log(layer.id + " " + props.waitForLayer);</span>
260
+ <span class="cstat-no" title="statement not covered" > if (layer.id === props.waitForLayer) {</span>
261
+ <span class="cstat-no" title="statement not covered" > layerFound = true;</span>
340
262
  }
341
- },
342
- componentId.current
343
- );
344
- &nbsp;
345
- <span class="cstat-no" title="statement not covered" > setCenter(mapRef.current.getCenter());</span>
346
- <span class="cstat-no" title="statement not covered" > mapRef.current.on(</span>
347
- "move",
348
- <span class="fstat-no" title="function not covered" > ()</span> =&gt; {
349
- <span class="cstat-no" title="statement not covered" > setCenter(mapRef.current.getCenter());</span>
350
- },
351
- componentId.current
352
- );
353
- }, [mapContext.mapIds, mapContext, props.mapId]);
263
+ });
264
+ <span class="cstat-no" title="statement not covered" > if (!layerFound) {</span>
265
+ <span class="cstat-no" title="statement not covered" > return;</span>
266
+ }
267
+ }
268
+ console.log("done initialize useMap hook");
269
+ // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
270
+ // initialize the layer and add it to the MapLibre-gl instance or do something else with it
271
+ initializedRef.current = true;
272
+ mapRef.current = mapContext.getMap(props.mapId);
273
+ setMapIsReady(true);
274
+ }, [mapContext.mapIds, mapState.layers, mapContext, props.mapId]);
354
275
  &nbsp;
355
- <span class="cstat-no" title="statement not covered" > return {</span>
356
- layers,
357
- layerIds,
358
- center,
276
+ return {
277
+ map: mapRef.current,
278
+ mapIsReady,
279
+ componentId: componentId.current,
280
+ layers: mapState.layers,
359
281
  };
360
282
  }
361
283
  &nbsp;
@@ -367,7 +289,7 @@ export default useMap;
367
289
  <div class='footer quiet pad2 space-top1 center small'>
368
290
  Code coverage generated by
369
291
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener">istanbul</a>
370
- at Wed Dec 15 2021 17:41:09 GMT+0000 (Coordinated Universal Time)
292
+ at Tue Dec 21 2021 11:51:22 GMT+0000 (Coordinated Universal Time)
371
293
  </div>
372
294
  </div>
373
295
  <script src="../../prettify.js"></script>