kepler.gl.geoiq/src/deckgl-layers/mvt-geojson-layer/mvt-geojson-layer.js

kepler.gl is a webgl based application to visualize large scale location data in the browser

// Copyright (c) 2023 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import {CompositeLayer, LayerExtension} from '@deck.gl/core';
import {TileLayer as DeckGLTileLayer} from '@deck.gl/geo-layers';
import {GeoJsonLayer} from '@deck.gl/layers';
import Protobuf from 'pbf';
import {VectorTile} from '@mapbox/vector-tile';

// import debounce from 'lodash.debounce';

// function calculateTargetPopulation(range, gender) {}

// const range = ['pop_f_50_54', 'pop_f_55_59', 'pop_f_65_69'];
// inDebounce = 0;

// clearTimeout(inDebounce);
// inDebounce = setTimeout(() => {

//   clearTimeout(inDebounce);
//   inDebounce = 0;
// }, 300);

// function debounce(inner, ms = 0) {
//   let timer = null;
//   let resolves = [];

//   return function(...args) {
//     // Run the function after a certain amount of time
//     clearTimeout(timer);
//     timer = setTimeout(() => {
//       // Get the result of the inner function, then apply it to the resolve function of
//       // each promise that has been created since the last time the inner function was run
//       let result = inner(...args);
//       resolves.forEach(r => r(result));
//       resolves = [];
//     }, ms);

//     return new Promise(r => resolves.push(r));
//   };
// }

function getTileData(host, viewportLoading, range, {x, y, z}) {
  var mapSource =
    // `https://test-viz-geoiq.s3.ap-south-1.amazonaws.com/ind_pop/` +
    // `${z}/${x}/${y}` +
    // `.pbf`;
    // if (viewportLoading === true) {
    //   mapSource = '';
    // }

    `http://13.232.107.248:5010/tiles/` + `${z}/${x}/${y}` + `.mvt`;
  return fetch(mapSource)
    .then(response => response.arrayBuffer())
    .then(buffer => {
      const tile = new VectorTile(new Protobuf(buffer));
      const features = [];
      for (const layerName in tile.layers) {
        const vectorTileLayer = tile.layers[layerName];
        for (let k = 0; k < vectorTileLayer.length; k++) {
          const vectorTileFeature = vectorTileLayer.feature(k);
          const feature = vectorTileFeature.toGeoJSON(x, y, z);
          const total_target_pop = range.reduce((accu, prop) => {
            return accu + feature.properties[prop];
          }, 0);
          feature.properties = {};
          feature.properties.total_target_pop = total_target_pop;
          features.push(feature);
        }
      }
      return features;
    });
}

export default class DeckGLMVTLayer extends CompositeLayer {
  initialiseState() {
    this.state = {
      features: [],
      getFillColor: {filterVals: [0, 630]}
    };
  }

  // inDebounce = 0;

  // componentWillRecieveProps(nextProps) {
  //   console.log('reaching inside componentWillRecieveProps');
  //   if (
  //     !_.isEqual(this.props.mapState, nextProps.mapState) &&
  //     nextProps.layers &&
  //     nextProps.widget.config.bounds
  //   ) {
  //     this.setState({viewportLoading: true});

  //     clearTimeout(this.inDebounce);
  //     this.inDebounce = setTimeout(() => {
  //       this.setState({viewportLoading: false});
  //       this.renderLayers();
  //       clearTimeout(this.inDebounce);
  //       this.inDebounce = 0;
  //     }, 1000);
  //   }
  // }

  renderLayers() {
    const {dataset} = this.props;
    const {viewportLoading} = this.state;
    console.log('viewportLoading inside renderLayers', viewportLoading);
    console.log('state inside renderLayers inside tile layer', this.state);
    console.log('this should contsain componentWillRecieveProps', this);
    const tileLayer = new DeckGLTileLayer({
      visible: false,
      maxCacheSize: null,
      onViewportLoaded: data => {
        if (data.length > 0) {
          const finalData = data.flat();
          this.props.loadEDLinkData(
            {
              type: 'FeatureCollection',
              features: finalData,
              crs: {type: 'name', properties: 'urn:ogc:def:crs:OGC:1.3:CRS84'}
            },
            this.props.url
          );
        }
      },
      getTileData: args =>
        getTileData(dataset, viewportLoading, dataset.populationRange, args)
      // minZoom: 10,
      // renderSubLayers: this.renderSubLayers.bind(this),
      // updateTriggers: this.props.updateTriggers
    });
    var geoJsonData = [];
    if (this.props.dataset.data && this.props.dataset.data.length) {
      geoJsonData = this.props.dataset.data.map(d => d[0]);
    }
    const layerProps = {
      lineWidthScale: this.props.lineWidthScale
    };
    const newGLayer = new GeoJsonLayer({
      // allData: this.state.features,
      ...layerProps,
      data: geoJsonData,
      // parameters: {depthMask: false},
      // extruded: true,
      opacity: this.props.opacity,
      filled: this.props.filled,
      stroked: this.props.stroked,
      lineMiterLimit: 4,
      // getElevation: feature => feature.properties.height || 0,
      getFillColor: mapPropertyToValueColorField(
        this.props.cScale,
        this.props.getEncodedChannelValue,
        this.props.colorField,
        this.props.color
      ),
      getLineColor: mapPropertyToValueLineColor(
        this.props.scScale,
        this.props.getEncodedChannelValue,
        this.props.strokeColorField,
        this.props.strokeColor,
        this.props.color
      ),
      getLineWidth: mapPropertyToValueLineWidth(
        this.props.sScale,
        this.props.getEncodedChannelValue,
        this.props.sizeField
      ),
      updateTriggers: {
        getFillColor: mapPropertyToValueColorField(
          this.props.cScale,
          this.props.getEncodedChannelValue,
          this.props.colorField,
          this.props.color
        ),
        getLineColor: mapPropertyToValueLineColor(
          this.props.scScale,
          this.props.getEncodedChannelValue,
          this.props.strokeColorField,
          this.props.strokeColor,
          this.props.color
        ),
        getLineWidth: mapPropertyToValueLineWidth(
          this.props.sScale,
          this.props.getEncodedChannelValue,
          this.props.sizeField
        )
      },
      // lightSetting: {
      //   ambientRatio: 0.2
      // },
      getPosition: d => d.position,
      pickable: true,
      autoHighlight: true,
      rounded: true,
      onHover: info => console.log('geojson layer hovered', info.object),
      onClick: info => console.log('geojson layer clicked', info.object)
    });
    return [tileLayer, newGLayer];
  }
}

function mapPropertyToValueColorField(
  cScale,
  getEncodedChannelValue,
  colorField,
  color
) {
  return f => {
    return colorField
      ? getEncodedChannelValue(
          cScale,
          f.properties[colorField.name],
          colorField
        )
      : color;
    // }
  };
}

function mapPropertyToValueLineColor(
  scScale,
  getEncodedChannelValue,
  strokeColorField,
  strokeColor,
  color
) {
  return f => {
    return scScale
      ? getEncodedChannelValue(
          scScale,
          f.properties[strokeColorField.name],
          strokeColorField
        )
      : f.properties.lineColor || strokeColor || color;
  };
}

function mapPropertyToValueLineWidth(
  sScale,
  getEncodedChannelValue,
  sizeField
) {
  return f => {
    console.log();
    return sScale
      ? getEncodedChannelValue(sScale, f.properties[sizeField.name], sizeField)
      : 1;
  };
}