How to use geojson-vt - 9 common examples

init(map: mapboxgl.Map, gl: WebGLRenderingContext) {
    this.tileIndex = geojsonvt(this.geoJSON, {
      maxZoom: 24,
      tolerance: 30,
      extent: 8192
    });

    const { vs, fs } = getModule('line-vt');
    const reglDrawConfig: _regl.DrawConfig = {
      frag: fs,
      vert: vs,
      attributes: {
        'a_color': {
          constant: this.pointColor
        },
        // @ts-ignore
        'a_pos': this.regl.prop('a_pos'),
        // @ts-ignore

export function createRegionProviderFromGeoJson(terria, regionProviderList, geoJson, property, rpType=undefined) {
    let fid = 0;
    geoJson.features.forEach(f => f.properties['FID'] = fid++);
    const tileIndex = geojsonvt(geoJson);
    const rp = new RegionProvider(rpType || `geojson_${geoJsonCounter++}_${property}`, {
        nameProp: property,
        regionProp: property,
        layerName: '', // Matches expected layerName in MapboxVectorTtileImageryProvider
        server: tileIndex,
        serverType: 'MVT',
        serverMaxZoom: 24,
        aliases: []
    });
    processRegionIds(rp, geoJson.features.map(f => f.properties[property]), undefined, 'serverReplacements');
    regionProviderList.regionProviders.push(rp);
    return rp;
}

onmessage = function (e) {
	if (e.data[0] === 'slice') {
		// Given a blob of GeoJSON and some topojson/geojson-vt options, do the slicing.
		var geojson = e.data[1];
		options     = e.data[2];

		if (geojson.type && geojson.type === 'Topology') {
			for (var layerName in geojson.objects) {
				slicers[layerName] = geojsonvt(
					topojson.feature(geojson, geojson.objects[layerName])
				, options);
			}
		} else {
			slicers[options.vectorTileLayerName] = geojsonvt(geojson, options);
		}

	} else if (e.data[0] === 'get') {
		// Gets the vector tile for the given coordinates, sends it back as a message
		var coords = e.data[1];

		var tileLayers = {};
		for (var layerName in slicers) {
			var slicedTileLayer = slicers[layerName].getTile(coords.z, coords.x, coords.y);

			if (slicedTileLayer) {

this.http.get('assets/countries-110m.json').subscribe(result => {

      // Convert GeoJSON source to vector tiles
      const tileSource = geojsonvt(result, {
        extent: 4096,
        debug: 0
      });

      // A layer to hold the world map
      const countryOutlineLayer = new VectorTileLayer({
        source: new VectorTileSource({
          format: new GeoJSON(),
          wrapX: false,
          tileLoadFunction: function(tile: VectorTile) {
            const format = tile.getFormat();
            const tileCoord = tile.getTileCoord();
            // Grab the desired tile from the geojsonvt vector tile source
            const data = tileSource.getTile(tileCoord[0], tileCoord[1], -tileCoord[2] - 1);
            // Convert it to GeoGSON
            const features = format.readFeatures({

onmessage = function (e) {
	if (e.data[0] === 'slice') {
		// Given a blob of GeoJSON and some topojson/geojson-vt options, do the slicing.
		var geojson = e.data[1];
		options     = e.data[2];

		if (geojson.type && geojson.type === 'Topology') {
			for (var layerName in geojson.objects) {
				slicers[layerName] = geojsonvt(
					topojson.feature(geojson, geojson.objects[layerName])
				, options);
			}
		} else {
			slicers[options.vectorTileLayerName] = geojsonvt(geojson, options);
		}

	} else if (e.data[0] === 'get') {
		// Gets the vector tile for the given coordinates, sends it back as a message
		var coords = e.data[1];

		var tileLayers = {};
		for (var layerName in slicers) {
			var slicedTileLayer = slicers[layerName].getTile(coords.z, coords.x, coords.y);

			if (slicedTileLayer) {
				var vectorTileLayer = {
					features: [],
					extent: options.extent,
					name: options.vectorTileLayerName,
					length: slicedTileLayer.features.length

this.load_data = super._load({ source_data: { layers: {} } }).then(data => {
                // Warn and continue on data source error
                if (data.source_data.error) {
                    log('warn', `data source load error(s) for source '${this.name}', URL '${this.url}': ${data.source_data.error}`);
                }

                let layers = data.source_data.layers;
                for (let layer_name in layers) {
                    this.tile_indexes[layer_name] = geojsonvt(layers[layer_name], {
                        maxZoom: this.max_zoom,  // max zoom to preserve detail on
                        tolerance: 1.5, // simplification tolerance (higher means simpler) NB: half the default to accomodate 512px tiles
                        extent: Geo.tile_scale, // tile extent (both width and height)
                        buffer: 0.0001     // tile buffer on each side
                    });
                }

                this.loaded = true;
                return data;
            });
        }

export default async function loadData({ url, type, isCluster }: LoadDataMessage) {
  // need to fetch url
  const ret = await fetch(url);
  if (type === 'json' || type === 'geojson') {
    if (!isCluster) {
      return geojsonvt(await ret.json(), {
        maxZoom: 24,
        tolerance: 30,
        extent: 8192
      });
    }
    // TODO: use @mapbox/supercluster
  } else if (type === 'csv') {
    // const data = await ret.text();
  }
  // TODO: type === 'image'
}

this.loadGeoJSON(params, (err: ?Error, data: ?Object) => {
            if (err || !data) {
                return callback(err);
            } else if (typeof data !== 'object') {
                return callback(new Error(`Input data given to '${params.source}' is not a valid GeoJSON object.`));
            } else {
                rewind(data, true);

                try {
                    this._geoJSONIndex = params.cluster ?
                        new Supercluster(getSuperclusterOptions(params)).load(data.features) :
                        geojsonvt(data, params.geojsonVtOptions);
                } catch (err) {
                    return callback(err);
                }

                this.loaded = {};

                const result = {};
                if (perf) {
                    const resourceTimingData = perf.finish();
                    // it's necessary to eval the result of getEntriesByName() here via parse/stringify
                    // late evaluation in the main thread causes TypeError: illegal invocation
                    if (resourceTimingData) {
                        result.resourceTiming = {};
                        result.resourceTiming[params.source] = JSON.parse(JSON.stringify(resourceTimingData));
                    }
                }

/*
 * Copyright (C) 2017-2019 HERE Europe B.V.
 * Licensed under Apache 2.0, see full license in LICENSE
 * SPDX-License-Identifier: Apache-2.0
 */

import { GeoJson, ITiler } from "@here/harp-datasource-protocol";
import { TileKey } from "@here/harp-geoutils";

// tslint:disable-next-line:no-var-requires
const geojsonvtExport = require("geojson-vt");
// to be able to run tests on nodejs
const geojsonvt = geojsonvtExport.default || geojsonvtExport;

interface GeoJsonVtIndex {
    geojson: GeoJson;
    getTile(level: number, column: number, row: number): any;
}

export class GeoJsonTiler implements ITiler {
    indexes: Map;

    constructor() {
        this.indexes = new Map();
    }

    dispose() {
        /* */
    }