Feature/addimageurlcreator (#334)

* Move code for easier usage with custom implementations

* Export new type

* Make it to (re)use withour a full leaflet layer instance

changelog.md

@@ -4,3 +4,7 @@
 - getTile is now getBlobByKey
 - openTilesDataBase is now an export function to get whole idb database
 - New control option alwaysDownload, if false, the control will not redownload tiles already in the db (and the savetile\* event do not fire)
+
+# Version 4
+
+- Changed arguments of getStoredTilesAsJson: send an object with tilesize instead of the full layer

docs/src/index/storageLayer.js

@@ -7,13 +7,13 @@ export default function storageLayer(baseLayer, layerswitcher) {
 
   const getGeoJsonData = () =>
     getStorageInfo(urlTemplate).then((tiles) =>
-      getStoredTilesAsJson(baseLayer, tiles)
+      getStoredTilesAsJson(baseLayer.getTileSize(), tiles),
     );
 
   const addStorageLayer = () => {
     getGeoJsonData().then((geojson) => {
       layer = geoJSON(geojson).bindPopup(
-        (clickedLayer) => clickedLayer.feature.properties.key
+        (clickedLayer) => clickedLayer.feature.properties.key,
       );
       layerswitcher.addOverlay(layer, 'offline tiles');
     });

src/TileLayerOffline.ts

@@ -12,6 +12,7 @@ import {
   getBlobByKey,
   TileInfo,
   getTilePoints,
+  getTileImageSource,
 } from './TileManager';
 
 export class TileLayerOffline extends TileLayer {
@@ -32,22 +33,14 @@ export class TileLayerOffline extends TileLayer {
 
     tile.setAttribute('role', 'presentation');
 
-    this.setDataUrl(coords)
-      .then((dataurl: string) => (tile.src = dataurl))
-      .catch(() => (tile.src = this.getTileUrl(coords)));
+    getTileImageSource(
+      this._getStorageKey(coords),
+      this.getTileUrl(coords),
+    ).then((src) => (tile.src = src));
 
     return tile;
   }
 
-  setDataUrl(coords: { x: number; y: number; z: number }): Promise<string> {
-    return getBlobByKey(this._getStorageKey(coords)).then((data) => {
-      if (data && typeof data === 'object') {
-        return URL.createObjectURL(data);
-      }
-      throw new Error('tile not found in storage');
-    });
-  }
-
   /**
    * get key to use for storage
    * @private
@@ -63,6 +56,9 @@ export class TileLayerOffline extends TileLayer {
     });
   }
 
+  /**
+   * Get tileinfo for zoomlevel & bounds
+   */
   getTileUrls(bounds: Bounds, zoom: number): TileInfo[] {
     const tiles: TileInfo[] = [];
     const tilePoints = getTilePoints(bounds, this.getTileSize());
@@ -95,8 +91,6 @@ export class TileLayerOffline extends TileLayer {
   }
 }
 
-// TODO, typescript does not recognize arguments for new instance
-// TODO check global in umd
 export function tileLayerOffline(url: string, options: TileLayerOptions) {
   return new TileLayerOffline(url, options);
 }

src/TileManager.ts

@@ -143,7 +143,7 @@ export function getTilePoints(area: Bounds, tileSize: Point): Point[] {
  *
  */
 export function getStoredTilesAsJson(
-  layer: GridLayer,
+  tileSize: { x: number; y: number },
   tiles: TileInfo[],
 ): FeatureCollection<Polygon> {
   const featureCollection: FeatureCollection<Polygon> = {
@@ -152,12 +152,12 @@ export function getStoredTilesAsJson(
   };
   for (let i = 0; i < tiles.length; i += 1) {
     const topLeftPoint = new Point(
-      tiles[i].x * layer.getTileSize().x,
-      tiles[i].y * layer.getTileSize().y,
+      tiles[i].x * tileSize.x,
+      tiles[i].y * tileSize.y,
     );
     const bottomRightPoint = new Point(
-      topLeftPoint.x + layer.getTileSize().x,
-      topLeftPoint.y + layer.getTileSize().y,
+      topLeftPoint.x + tileSize.x,
+      topLeftPoint.y + tileSize.y,
     );
 
     const topLeftlatlng = CRS.EPSG3857.pointToLatLng(topLeftPoint, tiles[i].z);
@@ -215,3 +215,12 @@ export async function hasTile(key: string): Promise<boolean> {
 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);
+}

src/index.ts

@@ -5,7 +5,7 @@ export type {
   ControlSaveTiles,
   SaveTileOptions,
 } from './ControlSaveTiles';
-export type { TileInfo } from './TileManager';
+export type { TileInfo, StoredTile } from './TileManager';
 export type { TileLayerOffline } from './TileLayerOffline';
 export {
   getStorageInfo,

test/TileLayerTest.ts

@@ -2,15 +2,6 @@ import { Bounds, Point } from 'leaflet';
 import { TileLayerOffline } from '../src/TileLayerOffline';
 
 describe('TileLayer.Offline', () => {
-  it('get getTileUrl', () => {
-    const layer = new TileLayerOffline(
-      'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
-    );
-    assert.instanceOf(
-      layer.setDataUrl({ x: 123456, y: 456789, z: 16 }),
-      Promise,
-    );
-  });
   it('createTile', () => {
     const url = 'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
     const layer = new TileLayerOffline(url);

test/TileManagerTest.ts

@@ -5,6 +5,7 @@ import {
   getStorageInfo,
   getStorageLength,
   getStoredTilesAsJson,
+  getTileImageSource,
   getTilePoints,
   hasTile,
   removeTile,
@@ -84,7 +85,7 @@ describe('manage tile storage', () => {
 
   it('Creates geojson with tiles', () => {
     const layer = gridLayer();
-    const json = getStoredTilesAsJson(layer, [testTileInfo]);
+    const json = getStoredTilesAsJson(layer.getTileSize(), [testTileInfo]);
     assert.lengthOf(json.features, 1);
     const feature = json.features[0];
     assert.equal(feature.type, 'Feature');
@@ -113,4 +114,19 @@ describe('manage tile storage', () => {
     assert.instanceOf(err, Error);
     fetchMock.restore();
   });
+
+  it('get image src returns url if tile with key does not exist', async () => {
+    const result = await getTileImageSource(testTileInfo.key, testTileInfo.url);
+    assert.equal(result, testTileInfo.url);
+  });
+
+  it('get image src returns dataSource url if tile key does exist', async () => {
+    await saveTile(testTileInfo, new Blob());
+    const result = await getTileImageSource(
+      testTileInfo.key,
+      'http://someurl/tile.png',
+    );
+    assert.isString(result);
+    assert.isTrue(result.includes('blob:'));
+  });
 });