Skip to content

Support for Leaflet 1.0.1 and added Typescript-Definition #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Schwobaland wants to merge 13 commits into
base: gh-pages
Choose a base branch
from
Open

Support for Leaflet 1.0.1 and added Typescript-Definition #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
e3d5ae0
add typescript
Oct 5, 2016
343c5bc
support for leaflet 1.0
Oct 5, 2016
1716c15
add gitignore
Oct 5, 2016
14b13f4
correct error in typescript definition
Oct 5, 2016
d223834
adding index.d.ts
Oct 5, 2016
8e44745
remove index.ts and add types-property to package.json
Oct 5, 2016
dde21bc
exampes changes
Oct 5, 2016
c4f0a9b
Reaadme changed
Oct 5, 2016
28f9f26
remove typescript stuff
Oct 5, 2016
f8d6986
fix indentation
Oct 5, 2016
794d16f
fix indentation
Oct 5, 2016
9da47c1
removed tsconfig
Oct 6, 2016
bff707d
Merge branch 'gh-pages' of https://github.com/ismyrnow/Leaflet.functi…
Oct 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
.DS_Store
25 changes: 14 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
Leaflet.functionaltilelayer
===========================

For use with Leaflet 1.0.1.
Copy link
Copy Markdown
Owner

@ismyrnow ismyrnow Oct 5, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I might tweak this a bit, to note that an older version is available. You can leave it how it is for now.

Copy link
Copy Markdown
Author

@Schwobaland Schwobaland Oct 5, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will add a version number 1.0.0 to package.json. Maybe you could create a tag for 0.7.


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'
Copy link
Copy Markdown
Owner

@ismyrnow ismyrnow Oct 5, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for bringing in valid tiles (since the mq tiles went away)!

.replace('{z}', view.zoom)
.replace('{y}', view.tile.row)
.replace('{x}', view.tile.column)
.replace('{s}', view.subdomain);

return url;
});
```
Expand All @@ -40,10 +43,10 @@ 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).

## Thanks

Expand All @@ -53,4 +56,4 @@ which were the inspiration for this plugin.
## License

Leaflet.functionaltilelayer is free software, and may be redistributed under
the MIT-LICENSE.
the MIT-LICENSE.
14 changes: 7 additions & 7 deletions example/basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<title>Basic example</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="../src/leaflet.functionaltilelayer.js"></script>
Expand All @@ -16,18 +16,18 @@
<script type="text/javascript">

var funcLayer = new L.TileLayer.Functional(function (view) {
var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{y}/{x}.jpg'
var url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
.replace('{z}', view.zoom)
.replace('{x}', view.tile.row)
.replace('{y}', view.tile.column)
.replace('{y}', view.tile.row)
.replace('{x}', view.tile.column)
.replace('{s}', view.subdomain);
return url;
}, {
subdomains: '1234'
subdomains: 'abc'
});

var map = new L.Map('map', { center: new L.LatLng(42.3584308, -71.0597732), zoom: 15, layers: [funcLayer] });

</script>
</body>
</html>
</html>
20 changes: 10 additions & 10 deletions example/promise.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<title>Promise example</title>

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Expand All @@ -13,26 +13,26 @@
<body>

<p>Tiles are rendered using promises and after a delay of 1-3 seconds.</p>

<div id="map" style="position:absolute;width:80%;height:50%;"></div>

<script type="text/javascript">

var funcLayer = new L.TileLayer.Functional(function (view) {
var deferred = $.Deferred();
var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{y}/{x}.jpg'
var url = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
.replace('{z}', view.zoom)
.replace('{x}', view.tile.row)
.replace('{y}', view.tile.column)
.replace('{y}', view.tile.row)
.replace('{x}', view.tile.column)
.replace('{s}', view.subdomain);

setTimeout(function() {
deferred.resolve(url);
}, randomIntFromInterval(1000, 3000));

return deferred.promise();
}, {
subdomains: '1234'
subdomains: 'abc'
});

var map = new L.Map('map', { center: new L.LatLng(42.3584308, -71.0597732), zoom: 15, layers: [funcLayer] });
Expand All @@ -44,4 +44,4 @@

</script>
</body>
</html>
</html>
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
{
"name": "leaflet.functionaltilelayer",
"version": "0.7.0",
"version": "1.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"
Expand Down
26 changes: 19 additions & 7 deletions src/leaflet.functionaltilelayer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
};
};