geojson-vt integration

Slice GeoJSON into vector tiles on the fly in the browser.

Example of integration with geojson-vt library.

<!DOCTYPE html>
<html>
  <head>
    <title>geojson-vt integration</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://mapbox.github.io/geojson-vt/geojson-vt-dev.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import GeoJSON from 'ol/format/GeoJSON.js';
      import OSM from 'ol/source/OSM.js';
      import VectorTileSource from 'ol/source/VectorTile.js';
      import {Tile as TileLayer, VectorTile as VectorTileLayer} from 'ol/layer.js';
      import Projection from 'ol/proj/Projection.js';


      var replacer = function(key, value) {
        if (value.geometry) {
          var type;
          var rawType = value.type;
          var geometry = value.geometry;

          if (rawType === 1) {
            type = 'MultiPoint';
            if (geometry.length == 1) {
              type = 'Point';
              geometry = geometry[0];
            }
          } else if (rawType === 2) {
            type = 'MultiLineString';
            if (geometry.length == 1) {
              type = 'LineString';
              geometry = geometry[0];
            }
          } else if (rawType === 3) {
            type = 'Polygon';
            if (geometry.length > 1) {
              type = 'MultiPolygon';
              geometry = [geometry];
            }
          }

          return {
            'type': 'Feature',
            'geometry': {
              'type': type,
              'coordinates': geometry
            },
            'properties': value.tags
          };
        } else {
          return value;
        }
      };

      var tilePixels = new Projection({
        code: 'TILE_PIXELS',
        units: 'tile-pixels'
      });

      var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM()
          })
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      });

      var url = 'data/geojson/countries.geojson';
      fetch(url).then(function(response) {
        return response.json();
      }).then(function(json) {
        var tileIndex = geojsonvt(json, {
          extent: 4096,
          debug: 1
        });
        var vectorSource = new VectorTileSource({
          format: new GeoJSON(),
          tileLoadFunction: function(tile) {
            var format = tile.getFormat();
            var tileCoord = tile.getTileCoord();
            var data = tileIndex.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);

            var features = format.readFeatures(
              JSON.stringify({
                type: 'FeatureCollection',
                features: data ? data.features : []
              }, replacer));
            tile.setLoader(function() {
              tile.setFeatures(features);
              tile.setProjection(tilePixels);
            });
          },
          url: 'data:' // arbitrary url, we don't use it in the tileLoadFunction
        });
        var vectorLayer = new VectorTileLayer({
          source: vectorSource
        });
        map.addLayer(vectorLayer);
      });
    </script>
  </body>
</html>