support tiles in GeoJSON

Author: mevdschee

examples/clients/leaflet/geojson-layer.js

@@ -3,79 +3,79 @@
 
     L.GeoJSONLayer = L.GeoJSON.extend({
 
-    includes: L.Evented.prototype,
+        includes: L.Evented.prototype,
 
-    map: null,
+        map: null,
 
-    options: {
-    },
+        options: {
+        },
 
-    initialize(extraOptions, options) {
-        L.GeoJSON.prototype.initialize.call(this, [], options);
-        L.Util.setOptions(this, extraOptions);
-    },
+        initialize(extraOptions, options) {
+            L.GeoJSON.prototype.initialize.call(this, [], options);
+            L.Util.setOptions(this, extraOptions);
+        },
 
-    _reload: function() {
-        if (this.map) {
-            var url = this._expand(this.options.url);
-            this._ajax('GET', url, false, this._update.bind(this));
-        }
-    },
+        _reload: function() {
+            if (this.map) {
+                var url = this._expand(this.options.url);
+                this._ajax('GET', url, false, this._update.bind(this));
+            }
+        },
 
-    _update: function(geoData) {
-        this.clearLayers();
-        this.addData(geoData);
-    },
+        _update: function(geoData) {
+            this.clearLayers();
+            this.addData(geoData);
+        },
 
-    onAdd: function(map) {
-        L.GeoJSON.prototype.onAdd.call(this, map); 
-        this.map = map;
-        map.on('moveend zoomend refresh', this._reload, this);
-        this._reload();
-    },
+        onAdd: function(map) {
+            L.GeoJSON.prototype.onAdd.call(this, map); 
+            this.map = map;
+            map.on('moveend zoomend refresh', this._reload, this);
+            this._reload();
+        },
 
-    onRemove: function(map) {
-        map.off('moveend zoomend refresh', this._reload, this);
-        this.map = null;
-        L.GeoJSON.prototype.onRemove.call(this, map);
-	},
+        onRemove: function(map) {
+            map.off('moveend zoomend refresh', this._reload, this);
+            this.map = null;
+            L.GeoJSON.prototype.onRemove.call(this, map);
+        },
 
-    _expand: function(template) {
-        var bbox = this._map.getBounds();
-        var southWest = bbox.getSouthWest();
-        var northEast = bbox.getNorthEast();
-        var bboxStr = bbox.toBBoxString();
-        var coords = { 
-            lat1: southWest.lat,
-            lon1: southWest.lng,
-            lat2: northEast.lat,
-            lon2: northEast.lng,
-            bbox: bboxStr
-        };
-        return L.Util.template(template, coords);
-    },
+        _expand: function(template) {
+            var bbox = this._map.getBounds();
+            var southWest = bbox.getSouthWest();
+            var northEast = bbox.getNorthEast();
+            var bboxStr = bbox.toBBoxString();
+            var coords = { 
+                lat1: southWest.lat,
+                lon1: southWest.lng,
+                lat2: northEast.lat,
+                lon2: northEast.lng,
+                bbox: bboxStr
+            };
+            return L.Util.template(template, coords);
+        },
 
-    _ajax: 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;
-    },
+        _ajax: 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;
+        },
 
-});
+    });
 
-L.geoJSONLayer = function (options) {
-    return new L.GeoJSONLayer(options);
-};
+    L.geoJSONLayer = function (options) {
+        return new L.GeoJSONLayer(options);
+    };
 
-}).call(this);
+})();

examples/clients/leaflet/vanilla.html

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 	<script src="geojson-layer.js"></script>
-	<!--<script src="vector-tile-layer.js"></script>-->
+	<script src="geojson-tile-layer.js"></script>
 </head>
 <body>
 
@@ -23,13 +23,13 @@
 	 	maxZoom: 18,
 	}).addTo(mymap);
 
-	L.geoJSONLayer({
-		url: "http://localhost:8000/api.php/geojson/countries/1,2?bbox={bbox}",
-	}).addTo(mymap);
+	//L.geoJSONLayer({
+	//	url: "http://localhost:8000/api.php/geojson/countries/1,2?bbox={bbox}",
+	//}).addTo(mymap);
 
-	// L.vectorTileLayer('http://localhost:8000/api.php/geojson/countries/1,2?tile={z},{y},{x}', {
-	// 	maxZoom: 18,
-	// }).addTo(mymap);
+	L.geoJSONTileLayer('http://localhost:8000/api.php/geojson/countries/1,2?tile={z},{y},{x}', {
+		maxZoom: 18,
+	}).addTo(mymap);
 </script>
 
 </body>