npm - @mapcomponents/react-maplibre - Versions diffs - 0.1.62 → 0.1.64 - Mend

@mapcomponents/react-maplibre 0.1.62 → 0.1.64

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 (340) hide show

package/coverage/lcov-report/src/components/{MlGPXViewer/MlGPXViewer.tsx.html → MlSketchTool/MlSketchTool.tsx.html} RENAMED Viewed

@@ -3,7 +3,7 @@
 <html lang="en">
 <head>
-    <title>Code coverage report for src/components/MlGPXViewer/MlGPXViewer.tsx</title>
+    <title>Code coverage report for src/components/MlSketchTool/MlSketchTool.tsx</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../../prettify.css" />
     <link rel="stylesheet" href="../../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlGPXViewer</a> MlGPXViewer.tsx</h1>
+        <h1><a href="../../../index.html">All files</a> / <a href="index.html">src/components/MlSketchTool</a> MlSketchTool.tsx</h1>
         <div class='clearfix'>
             <div class='fl pad1y space-right2'>
-                <span class="strong">40.31% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>52/129</span>
+                <span class='fraction'>0/39</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">15.9% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>7/44</span>
+                <span class='fraction'>0/30</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">25% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>6/24</span>
+                <span class='fraction'>0/20</span>
             </div>
             <div class='fl pad1y space-right2'>
-                <span class="strong">43.47% </span>
+                <span class="strong">0% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>50/115</span>
+                <span class='fraction'>0/37</span>
             </div>
@@ -334,113 +334,7 @@
 <a name='L269'></a><a href='#L269'>269</a>
 <a name='L270'></a><a href='#L270'>270</a>
 <a name='L271'></a><a href='#L271'>271</a>
