From e3d5ae02fe3062adcd4495e9dfdda86e386cab9f Mon Sep 17 00:00:00 2001 From: Silas Geywitz Date: Wed, 5 Oct 2016 14:52:53 +0200 Subject: [PATCH 01/12] add typescript --- package.json | 9 +++++++-- tsconfig.json | 22 ++++++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 tsconfig.json diff --git a/package.json b/package.json index 7e3ddde..e83bcb4 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,13 @@ "name": "leaflet.functionaltilelayer", "version": "0.0.0", "description": "Leaflet tile layer with functionally defined URL and support for promises.", - "keywords": ["leaflet"], + "keywords": [ + "leaflet" + ], "main": "src/leaflet.functionaltilelayer.js", "author": "Ishmael Smyrnow", - "license": "MIT" + "license": "MIT", + "dependencies": { + "@types/leaflet": "^1.0.34" + } } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..e7634b1 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "declaration": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "dom", + "es2015" + ], + "module": "es2015", + "moduleResolution": "node", + "target": "es5" + }, + "exclude": [ + "node_modules" + ], + "compileOnSave": false, + "atom": { + "rewriteTsconfig": false + } +} From 343c5bce55984d80cd208b1729d2fda4d1aa6fa1 Mon Sep 17 00:00:00 2001 From: Silas Geywitz Date: Wed, 5 Oct 2016 14:53:13 +0200 Subject: [PATCH 02/12] support for leaflet 1.0 --- src/leaflet.functionaltilelayer.d.ts | 27 +++++++++++++++++++++++++++ src/leaflet.functionaltilelayer.js | 26 +++++++++++++++++++------- 2 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 src/leaflet.functionaltilelayer.d.ts diff --git a/src/leaflet.functionaltilelayer.d.ts b/src/leaflet.functionaltilelayer.d.ts new file mode 100644 index 0000000..2adae48 --- /dev/null +++ b/src/leaflet.functionaltilelayer.d.ts @@ -0,0 +1,27 @@ +declare namespace L { + + export namespace TileLayer { + export interface FunctionalStatic extends L.TileLayer { + + new(urlTemplate: string, options?: L.TileLayerOptions): L.TileLayer.FunctionalStatic; + new(urlTemplate: (view: L.TileLayer.IView) => Promise, options?: L.TileLayerOptions): L.TileLayer.FunctionalStatic; + } + export var Functional: FunctionalStatic; + + + export interface IView { + tile: ITile; + zoom: number; + subdomain: string; + } + + export interface ITile { + column: number; + row: number; + } + } +} + +declare module 'leaflet.functionaltilelayer.js' { + export = L; +} diff --git a/src/leaflet.functionaltilelayer.js b/src/leaflet.functionaltilelayer.js index d71ed4e..a292e0a 100644 --- a/src/leaflet.functionaltilelayer.js +++ b/src/leaflet.functionaltilelayer.js @@ -34,13 +34,23 @@ L.TileLayer.Functional = L.TileLayer.extend({ return this._tileFunction(view); }, - _loadTile: function (tile, tilePoint) { - tile._layer = this; - tile.onload = this._tileOnLoad; - tile.onerror = this._tileOnError; + createTile: function (coords, done) { + var tile = document.createElement('img'); - this._adjustTilePoint(tilePoint); - var tileUrl = this.getTileUrl(tilePoint); + L.DomEvent.on(tile, 'load', L.bind(this._tileOnLoad, this, done, tile)); + L.DomEvent.on(tile, 'error', L.bind(this._tileOnError, this, done, tile)); + + if (this.options.crossOrigin) { + tile.crossOrigin = ''; + } + + /* + Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons + http://www.w3.org/TR/WCAG20-TECHS/H67 + */ + tile.alt = ''; + + var tileUrl = this.getTileUrl(coords); if (typeof tileUrl === 'string') { tile.src = tileUrl; @@ -59,9 +69,11 @@ L.TileLayer.Functional = L.TileLayer.extend({ }); }); } + + return tile; } }); L.tileLayer.functional = function (tileFunction, options) { return new L.TileLayer.Functional(tileFunction, options); -}; \ No newline at end of file +}; From 1716c15a516ce75cd326e020bd922dfc56476157 Mon Sep 17 00:00:00 2001 From: Silas Geywitz Date: Wed, 5 Oct 2016 14:53:33 +0200 Subject: [PATCH 03/12] add gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules From 14b13f401145ce1e36c4ab18b4a244856dd44cc5 Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 15:01:00 +0200 Subject: [PATCH 04/12] correct error in typescript definition --- src/leaflet.functionaltilelayer.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/leaflet.functionaltilelayer.d.ts b/src/leaflet.functionaltilelayer.d.ts index 2adae48..a572aca 100644 --- a/src/leaflet.functionaltilelayer.d.ts +++ b/src/leaflet.functionaltilelayer.d.ts @@ -22,6 +22,6 @@ declare namespace L { } } -declare module 'leaflet.functionaltilelayer.js' { +declare module 'leaflet.functionaltilelayer' { export = L; } From d223834f4310dcaf0baca3d6844680aae86e3fd4 Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 15:10:20 +0200 Subject: [PATCH 05/12] adding index.d.ts --- index.d.ts | 3 +++ src/leaflet.functionaltilelayer.d.ts | 4 ---- 2 files changed, 3 insertions(+), 4 deletions(-) create mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts new file mode 100644 index 0000000..3600387 --- /dev/null +++ b/index.d.ts @@ -0,0 +1,3 @@ +declare module 'leaflet.functionaltilelayer' { + export = L; +} diff --git a/src/leaflet.functionaltilelayer.d.ts b/src/leaflet.functionaltilelayer.d.ts index a572aca..d62b75d 100644 --- a/src/leaflet.functionaltilelayer.d.ts +++ b/src/leaflet.functionaltilelayer.d.ts @@ -21,7 +21,3 @@ declare namespace L { } } } - -declare module 'leaflet.functionaltilelayer' { - export = L; -} From 8e447455ab884ee51f3c7d6b045b72695c2ec729 Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 15:19:35 +0200 Subject: [PATCH 06/12] remove index.ts and add types-property to package.json --- index.d.ts | 3 --- package.json | 3 ++- src/leaflet.functionaltilelayer.d.ts | 4 ++++ 3 files changed, 6 insertions(+), 4 deletions(-) delete mode 100644 index.d.ts diff --git a/index.d.ts b/index.d.ts deleted file mode 100644 index 3600387..0000000 --- a/index.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -declare module 'leaflet.functionaltilelayer' { - export = L; -} diff --git a/package.json b/package.json index e83bcb4..17efaad 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "keywords": [ "leaflet" ], - "main": "src/leaflet.functionaltilelayer.js", + "main": "./src/leaflet.functionaltilelayer.js", + "types": "./src/leaflet.functionaltilelayer.d.ts", "author": "Ishmael Smyrnow", "license": "MIT", "dependencies": { diff --git a/src/leaflet.functionaltilelayer.d.ts b/src/leaflet.functionaltilelayer.d.ts index d62b75d..a572aca 100644 --- a/src/leaflet.functionaltilelayer.d.ts +++ b/src/leaflet.functionaltilelayer.d.ts @@ -21,3 +21,7 @@ declare namespace L { } } } + +declare module 'leaflet.functionaltilelayer' { + export = L; +} From dde21bcdf328055a451a992efcf2f05bb86aef97 Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 15:27:10 +0200 Subject: [PATCH 07/12] exampes changes --- .gitignore | 1 + example/basic.html | 14 +++++++------- example/promise.html | 20 ++++++++++---------- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 3c3629e..fd4f2b0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +.DS_Store diff --git a/example/basic.html b/example/basic.html index 766ffdb..e493ca3 100644 --- a/example/basic.html +++ b/example/basic.html @@ -3,8 +3,8 @@ Basic example - - + + @@ -16,18 +16,18 @@ - \ No newline at end of file + diff --git a/example/promise.html b/example/promise.html index 78f348d..f5d31ad 100644 --- a/example/promise.html +++ b/example/promise.html @@ -3,8 +3,8 @@ Promise example - - + + @@ -13,26 +13,26 @@

