Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Chore]: Technical: Translate geojson-layer #1757

Merged
merged 10 commits into from
Apr 11, 2022
Merged

[Chore]: Technical: Translate geojson-layer #1757

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
31dc997
Renamed js files
HeimEndyd Mar 23, 2022
2c4cc4c
Fixed ts errors
HeimEndyd Mar 23, 2022
9235b65
Declared config for GeoJsonLayer
HeimEndyd Mar 25, 2022
cf9edad
Declared visConfigSettings
HeimEndyd Mar 28, 2022
deb7409
Declared required types
HeimEndyd Mar 31, 2022
e5e4d4a
Merge branch 'master' into ms/js_to_ts_convertion/layers/geojson-layer
HeimEndyd Apr 4, 2022
6634a18
Merge branch 'master' into ms/js_to_ts_convertion/layers/geojson-layer
HeimEndyd Apr 5, 2022
46440a8
Applied suggested changes
HeimEndyd Apr 5, 2022
6f7deb4
Added exports
HeimEndyd Apr 5, 2022
11ceeca
Added LayerRadiusConfig
HeimEndyd Apr 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/layers/base-layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,10 @@ export const colorMaker = generateColor();
class Layer {
id: string;
// TODO: define meta
meta: {};
meta: {
featureTypes?: {polygon: boolean; point: boolean; line: boolean};
fixedRadius?: {};
};
visConfigSettings: {
[key: string]: ValueOf<LayerVisConfigSettings>;
};
Expand Down
2 changes: 1 addition & 1 deletion ...ayers/geojson-layer/geojson-layer-icon.js → ...yers/geojson-layer/geojson-layer-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Base from 'components/common/icons/base';
import Base from '../../components/common/icons/base';

export default class GeojsonLayerIcon extends Component {
static propTypes = {
Expand Down
80 changes: 74 additions & 6 deletions src/layers/geojson-layer/geojson-layer.js → src/layers/geojson-layer/geojson-layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,22 @@
import uniq from 'lodash.uniq';
import {DATA_TYPES} from 'type-analyzer';

import Layer, {colorMaker} from '../base-layer';
import Layer, {colorMaker, LayerBaseConfig, LayerColumn} from '../base-layer';
import {GeoJsonLayer as DeckGLGeoJsonLayer} from '@deck.gl/layers';
import {getGeojsonDataMaps, getGeojsonBounds, getGeojsonFeatureTypes} from './geojson-utils';
import GeojsonLayerIcon from './geojson-layer-icon';
import {GEOJSON_FIELDS, HIGHLIGH_COLOR_3D, CHANNEL_SCALES} from 'constants/default-settings';
import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
import {GEOJSON_FIELDS, HIGHLIGH_COLOR_3D, CHANNEL_SCALES} from '../../constants/default-settings';
import {
LAYER_VIS_CONFIGS,
VisConfigNumber,
VisConfigColorSelect,
VisConfigColorRange,
VisConfigRange,
VisConfigBoolean
} from '../layer-factory';
import {DataContainerInterface} from '../../utils/table-utils/data-container-interface';
import {Merge, RGBColor} from '../../reducers';
import {ColorRange} from '../../constants/color-ranges';

const SUPPORTED_ANALYZER_TYPES = {
[DATA_TYPES.GEOMETRY]: true,
Expand Down Expand Up @@ -60,15 +70,70 @@ export const geojsonVisConfigs = {
wireframe: 'wireframe'
};

export const geoJsonRequiredColumns = ['geojson'];
export const featureAccessor = ({geojson}) => dc => d => dc.valueAt(d.index, geojson.fieldIdx);
export type GeoJsonVisConfigSettings = {
opacity: VisConfigNumber;
strokeOpacity: VisConfigNumber;
thickness: VisConfigNumber;
strokeColor: VisConfigColorSelect;
colorRange: VisConfigColorRange;
strokeColorRange: VisConfigColorRange;
radius: VisConfigNumber;

sizeRange: VisConfigRange;
radiusRange: VisConfigRange;
heightRange: VisConfigRange;
elevationScale: VisConfigNumber;
enableElevationZoomFactor: VisConfigBoolean;
stroked: VisConfigBoolean;
filled: VisConfigBoolean;
enable3d: VisConfigBoolean;
wireframe: VisConfigBoolean;
};

export type GeoJsonLayerColumnsConfig = {
geojson: LayerColumn;
};

export type GeoJsonLayerVisConfig = {
opacity: number;
strokeOpacity: number;
thickness: number;
strokeColor: RGBColor;
colorRange: ColorRange;
strokeColorRange: ColorRange;
radius: number;

sizeRange: [number, number];
radiusRange: [number, number];
heightRange: [number, number];
elevationScale: number;
enableElevationZoomFactor: boolean;
stroked: boolean;
filled: boolean;
enable3d: boolean;
wireframe: boolean;
};

export type GeoJsonLayerConfig = Merge<
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

type GeoJsonLayerVisualChannelConfig = LayerColorConfig & LayerStrokeColorConfig 
LayerSizeConfig & LayerHeightConfig & LayerRadiusConfig

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is meant by LayerRadiusConfig?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can add this to base-layer

export type LayerRadiusConfig = {
  radiusField: VisualChannelField;
  radiusDomain: VisualChannelDomain;
  radiusScale: VisualChannelScale;
};

LayerBaseConfig,
{columns: GeoJsonLayerColumnsConfig; visConfig: GeoJsonLayerVisConfig}
>;

export const geoJsonRequiredColumns: ['geojson'] = ['geojson'];
export const featureAccessor = ({geojson}: GeoJsonLayerColumnsConfig) => (
dc: DataContainerInterface
) => d => dc.valueAt(d.index, geojson.fieldIdx);

// access feature properties from geojson sub layer
export const defaultElevation = 500;
export const defaultLineWidth = 1;
export const defaultRadius = 1;

export default class GeoJsonLayer extends Layer {
declare config: GeoJsonLayerConfig;
declare visConfigSettings: GeoJsonVisConfigSettings;
dataToFeature: {properties?: {radius?: number}}[];
Copy link
Contributor

@heshan0131 heshan0131 Apr 5, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dataToFeature: GeojsonDataMaps See comments in geojson-utils


constructor(props) {
super(props);

Expand All @@ -78,10 +143,13 @@ export default class GeoJsonLayer extends Layer {
}

get type() {
return GeoJsonLayer.type;
}
static get type(): 'geojson' {
return 'geojson';
}

get name() {
get name(): 'Polygon' {
return 'Polygon';
}

Expand Down
2 changes: 1 addition & 1 deletion src/layers/geojson-layer/geojson-utils.js → src/layers/geojson-layer/geojson-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import wktParser from 'wellknown';
import normalize from '@mapbox/geojson-normalize';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please types below to type the functions in this file

import {KeplerTable} from '../../utils';
import {Feature, BBox} from 'geojson';
import {LayerColumns} from '../index';

type GetFeature = (d: any) => Feature;
type GeojsonDataMaps = Array<Feature | null>;

export enum FeatureTypes {
  Point = 'Point',
  MultiPoint = 'MultiPoint',
  LineString = 'LineString',
  MultiLineString = 'MultiLineString',
  Polygon = 'Polygon',
  MultiPolygon = 'MultiPolygon'
}

type FeatureTypeMap = {
  [key in FeatureTypes]: boolean;
};
export function parseGeoJsonRawFeature(rawFeature: unknown): Feature | null;

export function getGeojsonDataMaps(
  allData: KeplerTable['allData'],
  getFeature: GetFeature
): GeojsonDataMaps;

export function getGeojsonBounds(features: Feature[]): BBox | null;

export function getGeojsonFeatureTypes(allFeatures: Feature[]): FeatureTypeMap;

export function parseGeometryFromString(geoString: string): Feature | null;

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

KeplerTable does not contain property allData

import bbox from '@turf/bbox';

import {getSampleData} from 'utils/data-utils';
import {getSampleData} from '../../utils/data-utils';

export function parseGeoJsonRawFeature(rawFeature) {
if (typeof rawFeature === 'object') {
Expand Down