-<a name='L272'></a><a href='#L272'>272</a>
-<a name='L273'></a><a href='#L273'>273</a>
-<a name='L274'></a><a href='#L274'>274</a>
-<a name='L275'></a><a href='#L275'>275</a>
-<a name='L276'></a><a href='#L276'>276</a>
-<a name='L277'></a><a href='#L277'>277</a>
-<a name='L278'></a><a href='#L278'>278</a>
-<a name='L279'></a><a href='#L279'>279</a>
-<a name='L280'></a><a href='#L280'>280</a>
-<a name='L281'></a><a href='#L281'>281</a>
-<a name='L282'></a><a href='#L282'>282</a>
-<a name='L283'></a><a href='#L283'>283</a>
-<a name='L284'></a><a href='#L284'>284</a>
-<a name='L285'></a><a href='#L285'>285</a>
-<a name='L286'></a><a href='#L286'>286</a>
-<a name='L287'></a><a href='#L287'>287</a>
-<a name='L288'></a><a href='#L288'>288</a>
-<a name='L289'></a><a href='#L289'>289</a>
-<a name='L290'></a><a href='#L290'>290</a>
-<a name='L291'></a><a href='#L291'>291</a>
-<a name='L292'></a><a href='#L292'>292</a>
-<a name='L293'></a><a href='#L293'>293</a>
-<a name='L294'></a><a href='#L294'>294</a>
-<a name='L295'></a><a href='#L295'>295</a>
-<a name='L296'></a><a href='#L296'>296</a>
-<a name='L297'></a><a href='#L297'>297</a>
-<a name='L298'></a><a href='#L298'>298</a>
-<a name='L299'></a><a href='#L299'>299</a>
-<a name='L300'></a><a href='#L300'>300</a>
-<a name='L301'></a><a href='#L301'>301</a>
-<a name='L302'></a><a href='#L302'>302</a>
-<a name='L303'></a><a href='#L303'>303</a>
-<a name='L304'></a><a href='#L304'>304</a>
-<a name='L305'></a><a href='#L305'>305</a>
-<a name='L306'></a><a href='#L306'>306</a>
-<a name='L307'></a><a href='#L307'>307</a>
-<a name='L308'></a><a href='#L308'>308</a>
-<a name='L309'></a><a href='#L309'>309</a>
-<a name='L310'></a><a href='#L310'>310</a>
-<a name='L311'></a><a href='#L311'>311</a>
-<a name='L312'></a><a href='#L312'>312</a>
-<a name='L313'></a><a href='#L313'>313</a>
-<a name='L314'></a><a href='#L314'>314</a>
-<a name='L315'></a><a href='#L315'>315</a>
-<a name='L316'></a><a href='#L316'>316</a>
-<a name='L317'></a><a href='#L317'>317</a>
-<a name='L318'></a><a href='#L318'>318</a>
-<a name='L319'></a><a href='#L319'>319</a>
-<a name='L320'></a><a href='#L320'>320</a>
-<a name='L321'></a><a href='#L321'>321</a>
-<a name='L322'></a><a href='#L322'>322</a>
-<a name='L323'></a><a href='#L323'>323</a>
-<a name='L324'></a><a href='#L324'>324</a>
-<a name='L325'></a><a href='#L325'>325</a>
-<a name='L326'></a><a href='#L326'>326</a>
-<a name='L327'></a><a href='#L327'>327</a>
-<a name='L328'></a><a href='#L328'>328</a>
-<a name='L329'></a><a href='#L329'>329</a>
-<a name='L330'></a><a href='#L330'>330</a>
-<a name='L331'></a><a href='#L331'>331</a>
-<a name='L332'></a><a href='#L332'>332</a>
-<a name='L333'></a><a href='#L333'>333</a>
-<a name='L334'></a><a href='#L334'>334</a>
-<a name='L335'></a><a href='#L335'>335</a>
-<a name='L336'></a><a href='#L336'>336</a>
-<a name='L337'></a><a href='#L337'>337</a>
-<a name='L338'></a><a href='#L338'>338</a>
-<a name='L339'></a><a href='#L339'>339</a>
-<a name='L340'></a><a href='#L340'>340</a>
-<a name='L341'></a><a href='#L341'>341</a>
-<a name='L342'></a><a href='#L342'>342</a>
-<a name='L343'></a><a href='#L343'>343</a>
-<a name='L344'></a><a href='#L344'>344</a>
-<a name='L345'></a><a href='#L345'>345</a>
-<a name='L346'></a><a href='#L346'>346</a>
-<a name='L347'></a><a href='#L347'>347</a>
-<a name='L348'></a><a href='#L348'>348</a>
-<a name='L349'></a><a href='#L349'>349</a>
-<a name='L350'></a><a href='#L350'>350</a>
-<a name='L351'></a><a href='#L351'>351</a>
-<a name='L352'></a><a href='#L352'>352</a>
-<a name='L353'></a><a href='#L353'>353</a>
-<a name='L354'></a><a href='#L354'>354</a>
-<a name='L355'></a><a href='#L355'>355</a>
-<a name='L356'></a><a href='#L356'>356</a>
-<a name='L357'></a><a href='#L357'>357</a>
-<a name='L358'></a><a href='#L358'>358</a>
-<a name='L359'></a><a href='#L359'>359</a>
-<a name='L360'></a><a href='#L360'>360</a>
-<a name='L361'></a><a href='#L361'>361</a>
-<a name='L362'></a><a href='#L362'>362</a>
-<a name='L363'></a><a href='#L363'>363</a>
-<a name='L364'></a><a href='#L364'>364</a>
-<a name='L365'></a><a href='#L365'>365</a>
-<a name='L366'></a><a href='#L366'>366</a>
-<a name='L367'></a><a href='#L367'>367</a>
-<a name='L368'></a><a href='#L368'>368</a>
-<a name='L369'></a><a href='#L369'>369</a>
-<a name='L370'></a><a href='#L370'>370</a>
-<a name='L371'></a><a href='#L371'>371</a>
-<a name='L372'></a><a href='#L372'>372</a>
-<a name='L373'></a><a href='#L373'>373</a>
-<a name='L374'></a><a href='#L374'>374</a>
-<a name='L375'></a><a href='#L375'>375</a>
-<a name='L376'></a><a href='#L376'>376</a>
-<a name='L377'></a><a href='#L377'>377</a>
-<a name='L378'></a><a href='#L378'>378</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L272'></a><a href='#L272'>272</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -481,192 +375,104 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">10x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">12x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
-<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -674,53 +480,30 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">18x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -729,6 +512,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -739,8 +523,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -760,6 +546,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -771,10 +558,10 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -783,6 +570,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -811,389 +599,283 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useContext, useRef, useEffect, useState } from "react";
-import { bbox } from '@turf/turf';
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import Drawer from "@mui/material/Drawer";
-import IconButton from "@mui/material/IconButton";
-import InfoIcon from "@mui/icons-material/Info";
-import FileCopy from "@mui/icons-material/FileCopy";
-import { Popup, LngLatBoundsLike, GeoJSONSource } from "maplibre-gl";
-import List from "@mui/material/List";
-import ListItem from "@mui/material/ListItem";
-import ListItemText from "@mui/material/ListItemText";
-import GeoJsonContext from "./util/GeoJsonContext";
-import toGeoJSON from "./gpxConverter";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import useMap from "../../hooks/useMap";
-&nbsp;
-interface MlGPXViewerProps {
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useState, useCallback } from 'react';
+import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye';
+import ShowChartIcon from '@mui/icons-material/ShowChart';
+import PentagonIcon from '@mui/icons-material/Pentagon';
+import { Box } from '@mui/system';
+//import useMediaQuery from '@mui/material/useMediaQuery';
+import MlFeatureEditor from '../MlFeatureEditor/MlFeatureEditor';
+import List from '@mui/material/List';
+import EditIcon from '@mui/icons-material/Edit';
+import SettingsIcon from '@mui/icons-material/Settings';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import useMap from '../../hooks/useMap';
+import DeleteIcon from '@mui/icons-material/Delete';
+import * as turf from '@turf/turf';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import LayerListItem from './LayerList/LayerListItem';
+import GpsFixedIcon from '@mui/icons-material/GpsFixed';
+import { Feature } from '@turf/turf';
+import { LngLatLike } from '!maplibre-gl';
+import { SxProps } from '@mui/system/styleFunctionSx/styleFunctionSx';
 &nbsp;
