From 71b866947f85c74c2f6ff904a37ae025170e6cb2 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Fri, 17 Apr 2020 00:01:28 +0100
Subject: [PATCH] read and set features in custom tileLoadFunction

---
 examples/geojson-vt.js | 50 ++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/examples/geojson-vt.js b/examples/geojson-vt.js
index d821570ddd..e9cac835d0 100644
--- a/examples/geojson-vt.js
+++ b/examples/geojson-vt.js
@@ -72,37 +72,35 @@ fetch(url)
       extent: 4096,
       debug: 1,
     });
-    const vectorSource = new VectorTileSource({
-      format: new GeoJSON({
-        // Data returned from geojson-vt is in tile pixel units
-        dataProjection: new Projection({
-          code: 'TILE_PIXELS',
-          units: 'tile-pixels',
-          extent: [0, 0, 4096, 4096],
-        }),
+    const format = new GeoJSON({
+      // Data returned from geojson-vt is in tile pixel units
+      dataProjection: new Projection({
+        code: 'TILE_PIXELS',
+        units: 'tile-pixels',
+        extent: [0, 0, 4096, 4096],
       }),
+    });
+    const vectorSource = new VectorTileSource({
       tileUrlFunction: function (tileCoord) {
         // Use the tile coordinate as a pseudo URL for caching purposes
         return JSON.stringify(tileCoord);
       },
-    });
-    // For tile loading obtain the GeoJSON for the tile coordinate
-    // before calling the default tileLoadFunction
-    const defaultTileLoadFunction = vectorSource.getTileLoadFunction();
-    vectorSource.setTileLoadFunction(function (tile, url) {
-      const tileCoord = JSON.parse(url);
-      const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
-      const geojson = JSON.stringify(
-        {
-          type: 'FeatureCollection',
-          features: data ? data.features : [],
-        },
-        replacer
-      );
-      defaultTileLoadFunction(
-        tile,
-        'data:application/json;charset=UTF-8,' + geojson
-      );
+      tileLoadFunction: function (tile, url) {
+        const tileCoord = JSON.parse(url);
+        const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
+        const geojson = JSON.stringify(
+          {
+            type: 'FeatureCollection',
+            features: data ? data.features : [],
+          },
+          replacer
+        );
+        const features = format.readFeatures(geojson, {
+          extent: vectorSource.getTileGrid().getTileCoordExtent(tileCoord),
+          featureProjection: map.getView().getProjection()
+        });
+        tile.setFeatures(features);
+      },
     });
     const vectorLayer = new VectorTileLayer({
       source: vectorSource,