support tiles in GeoJSON

mevdschee · mevdschee · commit 6814e293d962 · 2019-07-04T01:48:18.000+02:00
diff --git a/examples/clients/leaflet/GeoJSONGridLayer.js b/examples/clients/leaflet/GeoJSONGridLayer.js
diff --git a/examples/clients/leaflet/geojson-tile-layer.js b/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);
diff --git a/examples/clients/leaflet/vanilla.html b/examples/clients/leaflet/vanilla.html
@@ -12,22 +12,23 @@
     <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>
 
 <div id="mapid" style="width: 600px; height: 400px;"></div>
 <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>
