support tiles in GeoJSON

examples/clients/leaflet/GeoJSONGridLayer.js

@@ -1,196 +0,0 @@
-/*
- * Leaflet.GeoJSONGridLayer 
- */
-
-
-/*
- function long2tile(lon,zoom) { return (Math.floor((lon+180)/360*Math.pow(2,zoom))); }
- 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))); }
-
-Inverse process:
-
- function tile2long(x,z) {
-  return (x/Math.pow(2,z)*360-180);
- }
- function tile2lat(y,z) {
-  var n=Math.PI-2*Math.PI*y/Math.pow(2,z);
-  return (180/Math.PI*Math.atan(0.5*(Math.exp(n)-Math.exp(-n))));
- }
-
-Example for calculating number of tiles within given extent and zoom-level:
-
-var zoom        = 9;
-var top_tile    = lat2tile(north_edge, zoom); // eg.lat2tile(34.422, 9);
-var left_tile   = lon2tile(west_edge, zoom);
-var bottom_tile = lat2tile(south_edge, zoom);
-var right_tile  = lon2tile(east_edge, zoom);
-var width       = Math.abs(left_tile - right_tile) + 1;
-var height      = Math.abs(top_tile - bottom_tile) + 1;
-
-// total tiles
-var total_tiles = width * height; // -> eg. 377
-*/
-
-(function () {
-
-    var console = window.console || {
-        error: function () {},
-        warn: function () {}
-    };
-
-    function defineLeafletGeoJSONGridLayer(L) {
-        L.GeoJSONGridLayer = L.GridLayer.extend({
-            initialize: function (url, options) {
-                L.GridLayer.prototype.initialize.call(this, options);
-
-                this._url = url;
-                this._geojsons = {};
-                this._features = {};
-                this.geoJsonClass = (this.options.geoJsonClass ? this.options.geoJsonClass : L.GeoJSON);
-            },
-
-            onAdd: function (map) {
-                var layers = this._geojsons;
-                Object.keys(layers).forEach(function (key) {
-                    map.addLayer(layers[key]);
-                });
-
-                L.GridLayer.prototype.onAdd.call(this, map);
-                this.zoomanimHandler = this._handleZoom.bind(this);
-                map.on('zoomanim', this.zoomanimHandler);
-            },
-
-            onRemove: function (map) {
-                var layers = this._geojsons;
-                Object.keys(layers).forEach(function (key) {
-                    map.removeLayer(layers[key]);
-                });
-
-                L.GridLayer.prototype.onRemove.call(this, map);
-                map.off('zoomanim', this.zoomanimHandler);
-            },
-
-            _handleZoom: function (e) {
-                this.checkZoomConditions(e.zoom);
-            },
-
-            createTile: function (coords, done) {
-                var tile = L.DomUtil.create('div', 'leaflet-tile');
-                var size = this.getTileSize();
-                tile.width = size.x;
-                tile.height = size.y;
-
-                this.fetchTile(coords, function (error) {
-                    done(error, tile);
-                });
-                return tile;
-            },
-
-            fetchTile: function (coords, done) {
-                var tileUrl = L.Util.template(this._url, coords);
-                var tileLayer = this;
-
-                var request = new XMLHttpRequest();
-                request.open('GET', tileUrl, true);
-
-                request.onload = function () {
-                    if (request.status >= 200 && request.status < 400) {
-                        var data = JSON.parse(request.responseText);
-                        tileLayer.addData(data);
-                        done(null);
-                    } else {
-                        // We reached our target server, but it returned an error
-                        done(request.statusText);
-                    }
-                };
-
-                request.onerror = function () {
-                    done(request.statusText);
-                };
-
-                request.send();
-            },
-
-            getLayers: function () {
-                var geojsons = this._geojsons,
-                    layers = [];
-                Object.keys(geojsons).forEach(function (key) {
-                    layers.push(geojsons[key]);
-                });
-                return layers;
-            },
-
-            hasLayerWithId: function (sublayer, id) {
-                if (!this._geojsons[sublayer] || !this._features[sublayer]) return false;
-                return this._features[sublayer].hasOwnProperty(id);
-            },
-
-            addData: function (data) {
-                if (data.type === 'FeatureCollection') {
-                    this.addSubLayerData('default', data);
-                }
-                else {
-                    var tileLayer = this;
-                    Object.keys(data).forEach(function (key) {
-                        tileLayer.addSubLayerData(key, data[key]);
-                    });
-                }
-            },
-
-            addSubLayerData: function (sublayer, data) {
-                if (!this._geojsons[sublayer]) {
-                    this._geojsons[sublayer] = new this.geoJsonClass(null, this.options.layers[sublayer]).addTo(this._map);
-                    this.checkZoomConditions(this._map.getZoom());
-                }
-                var toAdd = data.features.filter(function (feature) {
-                    return !this.hasLayerWithId(sublayer, feature.id ? feature.id : feature.properties.id);
-                }, this);
-
-                if (!this._features[sublayer]) {
-                    this._features[sublayer] = {};
-                }
-                toAdd.forEach(function (feature) {
-                    var id = feature.id ? feature.id : feature.properties.id;
-                    this._features[sublayer][id] = feature;
-                }, this);
-
-                this._geojsons[sublayer].addData({
-                    type: 'FeatureCollection',
-                    features: toAdd
-                });
-            },
-
-            checkZoomConditions: function (zoom) {
-                var layers = this._geojsons,
-                    map = this._map;
-                Object.keys(layers).forEach(function (key) {
-                    var layer = layers[key],
-                        options = layer.options;
-                    if ((options.maxZoom && zoom > options.maxZoom) ||
-                        (options.minZoom && zoom < options.minZoom)) {
-                        map.removeLayer(layer);
-                    }
-                    else {
-                        map.addLayer(layer);
-                    }
-                });
-            }
-        });
-
-        L.geoJsonGridLayer = function(url, options) {
-            return new L.GeoJSONGridLayer(url, options);
-        };
-    }
-
-    if (typeof define === 'function' && define.amd) {
-        // Try to add leaflet.loading to Leaflet using AMD
-        define(['leaflet'], function (L) {
-            defineLeafletGeoJSONGridLayer(L);
-        });
-    }
-    else {
-        // Else use the global L
-        defineLeafletGeoJSONGridLayer(L);
-    }
-
-})();

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

