leaflet.offline

<!doctype html> <html lang="en"> <head> <title>Code coverage report for TileManager.ts</title> <meta charset="utf-8" /> <link rel="stylesheet" href="prettify.css" /> <link rel="stylesheet" href="base.css" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.png" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type='text/css'> .coverage-summary .sorter { background-image: url(sort-arrow-sprite.png); } </style> </head> <body> <div class='wrapper'> <div class='pad1'> <h1><a href="index.html">All files</a> TileManager.ts</h1> <div class='clearfix'> <div class='fl pad1y space-right2'> 98.24% Statements 56/57 </div> <div class='fl pad1y space-right2'> 81.81% Branches 9/11 </div> <div class='fl pad1y space-right2'> 100% Functions 15/15 </div> <div class='fl pad1y space-right2'> 98.14% Lines 53/54 </div> </div> Press n or j to go to the next uncovered block, b, p or k for the previous block. <template id="filterTemplate"> <div class="quiet"> Filter: <input oninput="onInput()" type="search" id="fileSearch"> </div> </template> </div> <div class='status-line high'></div> <pre><table class="coverage"> <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a> <a name='L2'></a><a href='#L2'>2</a> <a name='L3'></a><a href='#L3'>3</a> <a name='L4'></a><a href='#L4'>4</a> <a name='L5'></a><a href='#L5'>5</a> <a name='L6'></a><a href='#L6'>6</a> <a name='L7'></a><a href='#L7'>7</a> <a name='L8'></a><a href='#L8'>8</a> <a name='L9'></a><a href='#L9'>9</a> <a name='L10'></a><a href='#L10'>10</a> <a name='L11'></a><a href='#L11'>11</a> <a name='L12'></a><a href='#L12'>12</a> <a name='L13'></a><a href='#L13'>13</a> <a name='L14'></a><a href='#L14'>14</a> <a name='L15'></a><a href='#L15'>15</a> <a name='L16'></a><a href='#L16'>16</a> <a name='L17'></a><a href='#L17'>17</a> <a name='L18'></a><a href='#L18'>18</a> <a name='L19'></a><a href='#L19'>19</a> <a name='L20'></a><a href='#L20'>20</a> <a name='L21'></a><a href='#L21'>21</a> <a name='L22'></a><a href='#L22'>22</a> <a name='L23'></a><a href='#L23'>23</a> <a name='L24'></a><a href='#L24'>24</a> <a name='L25'></a><a href='#L25'>25</a> <a name='L26'></a><a href='#L26'>26</a> <a name='L27'></a><a href='#L27'>27</a> <a name='L28'></a><a href='#L28'>28</a> <a name='L29'></a><a href='#L29'>29</a> <a name='L30'></a><a href='#L30'>30</a> <a name='L31'></a><a href='#L31'>31</a> <a name='L32'></a><a href='#L32'>32</a> <a name='L33'></a><a href='#L33'>33</a> <a name='L34'></a><a href='#L34'>34</a> <a name='L35'></a><a href='#L35'>35</a> <a name='L36'></a><a href='#L36'>36</a> <a name='L37'></a><a href='#L37'>37</a> <a name='L38'></a><a href='#L38'>38</a> <a name='L39'></a><a href='#L39'>39</a> <a name='L40'></a><a href='#L40'>40</a> <a name='L41'></a><a href='#L41'>41</a> <a name='L42'></a><a href='#L42'>42</a> <a name='L43'></a><a href='#L43'>43</a> <a name='L44'></a><a href='#L44'>44</a> <a name='L45'></a><a href='#L45'>45</a> <a name='L46'></a><a href='#L46'>46</a> <a name='L47'></a><a href='#L47'>47</a> <a name='L48'></a><a href='#L48'>48</a> <a name='L49'></a><a href='#L49'>49</a> <a name='L50'></a><a href='#L50'>50</a> <a name='L51'></a><a href='#L51'>51</a> <a name='L52'></a><a href='#L52'>52</a> <a name='L53'></a><a href='#L53'>53</a> <a name='L54'></a><a href='#L54'>54</a> <a name='L55'></a><a href='#L55'>55</a> <a name='L56'></a><a href='#L56'>56</a> <a name='L57'></a><a href='#L57'>57</a> <a name='L58'></a><a href='#L58'>58</a> <a name='L59'></a><a href='#L59'>59</a> <a name='L60'></a><a href='#L60'>60</a> <a name='L61'></a><a href='#L61'>61</a> <a name='L62'></a><a href='#L62'>62</a> <a name='L63'></a><a href='#L63'>63</a> <a name='L64'></a><a href='#L64'>64</a> <a name='L65'></a><a href='#L65'>65</a> <a name='L66'></a><a href='#L66'>66</a> <a name='L67'></a><a href='#L67'>67</a> <a name='L68'></a><a href='#L68'>68</a> <a name='L69'></a><a href='#L69'>69</a> <a name='L70'></a><a href='#L70'>70</a> <a name='L71'></a><a href='#L71'>71</a> <a name='L72'></a><a href='#L72'>72</a> <a name='L73'></a><a href='#L73'>73</a> <a name='L74'></a><a href='#L74'>74</a> <a name='L75'></a><a href='#L75'>75</a> <a name='L76'></a><a href='#L76'>76</a> <a name='L77'></a><a href='#L77'>77</a> <a name='L78'></a><a href='#L78'>78</a> <a name='L79'></a><a href='#L79'>79</a> <a name='L80'></a><a href='#L80'>80</a> <a name='L81'></a><a href='#L81'>81</a> <a name='L82'></a><a href='#L82'>82</a> <a name='L83'></a><a href='#L83'>83</a> <a name='L84'></a><a href='#L84'>84</a> <a name='L85'></a><a href='#L85'>85</a> <a name='L86'></a><a href='#L86'>86</a> <a name='L87'></a><a href='#L87'>87</a> <a name='L88'></a><a href='#L88'>88</a> <a name='L89'></a><a href='#L89'>89</a> <a name='L90'></a><a href='#L90'>90</a> <a name='L91'></a><a href='#L91'>91</a> <a name='L92'></a><a href='#L92'>92</a> <a name='L93'></a><a href='#L93'>93</a> <a name='L94'></a><a href='#L94'>94</a> <a name='L95'></a><a href='#L95'>95</a> <a name='L96'></a><a href='#L96'>96</a> <a name='L97'></a><a href='#L97'>97</a> <a name='L98'></a><a href='#L98'>98</a> <a name='L99'></a><a href='#L99'>99</a> <a name='L100'></a><a href='#L100'>100</a> <a name='L101'></a><a href='#L101'>101</a> <a name='L102'></a><a href='#L102'>102</a> <a name='L103'></a><a href='#L103'>103</a> <a name='L104'></a><a href='#L104'>104</a> <a name='L105'></a><a href='#L105'>105</a> <a name='L106'></a><a href='#L106'>106</a> <a name='L107'></a><a href='#L107'>107</a> <a name='L108'></a><a href='#L108'>108</a> <a name='L109'></a><a href='#L109'>109</a> <a name='L110'></a><a href='#L110'>110</a> <a name='L111'></a><a href='#L111'>111</a> <a name='L112'></a><a href='#L112'>112</a> <a name='L113'></a><a href='#L113'>113</a> <a name='L114'></a><a href='#L114'>114</a> <a name='L115'></a><a href='#L115'>115</a> <a name='L116'></a><a href='#L116'>116</a> <a name='L117'></a><a href='#L117'>117</a> <a name='L118'></a><a href='#L118'>118</a> <a name='L119'></a><a href='#L119'>119</a> <a name='L120'></a><a href='#L120'>120</a> <a name='L121'></a><a href='#L121'>121</a> <a name='L122'></a><a href='#L122'>122</a> <a name='L123'></a><a href='#L123'>123</a> <a name='L124'></a><a href='#L124'>124</a> <a name='L125'></a><a href='#L125'>125</a> <a name='L126'></a><a href='#L126'>126</a> <a name='L127'></a><a href='#L127'>127</a> <a name='L128'></a><a href='#L128'>128</a> <a name='L129'></a><a href='#L129'>129</a> <a name='L130'></a><a href='#L130'>130</a> <a name='L131'></a><a href='#L131'>131</a> <a name='L132'></a><a href='#L132'>132</a> <a name='L133'></a><a href='#L133'>133</a> <a name='L134'></a><a href='#L134'>134</a> <a name='L135'></a><a href='#L135'>135</a> <a name='L136'></a><a href='#L136'>136</a> <a name='L137'></a><a href='#L137'>137</a> <a name='L138'></a><a href='#L138'>138</a> <a name='L139'></a><a href='#L139'>139</a> <a name='L140'></a><a href='#L140'>140</a> <a name='L141'></a><a href='#L141'>141</a> <a name='L142'></a><a href='#L142'>142</a> <a name='L143'></a><a href='#L143'>143</a> <a name='L144'></a><a href='#L144'>144</a> <a name='L145'></a><a href='#L145'>145</a> <a name='L146'></a><a href='#L146'>146</a> <a name='L147'></a><a href='#L147'>147</a> <a name='L148'></a><a href='#L148'>148</a> <a name='L149'></a><a href='#L149'>149</a> <a name='L150'></a><a href='#L150'>150</a> <a name='L151'></a><a href='#L151'>151</a> <a name='L152'></a><a href='#L152'>152</a> <a name='L153'></a><a href='#L153'>153</a> <a name='L154'></a><a href='#L154'>154</a> <a name='L155'></a><a href='#L155'>155</a> <a name='L156'></a><a href='#L156'>156</a> <a name='L157'></a><a href='#L157'>157</a> <a name='L158'></a><a href='#L158'>158</a> <a name='L159'></a><a href='#L159'>159</a> <a name='L160'></a><a href='#L160'>160</a> <a name='L161'></a><a href='#L161'>161</a> <a name='L162'></a><a href='#L162'>162</a> <a name='L163'></a><a href='#L163'>163</a> <a name='L164'></a><a href='#L164'>164</a> <a name='L165'></a><a href='#L165'>165</a> <a name='L166'></a><a href='#L166'>166</a> <a name='L167'></a><a href='#L167'>167</a> <a name='L168'></a><a href='#L168'>168</a> <a name='L169'></a><a href='#L169'>169</a> <a name='L170'></a><a href='#L170'>170</a> <a name='L171'></a><a href='#L171'>171</a> <a name='L172'></a><a href='#L172'>172</a> <a name='L173'></a><a href='#L173'>173</a> <a name='L174'></a><a href='#L174'>174</a> <a name='L175'></a><a href='#L175'>175</a> <a name='L176'></a><a href='#L176'>176</a> <a name='L177'></a><a href='#L177'>177</a> <a name='L178'></a><a href='#L178'>178</a> <a name='L179'></a><a href='#L179'>179</a> <a name='L180'></a><a href='#L180'>180</a> <a name='L181'></a><a href='#L181'>181</a> <a name='L182'></a><a href='#L182'>182</a> <a name='L183'></a><a href='#L183'>183</a> <a name='L184'></a><a href='#L184'>184</a> <a name='L185'></a><a href='#L185'>185</a> <a name='L186'></a><a href='#L186'>186</a> <a name='L187'></a><a href='#L187'>187</a> <a name='L188'></a><a href='#L188'>188</a> <a name='L189'></a><a href='#L189'>189</a> <a name='L190'></a><a href='#L190'>190</a> <a name='L191'></a><a href='#L191'>191</a> <a name='L192'></a><a href='#L192'>192</a> <a name='L193'></a><a href='#L193'>193</a> <a name='L194'></a><a href='#L194'>194</a> <a name='L195'></a><a href='#L195'>195</a> <a name='L196'></a><a href='#L196'>196</a> <a name='L197'></a><a href='#L197'>197</a> <a name='L198'></a><a href='#L198'>198</a> <a name='L199'></a><a href='#L199'>199</a> <a name='L200'></a><a href='#L200'>200</a> <a name='L201'></a><a href='#L201'>201</a> <a name='L202'></a><a href='#L202'>202</a> <a name='L203'></a><a href='#L203'>203</a> <a name='L204'></a><a href='#L204'>204</a> <a name='L205'></a><a href='#L205'>205</a> <a name='L206'></a><a href='#L206'>206</a> <a name='L207'></a><a href='#L207'>207</a> <a name='L208'></a><a href='#L208'>208</a> <a name='L209'></a><a href='#L209'>209</a> <a name='L210'></a><a href='#L210'>210</a> <a name='L211'></a><a href='#L211'>211</a> <a name='L212'></a><a href='#L212'>212</a> <a name='L213'></a><a href='#L213'>213</a> <a name='L214'></a><a href='#L214'>214</a> <a name='L215'></a><a href='#L215'>215</a> <a name='L216'></a><a href='#L216'>216</a> <a name='L217'></a><a href='#L217'>217</a> <a name='L218'></a><a href='#L218'>218</a> <a name='L219'></a><a href='#L219'>219</a> <a name='L220'></a><a href='#L220'>220</a> <a name='L221'></a><a href='#L221'>221</a> <a name='L222'></a><a href='#L222'>222</a> <a name='L223'></a><a href='#L223'>223</a> <a name='L224'></a><a href='#L224'>224</a> <a name='L225'></a><a href='#L225'>225</a> <a name='L226'></a><a href='#L226'>226</a> <a name='L227'></a><a href='#L227'>227</a></td><td class="line-coverage quiet">                                                3x 3x       69x 66x   3x   1x 1x   1x 1x     1x 1x       3x                     14x 14x                         3x 3x 3x                     2x 2x 1x   1x                       14x 14x             193x             16x 16x     16x 16x   16x 31x 91x     16x                                         1x       1x 1x       1x         1x 1x       1x                                   1x             1x 1x             1x   1x       14x 14x 14x             22x       12x 12x 11x   1x 1x    </td><td class="text"><pre class="prettyprint lang-js">/** * Api methods used in control and layer * For advanced usage * * @module TileManager * */   import { Bounds, Browser, CRS, Point, Util } from 'leaflet'; import { openDB, deleteDB, IDBPDatabase } from 'idb'; import { FeatureCollection, Polygon } from 'geojson';   export type TileInfo = { key: string; url: string; urlTemplate: string; x: number; y: number; z: number; createdAt: number; };   export type StoredTile = TileInfo & { blob: Blob };   const tileStoreName = 'tileStore'; const urlTemplateIndex = 'urlTemplate'; let dbPromise: Promise<IDBPDatabase> | undefined;   export function openTilesDataBase(): Promise<IDBPDatabase> { if (dbPromise) { return dbPromise; } dbPromise = openDB('leaflet.offline', 2, { upgrade(db, oldVersion) { deleteDB('leaflet_offline'); deleteDB('leaflet_offline_areas');   if (oldVersion < 1) { const tileStore = db.createObjectStore(tileStoreName, { keyPath: 'key', }); tileStore.createIndex(urlTemplateIndex, 'urlTemplate'); tileStore.createIndex('z', 'z'); } }, }); return dbPromise; }   /** * @example * ```js * import { getStorageLength } from 'leaflet.offline' * getStorageLength().then(i => console.log(i + 'tiles in storage')) * ``` */ export async function getStorageLength(): Promise<number> { const db = await openTilesDataBase(); return db.count(tileStoreName); }   /** * @example * ```js * import { getStorageInfo } from 'leaflet.offline' * getStorageInfo('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png') * ``` */ export async function getStorageInfo( urlTemplate: string, ): Promise<StoredTile[]> { const range = IDBKeyRange.only(urlTemplate); const db = await openTilesDataBase(); return db.getAllFromIndex(tileStoreName, urlTemplateIndex, range); }   /** * @example * ```js * import { downloadTile } from 'leaflet.offline' * downloadTile(tileInfo.url).then(blob => saveTile(tileInfo, blob)) * ``` */ export async function downloadTile(tileUrl: string): Promise<Blob> { const response = await fetch(tileUrl); if (!response.ok) { throw new Error(`Request failed with status ${response.statusText}`); } return response.blob(); } /** * @example * ```js * saveTile(tileInfo, blob).then(() => console.log(`saved tile from ${tileInfo.url}`)) * ``` */ export async function saveTile( tileInfo: TileInfo, blob: Blob, ): Promise<IDBValidKey> { const db = await openTilesDataBase(); return db.put(tileStoreName, { blob, ...tileInfo, }); }   export function getTileUrl(urlTemplate: string, data: any): string { return Util.template(urlTemplate, { ...data, r: Browser.retina ? '@2x' : '', }); }   export function getTilePoints(area: Bounds, tileSize: Point): Point[] { const points: Point[] = []; Iif (!area.min || !area.max) { return points; } const topLeftTile = area.min.divideBy(tileSize.x).floor(); const bottomRightTile = area.max.divideBy(tileSize.x).floor();   for (let j = topLeftTile.y; j <= bottomRightTile.y; j += 1) { for (let i = topLeftTile.x; i <= bottomRightTile.x; i += 1) { points.push(new Point(i, j)); } } return points; } /** * Get a geojson of tiles from one resource * * @example * const urlTemplate = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; * const getGeoJsonData = () => LeafletOffline.getStorageInfo(urlTemplate) * .then((data) => LeafletOffline.getStoredTilesAsJson(baseLayer, data)); * * getGeoJsonData().then((geojson) => { * storageLayer = L.geoJSON(geojson).bindPopup( * (clickedLayer) => clickedLayer.feature.properties.key, * ); * }); * */ export function getStoredTilesAsJson( tileSize: { x: number; y: number }, tiles: TileInfo[], ): FeatureCollection<Polygon> { const featureCollection: FeatureCollection<Polygon> = { type: 'FeatureCollection', features: [], }; for (let i = 0; i < tiles.length; i += 1) { const topLeftPoint = new Point( tiles[i].x * tileSize.x, tiles[i].y * tileSize.y, ); const bottomRightPoint = new Point( topLeftPoint.x + tileSize.x, topLeftPoint.y + tileSize.y, );   const topLeftlatlng = CRS.EPSG3857.pointToLatLng(topLeftPoint, tiles[i].z); const botRightlatlng = CRS.EPSG3857.pointToLatLng( bottomRightPoint, tiles[i].z, ); featureCollection.features.push({ type: 'Feature', properties: tiles[i], geometry: { type: 'Polygon', coordinates: [ [ [topLeftlatlng.lng, topLeftlatlng.lat], [botRightlatlng.lng, topLeftlatlng.lat], [botRightlatlng.lng, botRightlatlng.lat], [topLeftlatlng.lng, botRightlatlng.lat], [topLeftlatlng.lng, topLeftlatlng.lat], ], ], }, }); }   return featureCollection; }   /** * Remove tile by key */ export async function removeTile(key: string): Promise<void> { const db = await openTilesDataBase(); return db.delete(tileStoreName, key); }   /** * Get single tile blob */ export async function getBlobByKey(key: string): Promise<Blob> { return (await openTilesDataBase()) .get(tileStoreName, key) .then((result) => result && result.blob); }   export async function hasTile(key: string): Promise<boolean> { const db = await openTilesDataBase(); const result = await db.getKey(tileStoreName, key); return result !== undefined; }   /** * Remove everything */ export async function truncate(): Promise<void> { return (await openTilesDataBase()).clear(tileStoreName); }   export async function getTileImageSource(key: string, url: string) { const shouldUseUrl = !(await hasTile(key)); if (shouldUseUrl) { return url; } const blob = await getBlobByKey(key); return URL.createObjectURL(blob); }  </pre></td></tr></table></pre> <div class='push'></div> </div> <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 2024-08-01T06:42:53.142Z </div> <script src="prettify.js"></script> <script> window.onload = function () { prettyPrint(); }; </script> <script src="sorter.js"></script> <script src="block-navigation.js"></script> </body> </html>