+interface MlSketchToolProps {
 	/**
-	 * Id of the target MapLibre instance in mapHook
+	 * Id of the target MapLibre instance in mapContext
 	 */
-	mapId?: string,
+	mapId?: string;
 	/**
-	 * The layerId of an existing layer this layer should be rendered visually beneath
-	 * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+	 * Id of an existing layer in the mapLibre instance to help specify the layer order
+	 * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
 	 */
-	insertBeforeLayer?: string,
+	insertBeforeLayer?: string;
 	/**
-	 * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+	 * Style attribute for the button-style
+	 * https://mui.com/system/getting-started/the-sx-prop/
 	 */
-	idPrefix?: string,
-	/**
-	 * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
-	 */
-	visible?: boolean,
+	buttonStyleOverride?: SxProps;
 }
 &nbsp;
 /**
- * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
+ * Component template
+ *
  */
-const MlGPXViewer = (props:MlGPXViewerProps) =&gt; {
-	const dataSource = useContext(GeoJsonContext);
-	const initializedRef = useRef(false);
-	const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-	const sourceName = "import-source";
-	const layerNameLines = "importer-layer-lines";
-	const layerNamePoints = "importer-layer-points";
-&nbsp;
-	const [open, setIsOpen] = useState(false);
-	const dropZone = useRef&lt;HTMLDivElement&gt;(null);
-	const [zIndex, setZIndex] = useState(0);
-	const [metaData, setMetaData] = useState&lt;{ title: string; value: string; id: number; }[]&gt;([]);
-	const fileupload = useRef&lt;HTMLInputElement&gt;(null);
-	const mediaIsMobile = useMediaQuery("(max-width:900px)");
-&nbsp;
-	const popup = useRef(
-		new Popup({
-			closeButton: false,
-			closeOnClick: true,
-		})
-	);
-&nbsp;
-	useEffect(() =&gt; {
-		if (!mapHook.map || initializedRef.current) return;
-&nbsp;
-		initializedRef.current = true;
-&nbsp;
-		mapHook.map.addSource(
-			sourceName,
-			{
-				type: "geojson",
-				data: dataSource.data,
-			},
-			mapHook.componentId
-		);
-		mapHook.map.addLayer(
-			{
-				id: layerNameLines,
-				source: sourceName,
-				type: "line",
-				paint: {
-					"line-width": 4,
-					"line-color": "rgba(212, 55, 23,0.5)",
-				},
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-		mapHook.map.addLayer(
-			{
-				id: layerNamePoints,
-				source: sourceName,
-				type: "circle",
-				paint: {
-					"circle-color": "rgba(72, 77, 99,0.5)",
-					"circle-radius": 7,
-				},
-				filter: ["==", "$type", "Point"],
-			},
-			props.insertBeforeLayer,
-			mapHook.componentId
-		);
-&nbsp;
-		[layerNameLines, layerNamePoints].forEach((layerName) =&gt; {
-			<span class="missing-if-branch" title="if path not taken" >I</span>if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span>
-&nbsp;
-			mapHook.map.map.setLayoutProperty(layerName, "visibility", "visible");
-		});
-		mapHook.map.on(
-			"mouseenter",
-			layerNamePoints,
-<span class="fstat-no" title="function not covered" >			(e</span>:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >				if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
-				// Change the cursor style as a UI indicator.
-&nbsp;
-				const coordinates = <span class="cstat-no" title="statement not covered" >e.features[0].geometry.coordinates.slice();</span>
-				//const description = e.features[0].properties.desc;
-				const name = <span class="cstat-no" title="statement not covered" >e.features[0].properties.name;</span>
-&nbsp;
-				// Ensure that if the map is zoomed out such that multiple
-				// copies of the feature are visible, the popup appears
-				// over the copy being pointed to.
-<span class="cstat-no" title="statement not covered" >				while (Math.abs(e.lngLat.lng - coordinates[0]) &gt; 180) {</span>
-<span class="cstat-no" title="statement not covered" >					coordinates[0] += e.lngLat.lng &gt; coordinates[0] ? 360 : -360;</span>
-				}
 &nbsp;
-				// Populate the popup and set its coordinates
-&nbsp;
-				// based on the feature found.
-<span class="cstat-no" title="statement not covered" >				popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map.map);</span>
-			},
-			mapHook.componentId
-		);
-&nbsp;
-		mapHook.map.on(
-			"mouseleave",
-			"places",
-<span class="fstat-no" title="function not covered" >			fu</span>nction () {
-<span class="cstat-no" title="statement not covered" >				if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >				mapHook.map.map.getCanvas().style.cursor = "";</span>
-<span class="cstat-no" title="statement not covered" >				popup.current.remove();</span>
-			},
-			mapHook.componentId
-		);
-&nbsp;
-		mapHook.map.map.setZoom(10);
-	}, [mapHook.map]);
-&nbsp;
-	useEffect(() =&gt; {
-		const _dropZone = dropZone.current;
-		const raiseDropZoneAndStopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >			setZIndex(1000);</span>
-<span class="cstat-no" title="statement not covered" >			stopDefault(event);</span>
-		};
-		const lowerDropZone = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >			setZIndex(0);</span>
-		};
-		const lowerDropZoneAndStopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >			setZIndex(0);</span>
-<span class="cstat-no" title="statement not covered" >			stopDefault(event);</span>
-		};
-&nbsp;
-		window.addEventListener("dragenter", raiseDropZoneAndStopDefault);
-		window.addEventListener("dragover", stopDefault);
-&nbsp;
-		_dropZone?.addEventListener("dragleave", lowerDropZone);
-&nbsp;
-		window.addEventListener("drop", lowerDropZoneAndStopDefault);
-&nbsp;
-		return () =&gt; {
-			window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
-			window.removeEventListener("dragover", stopDefault);
-			_dropZone?.removeEventListener("dragleave", lowerDropZone);
-			window.removeEventListener("drop", lowerDropZoneAndStopDefault);
-		};
+const MlSketchTool = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(p</span>rops: MlSketchToolProps) =&gt; {</span>
+	type SketchStateType = {
+		selectedGeoJson: Feature | undefined;
+		activeGeometryIndex: number;
+		geometries: Feature[];
+		drawMode: string;
+	};
+	const mapHook = <span class="cstat-no" title="statement not covered" >useMap({</span>
+		mapId: props.mapId,
+		waitForLayer: props.insertBeforeLayer,
+	});
+	//const mediaIsMobile = useMediaQuery('(max-width:900px)');
+	const [hoveredGeometry, setHoveredGeometry] = <span class="cstat-no" title="statement not covered" >useState&lt;Feature&gt;();</span>
+	const [sketchState, setSketchState] = <span class="cstat-no" title="statement not covered" >useState&lt;SketchStateType&gt;({</span>
+		activeGeometryIndex: 0,
+		selectedGeoJson: undefined,
+		geometries: [],
+		drawMode: '',
 	});
 &nbsp;
-	const stopDefault = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >		event.preventDefault();</span>
-<span class="cstat-no" title="statement not covered" >		event.stopPropagation();</span>
+	const buttonStyle = <span class="cstat-no" title="statement not covered" >{</span>
+		...props.buttonStyleOverride,
 	};
 &nbsp;
-	useEffect(() =&gt; {
-		<span class="missing-if-branch" title="else path not taken" >E</span>if (!mapHook.map) return;
-&nbsp;
-		const visibility = <span class="cstat-no" title="statement not covered" >props.visible ? "visible" : "none";</span>
+	const buttonClickHandler = <span class="cstat-no" title="statement not covered" >useCallback(</span>
+<span class="fstat-no" title="function not covered" >		(b</span>uttonDrawMode: string) =&gt; {
+<span class="cstat-no" title="statement not covered" >			console.log(buttonDrawMode);</span>
+<span class="cstat-no" title="statement not covered" >			sketchState.drawMode !== buttonDrawMode</span>
+				? setSketchState(<span class="fstat-no" title="function not covered" >(_</span>sketchTool) =&gt; (<span class="cstat-no" title="statement not covered" >{</span>
+						drawMode: buttonDrawMode,
+						geometries: _sketchTool.geometries,
+						activeGeometryIndex: 0,
+						selectedGeoJson: undefined,
+				  }))
+				: setSketchState(<span class="fstat-no" title="function not covered" >(_</span>sketchTool) =&gt; (<span class="cstat-no" title="statement not covered" >{</span>
+						drawMode: '',
+						geometries: _sketchTool.geometries,
+						activeGeometryIndex: 0,
+						selectedGeoJson: undefined,
+				  }));
+		},
+		[sketchState]
+	);
 &nbsp;
-<span class="cstat-no" title="statement not covered" >		[layerNameLines, layerNamePoints].forEach(<span class="fstat-no" title="function not covered" >(l</span>ayerName) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >			if(!mapHook.map)<span class="cstat-no" title="statement not covered" >return;</span></span>
+	const removeGeoJson = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(g</span>eoJson: Feature): void =&gt; {</span>
+<span class="cstat-no" title="statement not covered" >		setSketchState(<span class="fstat-no" title="function not covered" >(_</span>sketchState) =&gt; {</span>
+			const tempGeometries = <span class="cstat-no" title="statement not covered" >[..._sketchState.geometries];</span>
+<span class="cstat-no" title="statement not covered" >			tempGeometries.splice(tempGeometries.indexOf(geoJson), 1);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >			mapHook.map.map.setLayoutProperty(layerName, "visibility", visibility);</span>
+<span class="cstat-no" title="statement not covered" >			return {</span>
+				..._sketchState,
+				geometries: tempGeometries,
+				activeGeometryIndex: _sketchState.activeGeometryIndex - 1,
+			};
 		});
-	}, [props.visible]);
-&nbsp;
-	const dropHandler = <span class="fstat-no" title="function not covered" >(e</span>vent:any) =&gt; {
-<span class="cstat-no" title="statement not covered" >		event.preventDefault();</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >		if (event.dataTransfer.items) {</span>
-<span class="cstat-no" title="statement not covered" >			if (event.dataTransfer.items.length &gt; 1) {</span>
-<span class="cstat-no" title="statement not covered" >				return false;</span>
-			}
-			// If dropped items aren't files, reject them
-<span class="cstat-no" title="statement not covered" >			if (event.dataTransfer.items[0].kind === "file") {</span>
-				const reader = <span class="cstat-no" title="statement not covered" >new FileReader();</span>
-<span class="cstat-no" title="statement not covered" >				reader.onload = <span class="fstat-no" title="function not covered" >(p</span>ayload:any) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >					if(!payload?.currentTarget?.result)<span class="cstat-no" title="statement not covered" >return;</span></span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >					addGPXToMap(payload.currentTarget.result);</span>
-				};
-				const file = <span class="cstat-no" title="statement not covered" >event.dataTransfer.items[0].getAsFile();</span>
-<span class="cstat-no" title="statement not covered" >				reader.readAsText(file);</span>
-			}
-		} else {
-			// Use DataTransfer interface to access the file(s)
-		}
-<span class="cstat-no" title="statement not covered" >		return;</span>
-	};
-&nbsp;
-	const addGPXToMap = <span class="fstat-no" title="function not covered" >(g</span>pxAsString:string) =&gt; {
-<span class="cstat-no" title="statement not covered" >		if (!mapHook.map || !dataSource.setData) <span class="cstat-no" title="statement not covered" >return;</span></span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >		try {</span>
-<span class="cstat-no" title="statement not covered" >			setMetaData([]);</span>
-			const domParser = <span class="cstat-no" title="statement not covered" >new DOMParser();</span>
-			const gpxDoc = <span class="cstat-no" title="statement not covered" >domParser.parseFromString(gpxAsString, "application/xml");</span>
-			const metadata = <span class="cstat-no" title="statement not covered" >gpxDoc.querySelector("metadata");</span>
-<span class="cstat-no" title="statement not covered" >			metadata?.childNodes.forEach(<span class="fstat-no" title="function not covered" >(n</span>ode:Element) =&gt; {</span>
-				let value = <span class="cstat-no" title="statement not covered" >node.textContent;</span>
-				const title = <span class="cstat-no" title="statement not covered" >node.nodeName;</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >				if (node.nodeName === "link") {</span>
-<span class="cstat-no" title="statement not covered" >					value = node.getAttribute("href");</span>
-				}
-<span class="cstat-no" title="statement not covered" >				if (!!value?.trim().length) {</span>
-					const metaDatEntry = <span class="cstat-no" title="statement not covered" >{</span>
-						title: title,
-						value: value,
-						id: new Date().getTime(),
-					};
-<span class="cstat-no" title="statement not covered" >					setMetaData(<span class="fstat-no" title="function not covered" >(p</span>revState) =&gt; <span class="cstat-no" title="statement not covered" >[...prevState, metaDatEntry])</span>;</span>
-				}
-			});
-			const data = <span class="cstat-no" title="statement not covered" >toGeoJSON.gpx(gpxDoc);</span>
-<span class="cstat-no" title="statement not covered" >			dataSource.setData(data);</span>
-<span class="cstat-no" title="statement not covered" >			(mapHook.map.map.getSource(sourceName) as GeoJSONSource).setData(data as GeoJSON);</span>
-			const bounds = <span class="cstat-no" title="statement not covered" >bbox(data);</span>
-<span class="cstat-no" title="statement not covered" >			mapHook.map.map.fitBounds(bounds as LngLatBoundsLike);</span>
-		} catch (e) {
-<span class="cstat-no" title="statement not covered" >			console.log(e);</span>
-		}
-	};
-&nbsp;
-	const toogleDrawer = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		setIsOpen(<span class="fstat-no" title="function not covered" >(p</span>revState) =&gt; <span class="cstat-no" title="statement not covered" >!prevState)</span>;</span>
-	};
-&nbsp;
-	const fileUploadOnChange = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		if(!fileupload.current)<span class="cstat-no" title="statement not covered" >return false;</span></span>
-&nbsp;
-		const file = <span class="cstat-no" title="statement not covered" >fileupload.current?.files?.[0];</span>
-<span class="cstat-no" title="statement not covered" >		if (!file) <span class="cstat-no" title="statement not covered" >return false;</span></span>
-		const reader = <span class="cstat-no" title="statement not covered" >new FileReader();</span>
-<span class="cstat-no" title="statement not covered" >		reader.onload = <span class="fstat-no" title="function not covered" >(p</span>ayload:any) =&gt; {</span>
-<span class="cstat-no" title="statement not covered" >			if(!payload)<span class="cstat-no" title="statement not covered" >return;</span></span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >			addGPXToMap(payload.currentTarget.result);</span>
-		};
-&nbsp;
-<span class="cstat-no" title="statement not covered" >		reader.readAsText(file);</span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >		return;</span>
 	};
 &nbsp;
-	const manualUpload = <span class="fstat-no" title="function not covered" >()</span> =&gt; {
-<span class="cstat-no" title="statement not covered" >		if(!fileupload.current)<span class="cstat-no" title="statement not covered" >return;</span></span>
-&nbsp;
-<span class="cstat-no" title="statement not covered" >		fileupload.current.click();</span>
-	};
-	return (
+<span class="cstat-no" title="statement not covered" >	return (</span>
 		&lt;&gt;
-			&lt;div
-				style={{
-					position: "fixed",
-					right: "5px",
-					bottom: mediaIsMobile ? <span class="branch-0 cbranch-no" title="branch not covered" >"40px" </span>: "25px",
-					display: "flex",
-					flexDirection: "column",
-					gap: "5px",
-					zIndex: 1000,
+			&lt;Box
+				sx={{
+					zIndex: 104,
 				}}
 			&gt;
-				&lt;IconButton
-					onClick={manualUpload}
-					style={{
-						backgroundColor: "rgba(255,255,255,1)",
+				&lt;ButtonGroup&gt;
+					&lt;Tooltip title={'point'}&gt;
+						&lt;IconButton sx={buttonStyle} onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >buttonClickHandler('draw_point')}</span>&gt;
+							&lt;PanoramaFishEyeIcon /&gt;
+						&lt;/IconButton&gt;
+					&lt;/Tooltip&gt;
+					&lt;Tooltip title={'Line'}&gt;
+						&lt;IconButton sx={buttonStyle} onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >buttonClickHandler('draw_line_string')}</span>&gt;
+							&lt;ShowChartIcon /&gt;
+						&lt;/IconButton&gt;
+					&lt;/Tooltip&gt;
+					&lt;Tooltip title={'Polygon'}&gt;
+						&lt;IconButton sx={buttonStyle} onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; <span class="cstat-no" title="statement not covered" >buttonClickHandler('custom_polygon')}</span>&gt;
+							&lt;PentagonIcon /&gt;
+						&lt;/IconButton&gt;
+					&lt;/Tooltip&gt;
+				&lt;/ButtonGroup&gt;
+			&lt;/Box&gt;
+&nbsp;
+			{sketchState.drawMode &amp;&amp; (
+				&lt;MlFeatureEditor
+					mode={
+						sketchState.drawMode === 'edit'
+							? sketchState.selectedGeoJson?.geometry?.type === 'LineString'
+								? 'simple_select'
+								: 'custom_select'
+							: sketchState.drawMode
+					}
+					geojson={sketchState.drawMode === 'edit' ? sketchState.selectedGeoJson : undefined}
+					onChange={<span class="fstat-no" title="function not covered" >(f</span>eature: object) =&gt; {
+<span class="cstat-no" title="statement not covered" >						setSketchState(<span class="fstat-no" title="function not covered" >(_</span>sketchState) =&gt; {</span>
+							const _geometries = <span class="cstat-no" title="statement not covered" >[...sketchState.geometries];</span>
+<span class="cstat-no" title="statement not covered" >							if (sketchState.drawMode === 'edit' &amp;&amp; sketchState.selectedGeoJson) {</span>
+<span class="cstat-no" title="statement not covered" >								_geometries[_geometries.indexOf(sketchState.selectedGeoJson)] = feature[0];</span>
+							} else {
+<span class="cstat-no" title="statement not covered" >								if (!sketchState.activeGeometryIndex) {</span>
+									const tempFeature = <span class="cstat-no" title="statement not covered" >feature[0];</span>
+<span class="cstat-no" title="statement not covered" >									tempFeature.properties.id = tempFeature.id;</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >									_geometries.push(tempFeature);</span>
+								} else {
+<span class="cstat-no" title="statement not covered" >									_geometries[sketchState.activeGeometryIndex] = feature[0];</span>
+								}
+							}
+<span class="cstat-no" title="statement not covered" >							return {</span>
+								..._sketchState,
+								activeGeometryIndex:
+									_sketchState.drawMode !== 'edit' &amp;&amp; feature[0].geometry.type !== 'Point'
+										? _geometries.length - 1
+										: _sketchState.activeGeometryIndex,
+								geometries: _geometries,
+							};
+						});
 					}}
-					size="large"
-				&gt;
-					&lt;input
-						ref={fileupload}
-						onChange={fileUploadOnChange}
-						type="file"
-						id="input"
-						multiple
-						style={{ display: "none" }}
-					&gt;&lt;/input&gt;
-					&lt;FileCopy /&gt;
-				&lt;/IconButton&gt;
-				&lt;IconButton
-					onClick={toogleDrawer}
-					style={{
-						backgroundColor: "rgba(255,255,255,1)",
+					onFinish={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >						setSketchState(<span class="fstat-no" title="function not covered" >(_</span>sketchState) =&gt; (<span class="cstat-no" title="statement not covered" >{</span></span>
+							..._sketchState,
+							drawMode: '',
+							activeGeometryIndex:
+								_sketchState.drawMode !== 'draw_point' ? 0 : _sketchState.activeGeometryIndex,
+							selectedGeoJson:
+								_sketchState.drawMode !== 'draw_point' ? undefined : _sketchState.selectedGeoJson,
+						}));
 					}}
-					size="large"
-				&gt;
-					&lt;InfoIcon /&gt;
-				&lt;/IconButton&gt;
-			&lt;/div&gt;
-			&lt;Drawer variant="persistent" anchor="left" open={open}&gt;
-				&lt;Typography
-					variant="h6"
-					style={{
-						textAlign: "center",
-						padding: "1em",
-					}}
-					noWrap
-				&gt;
-					Informationen zur Route
-				&lt;/Typography&gt;
-				&lt;Divider /&gt;
-				&lt;List&gt;
-					{metaData.map(<span class="fstat-no" title="function not covered" >(i</span>tem) =&gt; (
-<span class="cstat-no" title="statement not covered" >						&lt;ListItem key={`item--${item.id}`}&gt;</span>
-							&lt;ListItemText primary={item.value} /&gt;
-						&lt;/ListItem&gt;
-					))}
-				&lt;/List&gt;
-			&lt;/Drawer&gt;
-			&lt;div
-				onDrop={dropHandler}
-				ref={dropZone}
-				style={{
-					position: "absolute",
-					left: "0",
-					top: "0",
-					backgroundColor: "rgba(255,255,255,0.5)",
-					width: "100%",
-					height: "100%",
-					zIndex: zIndex,
-				}}
-			&gt;
-				&lt;Typography
-					variant="h6"
-					style={{
-						top: "50%",
-						position: "absolute",
-						left: "50%",
-						msTransform: "translate(-50%, -50%)",
-						transform: " translate(-50%, -50%)",
-					}}
-					noWrap
-				&gt;
-					Gpx-Datei ablegen
-				&lt;/Typography&gt;
-			&lt;/div&gt;
+				/&gt;
+			)}
+&nbsp;
+			&lt;List sx={{ zIndex: 105 }}&gt;
+				{sketchState.geometries.map(<span class="fstat-no" title="function not covered" >(e</span>l) =&gt; (
+<span class="cstat-no" title="statement not covered" >					&lt;&gt;</span>
+						&lt;Box key={el.id} sx={{ display: 'flex', flexDirection: 'column' }}&gt;
+							&lt;br /&gt;
+							&lt;Box
+								flexDirection={'row'}
+								sx={{
+									'&amp;:hover': {
+										backgroundColor: 'rgb(177, 177, 177, 0.2)',
+									},
+								}}
+								onMouseOver={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >									setHoveredGeometry(el);</span>
+								}}
+								onMouseLeave={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >									setHoveredGeometry(undefined);</span>
+								}}
+							&gt;
+								{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+								{/* @ts-ignore-next-line */}
+								&lt;LayerListItem
+									sx={buttonStyle}
+									visible={true}
+									configurable={true}
+									layerComponent={
+										&lt;MlGeoJsonLayer mapId={props.mapId} geojson={el} layerId={String(el.id)} /&gt;
+									}
+									type={'layer'}
+									name={String(el.id)}
+									description={el.geometry.type}
+								&gt;
+									&lt;SettingsIcon /&gt;
+								&lt;/LayerListItem&gt;
+								&lt;IconButton
+									onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >										mapHook?.map?.map.setCenter(</span>
+											el.geometry.type === 'Point'
+												? (el.geometry.coordinates as LngLatLike)
+												: (turf.centerOfMass(el).geometry.coordinates as LngLatLike)
+										);
+									}}
+								&gt;
+									&lt;GpsFixedIcon /&gt;
+								&lt;/IconButton&gt;
+								&lt;IconButton
+									sx={buttonStyle}
+									onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >										setSketchState(<span class="fstat-no" title="function not covered" >(_</span>sketchState) =&gt; (<span class="cstat-no" title="statement not covered" >{</span></span>
+											..._sketchState,
+											selectedGeoJson: el,
+											drawMode: 'edit',
+										}));
+									}}
+								&gt;
+									&lt;EditIcon /&gt;
+								&lt;/IconButton&gt;
+								&lt;IconButton
+									sx={buttonStyle}
+									onClick={<span class="fstat-no" title="function not covered" >()</span> =&gt; {
+<span class="cstat-no" title="statement not covered" >										removeGeoJson(el);</span>
+									}}
+								&gt;
+									&lt;DeleteIcon /&gt;
+								&lt;/IconButton&gt;
+							&lt;/Box&gt;
+						&lt;/Box&gt;
+					&lt;/&gt;
+				))}
+				{hoveredGeometry &amp;&amp; (
+					&lt;MlGeoJsonLayer
+						mapId={props.mapId}
+						geojson={{ type: 'FeatureCollection', features: [hoveredGeometry] }}
+						type={'line'}
+						layerId={'highlightBorder'}
+						paint={{
+							'line-color': '#dd9900',
+							'line-opacity': 0.4,
+							'line-width': 10,
+						}}
+					/&gt;
+				)}
+			&lt;/List&gt;
+			{sketchState.drawMode === 'edit' &amp;&amp; (
+				&lt;Box&gt;Edit {sketchState.selectedGeoJson?.geometry?.type}&lt;/Box&gt;
+			)}
 		&lt;/&gt;
 	);
 };
 &nbsp;
-MlGPXViewer.defaultProps = {
-	visible: true,
+<span class="cstat-no" title="statement not covered" >MlSketchTool.defaultProps = {</span>
+	mapId: undefined,
+	buttonStyleOverride: {},
 };
-&nbsp;
-&nbsp;
-export default MlGPXViewer;
+export default MlSketchTool;
 &nbsp;</pre></td></tr></table></pre>
                 <div class='push'></div><!-- for sticky footer -->
@@ -1201,7 +883,7 @@ export default MlGPXViewer;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at Sat Nov 26 2022 10:32:12 GMT+0000 (Coordinated Universal Time)
+                at 2023-01-15T17:55:43.336Z
             </div>
         <script src="../../../prettify.js"></script>
         <script>