@@ -18,43 +18,31 @@
 
         createTile: function (coords) {
             var tile = L.DomUtil.create('div', 'leaflet-tile');
+            tile.style['box-shadow'] = 'inset 0 0 2px #f00';
             var url = L.Util.template(this.url, coords);
             this.ajaxRequest('GET', url, false, this.updateLayers.bind(this));
             return tile;
         },
 
-        ajaxRequest: function(method, url, data, callback) {
-            var request = new XMLHttpRequest();
-            request.open(method, url, true);
-            request.onreadystatechange = function() {
-                if (request.readyState === 4 && request.status === 200) {
-                    callback(JSON.parse(request.responseText));
-                }
-            };
-            if (data) {
-                request.setRequestHeader('Content-type', 'application/json');
-                request.send(JSON.stringify(data));
-            } else {
-                request.send();
-            }		
-            return request;
-        },
-
         updateLayers: function(geoData) {
-            this.layer.clearLayers();
-            this.layer.addData(geoData);
+            if (geoData.type == 'FeatureCollection'){
+                for (var i=0;i<geoData.features.length;i++) {
+                    var id = geoData.features[i].id;
+                    if (!this.features[id]) {
+                        this.layer.addData(geoData.features[i]);
+                        this.features[id] = true;
+                    }
+                }
+            }            
         },
 
         onAdd(map) {
             L.GridLayer.prototype.onAdd.call(this, map); 
             map.addLayer(this.layer);
             this.map = map;
-            //map.on('moveend zoomend refresh', this.reloadMap, this);
-            //this.reloadMap();
         },
 
         onRemove(map) {
-            //map.off('moveend zoomend refresh', this.reloadMap, this);
             this.map = null;
             map.removeLayer(this.layer)
             L.GridLayer.prototype.onRemove.call(this, map);
@@ -79,8 +67,8 @@
 
     });
 
-    L.geoJSONTileLayer = function (options) {
-        return new L.GeoJSONTileLayer(options);
+    L.geoJSONTileLayer = function (url, options) {
+        return new L.GeoJSONTileLayer(url, options);
     };
 
 }).call(this);

examples/clients/leaflet/vanilla.html

@@ -12,6 +12,7 @@
     <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
 	<script src="geojson-layer.js"></script>
 	<script src="geojson-tile-layer.js"></script>
+	<!--<script src="geojson-tile-layer.js"></script>-->
 </head>
 <body>
 
@@ -19,15 +20,15 @@
 <script>
 	var mymap = L.map('mapid').setView([20, 30], 3);
 
-	//L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
-	// 	maxZoom: 18,
-	//}).addTo(mymap);
+	L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+		maxZoom: 18,
+	}).addTo(mymap);
 
-	//L.geoJSONLayer('http://localhost:8000/api.php/geojson/countries/1,2?bbox={bbox}', {
-	// 	maxZoom: 18,
-	//}).addTo(mymap);
+	L.geoJSONLayer('http://localhost:8000/api.php/geojson/users?bbox={bbox}', {
+		maxZoom: 18,
+	}).addTo(mymap);
 
-	L.geoJSONTileLayer('http://localhost:8000/api.php/geojson/countries/1,2?tile={z},{y},{x}', {
+	L.geoJSONTileLayer('http://localhost:8000/src/geojson/countries?filter=id,lt,3&tile={z},{x},{y}', {
 		maxZoom: 18,
 	}).addTo(mymap);
 </script>