Skip to content

Commit 14ec222

Browse files
mevdscheemevdschee
committed
support GeoJSON tiles
1 parent b08f633 commit 14ec222

File tree

4 files changed

+132
-133
lines changed

4 files changed

+132
-133
lines changed

‎examples/clients/leaflet/GeoJSONGridLayer.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,35 @@
22
* Leaflet.GeoJSONGridLayer
33
*/
44

5+
6+
/*
7+
function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }
8+
function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }
9+
10+
Inverse process:
11+
12+
function tile2long(x,z) {
13+
return (x/Math.pow(2,z)*360-180);
14+
}
15+
function tile2lat(y,z) {
16+
var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
17+
return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
18+
}
19+
20+
Example for calculating number of tiles within given extent and zoom-level:
21+
22+
var zoom = 9;
23+
var top_tile = lat2tile(north_edge, zoom); // eg.lat2tile(34.422, 9);
24+
var left_tile = lon2tile(west_edge, zoom);
25+
var bottom_tile = lat2tile(south_edge, zoom);
26+
var right_tile = lon2tile(east_edge, zoom);
27+
var width = Math.abs(left_tile - right_tile) + 1;
28+
var height = Math.abs(top_tile - bottom_tile) + 1;
29+
30+
// total tiles
31+
var total_tiles = width * height; // -> eg. 377
32+
*/
33+
534
(function () {
635

736
var console = window.console || {

‎examples/clients/leaflet/geojson-layer.js

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,41 @@
55

66
includes: L.Evented.prototype,
77

8+
url: null,
89
map: null,
910

10-
options: {
11-
},
12-
13-
initialize(extraOptions, options) {
11+
initialize(url, options) {
12+
this.url = url;
1413
L.GeoJSON.prototype.initialize.call(this, [], options);
15-
L.Util.setOptions(this, extraOptions);
1614
},
1715

18-
_reload: function() {
16+
reloadMap: function() {
1917
if (this.map) {
20-
var url = this._expand(this.options.url);
21-
this._ajax('GET', url, false, this._update.bind(this));
18+
var url = this.expandUrl(this.url);
19+
this.ajaxRequest('GET', url, false, this.updateLayers.bind(this));
2220
}
2321
},
2422

25-
_update: function(geoData) {
23+
updateLayers: function(geoData) {
2624
this.clearLayers();
2725
this.addData(geoData);
2826
},
2927

30-
onAdd: function(map) {
28+
onAdd(map) {
3129
L.GeoJSON.prototype.onAdd.call(this, map);
3230
this.map = map;
33-
map.on('moveend zoomend refresh', this._reload, this);
34-
this._reload();
31+
map.on('moveend zoomend refresh', this.reloadMap, this);
32+
this.reloadMap();
3533
},
3634

37-
onRemove: function(map) {
38-
map.off('moveend zoomend refresh', this._reload, this);
35+
onRemove(map) {
36+
map.off('moveend zoomend refresh', this.reloadMap, this);
3937
this.map = null;
4038
L.GeoJSON.prototype.onRemove.call(this, map);
4139
},
4240

43-
_expand: function(template) {
44-
var bbox = this._map.getBounds();
41+
expandUrl: function(template) {
42+
var bbox = this.map.getBounds();
4543
var southWest = bbox.getSouthWest();
4644
var northEast = bbox.getNorthEast();
4745
var bboxStr = bbox.toBBoxString();
@@ -55,7 +53,7 @@
5553
return L.Util.template(template, coords);
5654
},
5755

58-
_ajax: function(method, url, data, callback) {
56+
ajaxRequest: function(method, url, data, callback) {
5957
var request = new XMLHttpRequest();
6058
request.open(method, url, true);
6159
request.onreadystatechange = function() {
@@ -74,8 +72,8 @@
7472

7573
});
7674

77-
L.geoJSONLayer = function (options) {
78-
return new L.GeoJSONLayer(options);
75+
L.geoJSONLayer = function (url, options) {
76+
return new L.GeoJSONLayer(url, options);
7977
};
8078

8179
})();

‎examples/clients/leaflet/geojson-tile-layer.js

Lines changed: 81 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,86 @@
11
/* global L */
22
(function() {
33

4-
L.GeoJSONTileLayer = L.GeoJSON.extend({
5-
6-
includes: L.Evented.prototype,
7-
8-
map: null,
9-
10-
options: {
11-
},
12-
13-
initialize(extraOptions, options) {
14-
L.GeoJSON.prototype.initialize.call(this, [], options);
15-
L.Util.setOptions(this, extraOptions);
16-
},
17-
18-
19-
/*
20-
function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }
21-
function lat2tile(lat,zoom) { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,zoom))); }
22-
23-
Inverse process:
24-
25-
function tile2long(x,z) {
26-
return (x/Math.pow(2,z)*360-180);
27-
}
28-
function tile2lat(y,z) {
29-
var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
30-
return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
31-
}
32-
33-
Example for calculating number of tiles within given extent and zoom-level:
34-
35-
var zoom = 9;
36-
var top_tile = lat2tile(north_edge, zoom); // eg.lat2tile(34.422, 9);
37-
var left_tile = lon2tile(west_edge, zoom);
38-
var bottom_tile = lat2tile(south_edge, zoom);
39-
var right_tile = lon2tile(east_edge, zoom);
40-
var width = Math.abs(left_tile - right_tile) + 1;
41-
var height = Math.abs(top_tile - bottom_tile) + 1;
42-
43-
// total tiles
44-
var total_tiles = width * height; // -> eg. 377
45-
*/
46-
47-
_reload: function() {
48-
if (this.map) {
49-
var urls = this._expand(this.options.url);
50-
for (var i=0; i<urls.length; i++) {
51-
this._ajax('GET', urls[i], false, this._update.bind(this));
52-
}
53-
}
54-
},
55-
56-
57-
58-
_update: function(geoData) {
59-
this.clearLayers();
60-
this.addData(geoData);
61-
},
62-
63-
onAdd: function(map) {
64-
L.GeoJSON.prototype.onAdd.call(this, map);
65-
this.map = map;
66-
map.on('moveend zoomend refresh', this._reload, this);
67-
this._reload();
68-
},
69-
70-
onRemove: function(map) {
71-
map.off('moveend zoomend refresh', this._reload, this);
72-
this.map = null;
73-
L.GeoJSON.prototype.onRemove.call(this, map);
74-
},
75-
76-
_expand: function(template) {
77-
var bbox = this._map.getBounds();
78-
var southWest = bbox.getSouthWest();
79-
var northEast = bbox.getNorthEast();
80-
var bboxStr = bbox.toBBoxString();
81-
var coords = {
82-
lat1: southWest.lat,
83-
lon1: southWest.lng,
84-
lat2: northEast.lat,
85-
lon2: northEast.lng,
86-
bbox: bboxStr
87-
};
88-
return [L.Util.template(template, coords)];
89-
},
90-
91-
_ajax: function(method, url, data, callback) {
92-
var request = new XMLHttpRequest();
93-
request.open(method, url, true);
94-
request.onreadystatechange = function() {
95-
if (request.readyState === 4 && request.status === 200) {
96-
callback(JSON.parse(request.responseText));
97-
}
98-
};
99-
if (data) {
100-
request.setRequestHeader('Content-type', 'application/json');
101-
request.send(JSON.stringify(data));
102-
} else {
103-
request.send();
104-
}
105-
return request;
106-
},
107-
108-
});
109-
110-
L.geoJSONTileLayer = function (options) {
111-
return new L.GeoJSONTileLayer(options);
112-
};
4+
L.GeoJSONTileLayer = L.GridLayer.extend({
5+
6+
includes: L.Evented.prototype,
7+
8+
url: null,
9+
layer: null,
10+
features: null,
11+
12+
initialize(url, options) {
13+
this.url = url;
14+
this.layer = new L.GeoJSON(null, options);
15+
this.features = {};
16+
L.GridLayer.prototype.initialize.call(this, options);
17+
},
18+
19+
createTile: function (coords) {
20+
var tile = L.DomUtil.create('div', 'leaflet-tile');
21+
var url = L.Util.template(this.url, coords);
22+
this.ajaxRequest('GET', url, false, this.updateLayers.bind(this));
23+
return tile;
24+
},
25+
26+
ajaxRequest: function(method, url, data, callback) {
27+
var request = new XMLHttpRequest();
28+
request.open(method, url, true);
29+
request.onreadystatechange = function() {
30+
if (request.readyState === 4 && request.status === 200) {
31+
callback(JSON.parse(request.responseText));
32+
}
33+
};
34+
if (data) {
35+
request.setRequestHeader('Content-type', 'application/json');
36+
request.send(JSON.stringify(data));
37+
} else {
38+
request.send();
39+
}
40+
return request;
41+
},
42+
43+
updateLayers: function(geoData) {
44+
this.layer.clearLayers();
45+
this.layer.addData(geoData);
46+
},
47+
48+
onAdd(map) {
49+
L.GridLayer.prototype.onAdd.call(this, map);
50+
map.addLayer(this.layer);
51+
this.map = map;
52+
//map.on('moveend zoomend refresh', this.reloadMap, this);
53+
//this.reloadMap();
54+
},
55+
56+
onRemove(map) {
57+
//map.off('moveend zoomend refresh', this.reloadMap, this);
58+
this.map = null;
59+
map.removeLayer(this.layer)
60+
L.GridLayer.prototype.onRemove.call(this, map);
61+
},
62+
63+
ajaxRequest: function(method, url, data, callback) {
64+
var request = new XMLHttpRequest();
65+
request.open(method, url, true);
66+
request.onreadystatechange = function() {
67+
if (request.readyState === 4 && request.status === 200) {
68+
callback(JSON.parse(request.responseText));
69+
}
70+
};
71+
if (data) {
72+
request.setRequestHeader('Content-type', 'application/json');
73+
request.send(JSON.stringify(data));
74+
} else {
75+
request.send();
76+
}
77+
return request;
78+
},
79+
80+
});
81+
82+
L.geoJSONTileLayer = function (options) {
83+
return new L.GeoJSONTileLayer(options);
84+
};
11385

11486
}).call(this);

‎examples/clients/leaflet/vanilla.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@
1919
<script>
2020
var mymap = L.map('mapid').setView([20, 30], 3);
2121

22-
L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
23-
maxZoom: 18,
24-
}).addTo(mymap);
22+
//L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
23+
// maxZoom: 18,
24+
//}).addTo(mymap);
2525

26-
//L.geoJSONLayer({
27-
// url: "http://localhost:8000/api.php/geojson/countries/1,2?bbox={bbox}",
26+
//L.geoJSONLayer('http://localhost:8000/api.php/geojson/countries/1,2?bbox={bbox}', {
27+
// maxZoom: 18,
2828
//}).addTo(mymap);
2929

3030
L.geoJSONTileLayer('http://localhost:8000/api.php/geojson/countries/1,2?tile={z},{y},{x}', {

0 commit comments

Comments
 (0)