Tiles are rendered using promises and after a delay of 1-3 seconds.

- +
- \ No newline at end of file + From c4f0a9b20bfc2484e514875e3cbbfbad8b006432 Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 15:35:18 +0200 Subject: [PATCH 08/12] Reaadme changed --- README.md | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 704ee92..a260279 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,27 @@ Leaflet.functionaltilelayer =========================== +For use with Leaflet 1.0.1. + Leaflet tile layer with functionally defined URL and support for promises. A typical use case is fetching tiles asynchronously, with an ajax request or IndexedDB query. ## Usage -Use it like any other tile layer, but instead of providing a `urlTemplate` as -the first argument, provide a function. The function should return either the + +Use it like any other tile layer, but instead of providing a `urlTemplate` as +the first argument, provide a function. The function should return either the tile URL as a string, or a promise which resolves to a string. ```javascript var funcLayer = new L.TileLayer.Functional(function (view) { - var url = 'http://otile{3}.mqcdn.com/tiles/1.0.0/map/{0}/{1}/{2}.jpg' - .replace('{0}', view.zoom) - .replace('{1}', view.tile.row) - .replace('{2}', view.tile.column) - .replace('{3}', view.subdomain); - + var url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' + .replace('{z}', view.zoom) + .replace('{y}', view.tile.row) + .replace('{x}', view.tile.column) + .replace('{s}', view.subdomain); + return url; }); ``` @@ -40,17 +43,23 @@ view = { ``` For an example of the code above, see the [basic example] -(http://ismyrnow.github.com/Leaflet.functionaltilelayer/example/basic.html). +(example/basic.html). For an example of using promises, see the [promise example] -(http://ismyrnow.github.com/Leaflet.functionaltilelayer/example/promise.html). +(example/promise.html). + +## Typescript + +Brings a very basic Typescript-Definition. Feel free to improve and create a pull-Request. ## Thanks +Thanks to @ismyrnow for original version. See [ismyrnow/Leaflet.functionaltilelayer](https://github.com/ismyrnow/Leaflet.functionaltilelayer) + Thanks to @ryanttb and [jQuery Geo](http://jquerygeo.com/)'s service objects, which were the inspiration for this plugin. ## License Leaflet.functionaltilelayer is free software, and may be redistributed under -the MIT-LICENSE. \ No newline at end of file +the MIT-LICENSE. From 28f9f263b81369d866bf89c65253642ffa4dda3c Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 17:42:38 +0200 Subject: [PATCH 09/12] remove typescript stuff --- README.md | 6 ------ package.json | 8 ++------ src/leaflet.functionaltilelayer.d.ts | 27 --------------------------- 3 files changed, 2 insertions(+), 39 deletions(-) delete mode 100644 src/leaflet.functionaltilelayer.d.ts diff --git a/README.md b/README.md index a260279..8640c2d 100644 --- a/README.md +++ b/README.md @@ -48,14 +48,8 @@ For an example of the code above, see the [basic example] For an example of using promises, see the [promise example] (example/promise.html). -## Typescript - -Brings a very basic Typescript-Definition. Feel free to improve and create a pull-Request. - ## Thanks -Thanks to @ismyrnow for original version. See [ismyrnow/Leaflet.functionaltilelayer](https://github.com/ismyrnow/Leaflet.functionaltilelayer) - Thanks to @ryanttb and [jQuery Geo](http://jquerygeo.com/)'s service objects, which were the inspiration for this plugin. diff --git a/package.json b/package.json index 17efaad..bdfd3a9 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,11 @@ { "name": "leaflet.functionaltilelayer", - "version": "0.0.0", + "version": "1.0.0", "description": "Leaflet tile layer with functionally defined URL and support for promises.", "keywords": [ "leaflet" ], "main": "./src/leaflet.functionaltilelayer.js", - "types": "./src/leaflet.functionaltilelayer.d.ts", "author": "Ishmael Smyrnow", - "license": "MIT", - "dependencies": { - "@types/leaflet": "^1.0.34" - } + "license": "MIT" } diff --git a/src/leaflet.functionaltilelayer.d.ts b/src/leaflet.functionaltilelayer.d.ts deleted file mode 100644 index a572aca..0000000 --- a/src/leaflet.functionaltilelayer.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -declare namespace L { - - export namespace TileLayer { - export interface FunctionalStatic extends L.TileLayer { - - new(urlTemplate: string, options?: L.TileLayerOptions): L.TileLayer.FunctionalStatic; - new(urlTemplate: (view: L.TileLayer.IView) => Promise, options?: L.TileLayerOptions): L.TileLayer.FunctionalStatic; - } - export var Functional: FunctionalStatic; - - - export interface IView { - tile: ITile; - zoom: number; - subdomain: string; - } - - export interface ITile { - column: number; - row: number; - } - } -} - -declare module 'leaflet.functionaltilelayer' { - export = L; -} From f8d69860e93dc57f1a3b2b3ffc5f38bedf6b5de1 Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 17:42:44 +0200 Subject: [PATCH 10/12] fix indentation --- src/leaflet.functionaltilelayer.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/leaflet.functionaltilelayer.js b/src/leaflet.functionaltilelayer.js index a292e0a..1f3c281 100644 --- a/src/leaflet.functionaltilelayer.js +++ b/src/leaflet.functionaltilelayer.js @@ -37,18 +37,18 @@ L.TileLayer.Functional = L.TileLayer.extend({ createTile: function (coords, done) { var tile = document.createElement('img'); - L.DomEvent.on(tile, 'load', L.bind(this._tileOnLoad, this, done, tile)); - L.DomEvent.on(tile, 'error', L.bind(this._tileOnError, this, done, tile)); + L.DomEvent.on(tile, 'load', L.bind(this._tileOnLoad, this, done, tile)); + L.DomEvent.on(tile, 'error', L.bind(this._tileOnError, this, done, tile)); - if (this.options.crossOrigin) { - tile.crossOrigin = ''; - } + if (this.options.crossOrigin) { + tile.crossOrigin = ''; + } /* Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons http://www.w3.org/TR/WCAG20-TECHS/H67 */ - tile.alt = ''; + tile.alt = ''; var tileUrl = this.getTileUrl(coords); @@ -70,7 +70,7 @@ L.TileLayer.Functional = L.TileLayer.extend({ }); } - return tile; + return tile; } }); From 794d16f6dee89a650836c41af146e6b72be8deec Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Wed, 5 Oct 2016 17:46:24 +0200 Subject: [PATCH 11/12] fix indentation --- src/leaflet.functionaltilelayer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/leaflet.functionaltilelayer.js b/src/leaflet.functionaltilelayer.js index 1f3c281..3677a13 100644 --- a/src/leaflet.functionaltilelayer.js +++ b/src/leaflet.functionaltilelayer.js @@ -44,10 +44,10 @@ L.TileLayer.Functional = L.TileLayer.extend({ tile.crossOrigin = ''; } - /* - Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons - http://www.w3.org/TR/WCAG20-TECHS/H67 - */ + /* + Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons + http://www.w3.org/TR/WCAG20-TECHS/H67 + */ tile.alt = ''; var tileUrl = this.getTileUrl(coords); From 9da47c1eb76b16f207e87c1b676189bbb4f3f19e Mon Sep 17 00:00:00 2001 From: Schwobaland Date: Thu, 6 Oct 2016 08:23:09 +0200 Subject: [PATCH 12/12] removed tsconfig --- package.json | 2 +- tsconfig.json | 22 ---------------------- 2 files changed, 1 insertion(+), 23 deletions(-) delete mode 100644 tsconfig.json diff --git a/package.json b/package.json index bdfd3a9..f1b896e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "keywords": [ "leaflet" ], - "main": "./src/leaflet.functionaltilelayer.js", + "main": "src/leaflet.functionaltilelayer.js", "author": "Ishmael Smyrnow", "license": "MIT" } diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index e7634b1..0000000 --- a/tsconfig.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "compilerOptions": { - "allowSyntheticDefaultImports": true, - "declaration": true, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "lib": [ - "dom", - "es2015" - ], - "module": "es2015", - "moduleResolution": "node", - "target": "es5" - }, - "exclude": [ - "node_modules" - ], - "compileOnSave": false, - "atom": { - "rewriteTsconfig": false - } -}