@carto/kepler.gl 0.0.47-alpha.custom-markers.3 → 0.0.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.js +1 -10
- package/dist/components/kepler-gl.js +1 -2
- package/dist/components/side-panel/layer-panel/layer-configurator.js +6 -14
- package/dist/constants/default-settings.js +5 -6
- package/dist/layers/base-layer.js +4 -79
- package/dist/layers/layer-factory.js +1 -23
- package/dist/layers/point-layer/point-layer.js +22 -101
- package/dist/localization/en.js +3 -8
- package/dist/utils/layer-utils.js +3 -5
- package/dist/utils/table-utils/kepler-table.js +10 -3
- package/package.json +5 -9
- package/src/components/index.js +0 -1
- package/src/components/kepler-gl.js +0 -1
- package/src/components/side-panel/layer-panel/layer-configurator.js +5 -19
- package/src/constants/default-settings.js +3 -7
- package/src/layers/base-layer.js +1 -62
- package/src/layers/layer-factory.js +0 -22
- package/src/layers/point-layer/point-layer.js +26 -121
- package/src/localization/en.js +2 -7
- package/src/utils/layer-utils.js +2 -4
- package/src/utils/table-utils/kepler-table.js +10 -1
- package/dist/components/side-panel/layer-panel/custom-markers-config-group.js +0 -40
- package/src/components/side-panel/layer-panel/custom-markers-config-group.js +0 -30
|
@@ -36,7 +36,6 @@ import SourceDataSelectorFactory from 'components/side-panel/common/source-data-
|
|
|
36
36
|
import VisConfigSwitchFactory from './vis-config-switch';
|
|
37
37
|
import VisConfigSliderFactory from './vis-config-slider';
|
|
38
38
|
import LayerConfigGroupFactory, {ConfigGroupCollapsibleContent} from './layer-config-group';
|
|
39
|
-
import CustomMarkersConfigGroupFactory from './custom-markers-config-group';
|
|
40
39
|
import TextLabelPanelFactory from './text-label-panel';
|
|
41
40
|
|
|
42
41
|
import {capitalizeFirstLetter} from 'utils/utils';
|
|
@@ -103,8 +102,7 @@ LayerConfiguratorFactory.deps = [
|
|
|
103
102
|
LayerVisibilityByZoomFactory,
|
|
104
103
|
LayerColorSelectorFactory,
|
|
105
104
|
LayerColorRangeSelectorFactory,
|
|
106
|
-
ArcLayerColorSelectorFactory
|
|
107
|
-
CustomMarkersConfigGroupFactory
|
|
105
|
+
ArcLayerColorSelectorFactory
|
|
108
106
|
];
|
|
109
107
|
|
|
110
108
|
export default function LayerConfiguratorFactory(
|
|
@@ -120,8 +118,7 @@ export default function LayerConfiguratorFactory(
|
|
|
120
118
|
LayerVisibilityByZoom,
|
|
121
119
|
LayerColorSelector,
|
|
122
120
|
LayerColorRangeSelector,
|
|
123
|
-
ArcLayerColorSelector
|
|
124
|
-
CustomMarkersConfigGroup
|
|
121
|
+
ArcLayerColorSelector
|
|
125
122
|
) {
|
|
126
123
|
class LayerConfigurator extends Component {
|
|
127
124
|
static propTypes = {
|
|
@@ -202,19 +199,8 @@ export default function LayerConfiguratorFactory(
|
|
|
202
199
|
</LayerConfigGroup>
|
|
203
200
|
) : null}
|
|
204
201
|
|
|
205
|
-
{layer.type === LAYER_TYPES.point ? (
|
|
206
|
-
<CustomMarkersConfigGroup
|
|
207
|
-
layer={layer}
|
|
208
|
-
visConfiguratorProps={visConfiguratorProps}
|
|
209
|
-
layerChannelConfigProps={layerChannelConfigProps}
|
|
210
|
-
/>
|
|
211
|
-
) : null}
|
|
212
|
-
|
|
213
202
|
{/* Radius */}
|
|
214
|
-
<LayerConfigGroup
|
|
215
|
-
label={layer.config.visConfig.customMarkers ? 'layer.size' : 'layer.radius'}
|
|
216
|
-
collapsible
|
|
217
|
-
>
|
|
203
|
+
<LayerConfigGroup label={'layer.radius'} collapsible>
|
|
218
204
|
{!layer.config.sizeField ? (
|
|
219
205
|
<VisConfigSlider
|
|
220
206
|
{...layer.visConfigSettings.radius}
|
|
@@ -239,7 +225,6 @@ export default function LayerConfiguratorFactory(
|
|
|
239
225
|
<VisConfigSwitch
|
|
240
226
|
{...layer.visConfigSettings.fixedRadius}
|
|
241
227
|
{...visConfiguratorProps}
|
|
242
|
-
disabled={layer.config.visConfig.customMarkers}
|
|
243
228
|
/>
|
|
244
229
|
) : null}
|
|
245
230
|
</ConfigGroupCollapsibleContent>
|
|
@@ -1046,6 +1031,7 @@ export function LayerColorSelectorFactory(ColorSelector) {
|
|
|
1046
1031
|
class LayerColorSelector extends Component {
|
|
1047
1032
|
render() {
|
|
1048
1033
|
const {layer, onChange, selectedColor, property = 'color', setColorUI} = this.props;
|
|
1034
|
+
|
|
1049
1035
|
return (
|
|
1050
1036
|
<SidePanelSection>
|
|
1051
1037
|
<PanelLabel>
|
|
@@ -1074,6 +1060,7 @@ export function ArcLayerColorSelectorFactory(ColorSelector) {
|
|
|
1074
1060
|
class ArcLayerColorSelector extends Component {
|
|
1075
1061
|
render() {
|
|
1076
1062
|
const {layer, onChangeConfig, onChangeVisConfig, property = 'color', setColorUI} = this.props;
|
|
1063
|
+
|
|
1077
1064
|
return (
|
|
1078
1065
|
<SidePanelSection>
|
|
1079
1066
|
<PanelLabel>
|
|
@@ -1303,5 +1290,4 @@ export const AggregationTypeSelector = ({layer, channel, onChange}) => {
|
|
|
1303
1290
|
</SidePanelSection>
|
|
1304
1291
|
);
|
|
1305
1292
|
};
|
|
1306
|
-
|
|
1307
1293
|
/* eslint-enable max-params */
|
|
@@ -431,7 +431,6 @@ export const CHANNEL_SCALES = keyMirror({
|
|
|
431
431
|
color: null,
|
|
432
432
|
radius: null,
|
|
433
433
|
size: null,
|
|
434
|
-
customMarker: null,
|
|
435
434
|
colorAggr: null,
|
|
436
435
|
sizeAggr: null
|
|
437
436
|
});
|
|
@@ -506,8 +505,7 @@ export const FIELD_AGGREGATORS = [
|
|
|
506
505
|
export const linearFieldScaleFunctions = {
|
|
507
506
|
[CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
|
|
508
507
|
[CHANNEL_SCALES.radius]: [SCALE_TYPES.sqrt],
|
|
509
|
-
[CHANNEL_SCALES.size]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
|
|
510
|
-
[CHANNEL_SCALES.customMarker]: [SCALE_TYPES.ordinal]
|
|
508
|
+
[CHANNEL_SCALES.size]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
|
|
511
509
|
};
|
|
512
510
|
|
|
513
511
|
export const linearFieldAggrScaleFunctions = {
|
|
@@ -535,8 +533,7 @@ export const linearFieldAggrScaleFunctions = {
|
|
|
535
533
|
export const ordinalFieldScaleFunctions = {
|
|
536
534
|
[CHANNEL_SCALES.color]: [SCALE_TYPES.ordinal],
|
|
537
535
|
[CHANNEL_SCALES.radius]: [SCALE_TYPES.point],
|
|
538
|
-
[CHANNEL_SCALES.size]: [SCALE_TYPES.point]
|
|
539
|
-
[CHANNEL_SCALES.customMarker]: [SCALE_TYPES.ordinal]
|
|
536
|
+
[CHANNEL_SCALES.size]: [SCALE_TYPES.point]
|
|
540
537
|
};
|
|
541
538
|
|
|
542
539
|
export const ordinalFieldAggrScaleFunctions = {
|
|
@@ -557,8 +554,7 @@ export const ordinalFieldAggrScaleFunctions = {
|
|
|
557
554
|
export const notSupportedScaleOpts = {
|
|
558
555
|
[CHANNEL_SCALES.color]: [],
|
|
559
556
|
[CHANNEL_SCALES.radius]: [],
|
|
560
|
-
[CHANNEL_SCALES.size]: []
|
|
561
|
-
[CHANNEL_SCALES.customMarker]: []
|
|
557
|
+
[CHANNEL_SCALES.size]: []
|
|
562
558
|
};
|
|
563
559
|
|
|
564
560
|
export const notSupportAggrOpts = {
|
package/src/layers/base-layer.js
CHANGED
|
@@ -56,7 +56,6 @@ import {getSampleData} from 'utils/table-utils/data-container-utils';
|
|
|
56
56
|
|
|
57
57
|
import {hexToRgb, getColorGroupByName, reverseColorRange} from 'utils/color-utils';
|
|
58
58
|
import {getMaskExtensionProps} from 'utils/layer-utils';
|
|
59
|
-
import {scaleOrdinal} from 'd3-scale';
|
|
60
59
|
|
|
61
60
|
/** @typedef {import('./index').Layer} LayerClass} */
|
|
62
61
|
|
|
@@ -66,10 +65,6 @@ import {scaleOrdinal} from 'd3-scale';
|
|
|
66
65
|
*/
|
|
67
66
|
export const LAYER_ID_LENGTH = 6;
|
|
68
67
|
|
|
69
|
-
// Note, this is is SVG of solid circle encoded as data-uri
|
|
70
|
-
const FALLBACK_ICON =
|
|
71
|
-
'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz4NCjwvc3ZnPg==';
|
|
72
|
-
|
|
73
68
|
const MAX_SAMPLE_SIZE = 5000;
|
|
74
69
|
const defaultDomain = [0, 1];
|
|
75
70
|
const dataFilterExtension = new DataFilterExtension({filterSize: MAX_GPU_FILTERS});
|
|
@@ -813,30 +808,6 @@ class Layer {
|
|
|
813
808
|
return this.getVisChannelScale(colorScale, colorDomain, colorRange.colors.map(hexToRgb));
|
|
814
809
|
}
|
|
815
810
|
|
|
816
|
-
getCustomMarkersScale(range) {
|
|
817
|
-
let unknownValue = FALLBACK_ICON;
|
|
818
|
-
if (!range) {
|
|
819
|
-
return () => unknownValue;
|
|
820
|
-
}
|
|
821
|
-
|
|
822
|
-
const mapping = new Map();
|
|
823
|
-
|
|
824
|
-
for (const {value, markerUrl} of range) {
|
|
825
|
-
if (value === null) {
|
|
826
|
-
unknownValue = markerUrl;
|
|
827
|
-
} else if (markerUrl) {
|
|
828
|
-
mapping.set(value, markerUrl);
|
|
829
|
-
}
|
|
830
|
-
}
|
|
831
|
-
|
|
832
|
-
// @ts-ignore d3 scale
|
|
833
|
-
const scale = scaleOrdinal()
|
|
834
|
-
.domain(Array.from(mapping.keys()))
|
|
835
|
-
.range(Array.from(mapping.values()))
|
|
836
|
-
.unknown(unknownValue);
|
|
837
|
-
return scale;
|
|
838
|
-
}
|
|
839
|
-
|
|
840
811
|
/**
|
|
841
812
|
* Mapping from visual channels to deck.gl accesors
|
|
842
813
|
* @param {Object} param Parameters
|
|
@@ -862,7 +833,7 @@ class Layer {
|
|
|
862
833
|
aggregation
|
|
863
834
|
} = this.visualChannels[channel];
|
|
864
835
|
|
|
865
|
-
const shouldGetScale =
|
|
836
|
+
const shouldGetScale = this.config[field];
|
|
866
837
|
|
|
867
838
|
if (shouldGetScale) {
|
|
868
839
|
const args = [this.config[scale], this.config[domain], this.config.visConfig[range]];
|
|
@@ -875,8 +846,6 @@ class Layer {
|
|
|
875
846
|
const scaleFunction =
|
|
876
847
|
channelScaleType === CHANNEL_SCALES.color
|
|
877
848
|
? this.getColorScale(...args)
|
|
878
|
-
: channelScaleType === CHANNEL_SCALES.customMarker
|
|
879
|
-
? this.getCustomMarkersScale(this.config.visConfig[range])
|
|
880
849
|
: this.getVisChannelScale(...args, isFixed);
|
|
881
850
|
|
|
882
851
|
attributeAccessors[accessor] = d =>
|
|
@@ -1222,12 +1191,6 @@ class Layer {
|
|
|
1222
1191
|
return fixed ? 1 : (this.config[field] ? 1 : radius);
|
|
1223
1192
|
}
|
|
1224
1193
|
|
|
1225
|
-
getMaxMarkerSize() {
|
|
1226
|
-
const {visConfig} = this.config;
|
|
1227
|
-
const {sizeField, radiusRange, radius} = visConfig;
|
|
1228
|
-
return Math.ceil((sizeField ? radiusRange[1] : radius));
|
|
1229
|
-
}
|
|
1230
|
-
|
|
1231
1194
|
getRadiusUnit(fixedRadius) {
|
|
1232
1195
|
const radiusChannel = Object.values(this.visualChannels).find(vc => vc.property === 'radius');
|
|
1233
1196
|
|
|
@@ -1337,30 +1300,6 @@ class Layer {
|
|
|
1337
1300
|
}, []);
|
|
1338
1301
|
}
|
|
1339
1302
|
|
|
1340
|
-
/**
|
|
1341
|
-
* Create deck.gl `IconLayer` "autoPack" mode accessor for custom markers.
|
|
1342
|
-
*
|
|
1343
|
-
* @param {*} customMarkersStatus Record<url, UrlStatus> provided by builder, UrlStatus `ok` means URL is ok and ready to render
|
|
1344
|
-
* @param {*} iconUrlAccessor deck.gl accessor (or value) that resolves to URL of icon for given row
|
|
1345
|
-
* @returns deck.gl accessor that returns UnpackedIcon ready to consume by IconLayer
|
|
1346
|
-
*/
|
|
1347
|
-
getCustomMarkerIconAccessor(customMarkersStatus, iconUrlAccessor) {
|
|
1348
|
-
const maxIconSize = this.getMaxMarkerSize();
|
|
1349
|
-
|
|
1350
|
-
return d => {
|
|
1351
|
-
const wantedUrl =
|
|
1352
|
-
(typeof iconUrlAccessor === 'function') ? iconUrlAccessor(d) : iconUrlAccessor;
|
|
1353
|
-
const url = customMarkersStatus?.[wantedUrl] === 'ok' ? wantedUrl : FALLBACK_ICON;
|
|
1354
|
-
return {
|
|
1355
|
-
id: `${url}@@${maxIconSize}`,
|
|
1356
|
-
url,
|
|
1357
|
-
width: maxIconSize,
|
|
1358
|
-
height: maxIconSize,
|
|
1359
|
-
mask: true
|
|
1360
|
-
};
|
|
1361
|
-
};
|
|
1362
|
-
}
|
|
1363
|
-
|
|
1364
1303
|
calculateDataAttribute(keplerTable, getPosition) {
|
|
1365
1304
|
// implemented in subclasses
|
|
1366
1305
|
return [];
|
|
@@ -26,7 +26,6 @@ import {DEFAULT_COLOR_RANGE} from 'constants/color-ranges';
|
|
|
26
26
|
export const PROPERTY_GROUPS = keyMirror({
|
|
27
27
|
color: null,
|
|
28
28
|
stroke: null,
|
|
29
|
-
customMarkers: null,
|
|
30
29
|
radius: null,
|
|
31
30
|
height: null,
|
|
32
31
|
angle: null,
|
|
@@ -430,27 +429,6 @@ export const LAYER_VIS_CONFIGS = {
|
|
|
430
429
|
step: 0.1,
|
|
431
430
|
group: PROPERTY_GROUPS.cell,
|
|
432
431
|
property: 'radius'
|
|
433
|
-
},
|
|
434
|
-
customMarkers: {
|
|
435
|
-
type: 'boolean',
|
|
436
|
-
defaultValue: false,
|
|
437
|
-
label: 'layerVisConfigs.customMarkers',
|
|
438
|
-
group: PROPERTY_GROUPS.customMarkers,
|
|
439
|
-
property: 'customMarkers'
|
|
440
|
-
},
|
|
441
|
-
customMarkersUrl: {
|
|
442
|
-
type: 'text',
|
|
443
|
-
defaultValue: '',
|
|
444
|
-
label: 'layerVisConfigs.addUrl',
|
|
445
|
-
group: PROPERTY_GROUPS.customMarkers,
|
|
446
|
-
property: 'customMarkersUrl'
|
|
447
|
-
},
|
|
448
|
-
customMarkersRange: {
|
|
449
|
-
type: 'markers-range-select',
|
|
450
|
-
defaultValue: undefined,
|
|
451
|
-
label: 'layerVisConfigs.colorRange',
|
|
452
|
-
group: PROPERTY_GROUPS.customMarkers,
|
|
453
|
-
property: 'customMarkersRange'
|
|
454
432
|
}
|
|
455
433
|
};
|
|
456
434
|
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
import {BrushingExtension} from '@deck.gl/extensions';
|
|
22
22
|
import {ScatterplotLayer} from '@deck.gl/layers';
|
|
23
|
-
import {IconLayer} from '@deck.gl/layers';
|
|
24
23
|
|
|
25
24
|
import Layer from '../base-layer';
|
|
26
25
|
import {hexToRgb} from 'utils/color-utils';
|
|
@@ -44,9 +43,6 @@ const brushingExtension = new BrushingExtension();
|
|
|
44
43
|
export const pointVisConfigs = {
|
|
45
44
|
radius: 'radius',
|
|
46
45
|
fixedRadius: 'fixedRadius',
|
|
47
|
-
customMarkers: 'customMarkers',
|
|
48
|
-
customMarkersUrl: 'customMarkersUrl',
|
|
49
|
-
customMarkersRange: 'customMarkersRange',
|
|
50
46
|
opacity: 'opacity',
|
|
51
47
|
outline: 'outline',
|
|
52
48
|
thickness: 'thickness',
|
|
@@ -126,18 +122,6 @@ export default class PointLayer extends Layer {
|
|
|
126
122
|
channelScaleType: 'radius',
|
|
127
123
|
accessor: 'getRadius',
|
|
128
124
|
defaultValue: 1
|
|
129
|
-
},
|
|
130
|
-
customMarkers: {
|
|
131
|
-
property: 'customMarkers',
|
|
132
|
-
key: 'customMarkers',
|
|
133
|
-
field: 'customMarkersField',
|
|
134
|
-
scale: 'customMarkersScale',
|
|
135
|
-
domain: 'customMarkersDomain',
|
|
136
|
-
range: 'customMarkersRange',
|
|
137
|
-
channelScaleType: CHANNEL_SCALES.customMarker,
|
|
138
|
-
accessor: 'getIconUrl',
|
|
139
|
-
supportedFieldTypes: ['string'],
|
|
140
|
-
getAttributeValue: config => config.visConfig.customMarkersUrl
|
|
141
125
|
}
|
|
142
126
|
};
|
|
143
127
|
}
|
|
@@ -197,10 +181,7 @@ export default class PointLayer extends Layer {
|
|
|
197
181
|
// add stroke color visual channel
|
|
198
182
|
strokeColorField: null,
|
|
199
183
|
strokeColorDomain: [0, 1],
|
|
200
|
-
strokeColorScale: 'quantile'
|
|
201
|
-
|
|
202
|
-
customMarkersField: null,
|
|
203
|
-
customMarkersScale: 'ordinal'
|
|
184
|
+
strokeColorScale: 'quantile'
|
|
204
185
|
};
|
|
205
186
|
}
|
|
206
187
|
|
|
@@ -256,21 +237,22 @@ export default class PointLayer extends Layer {
|
|
|
256
237
|
this.updateMeta({bounds});
|
|
257
238
|
}
|
|
258
239
|
|
|
259
|
-
isLayerHovered(objectInfo) {
|
|
260
|
-
return (
|
|
261
|
-
(objectInfo?.picked && objectInfo?.layer?.props?.id === this.id) ||
|
|
262
|
-
objectInfo?.layer?.props?.id === `${this.id}-icon`
|
|
263
|
-
);
|
|
264
|
-
}
|
|
265
|
-
|
|
266
240
|
renderLayer(opts) {
|
|
267
|
-
const {data, gpuFilter, objectHovered, mapState, interactionConfig
|
|
241
|
+
const {data, gpuFilter, objectHovered, mapState, interactionConfig} = opts;
|
|
268
242
|
|
|
269
243
|
// if no field size is defined we need to pass fixed radius = false
|
|
270
244
|
const fixedRadius = this.config.visConfig.fixedRadius && Boolean(this.config.sizeField);
|
|
271
245
|
const radiusScale = this.getRadiusScale(fixedRadius);
|
|
272
246
|
const radiusUnits = this.getRadiusUnit(fixedRadius);
|
|
273
247
|
|
|
248
|
+
const layerProps = {
|
|
249
|
+
stroked: this.config.visConfig.outline,
|
|
250
|
+
filled: this.config.visConfig.filled,
|
|
251
|
+
lineWidthScale: this.config.visConfig.thickness,
|
|
252
|
+
radiusScale,
|
|
253
|
+
...(this.config.visConfig.fixedRadius ? {} : {radiusMaxPixels: 500})
|
|
254
|
+
};
|
|
255
|
+
|
|
274
256
|
const updateTriggers = {
|
|
275
257
|
getPosition: this.config.columns,
|
|
276
258
|
getFilterValue: gpuFilter.filterValueUpdateTriggers,
|
|
@@ -296,101 +278,16 @@ export default class PointLayer extends Layer {
|
|
|
296
278
|
};
|
|
297
279
|
const hoveredObject = this.hasHoveredObject(objectHovered);
|
|
298
280
|
|
|
299
|
-
const textLabelLayer = this.renderTextLabelLayer(
|
|
300
|
-
{
|
|
301
|
-
getPosition: data.getPosition,
|
|
302
|
-
sharedProps,
|
|
303
|
-
getPixelOffset,
|
|
304
|
-
updateTriggers
|
|
305
|
-
},
|
|
306
|
-
opts
|
|
307
|
-
);
|
|
308
|
-
const commonLayerProps = {
|
|
309
|
-
...defaultLayerProps,
|
|
310
|
-
parameters: {
|
|
311
|
-
// circles will be flat on the map when the altitude column is not used
|
|
312
|
-
depthTest: this.config.columns.altitude?.fieldIdx > -1
|
|
313
|
-
}
|
|
314
|
-
};
|
|
315
|
-
|
|
316
|
-
const customMarkersField = this.config.customMarkersField;
|
|
317
|
-
const {customMarkers, customMarkersUrl, customMarkersRange} = this.config.visConfig;
|
|
318
|
-
const customMarkersConfigured =
|
|
319
|
-
customMarkers && Boolean(customMarkersUrl || (customMarkersField && customMarkersRange));
|
|
320
|
-
const customMarkersMisConfigured = customMarkers && !customMarkersConfigured;
|
|
321
|
-
|
|
322
|
-
if (customMarkersConfigured) {
|
|
323
|
-
const maxIconSize = this.getMaxMarkerSize();
|
|
324
|
-
const getIcon = this.getCustomMarkerIconAccessor(customMarkersStatus, data.getIconUrl);
|
|
325
|
-
const iconLayerProps = {
|
|
326
|
-
getIcon,
|
|
327
|
-
getPosition: data.getPosition,
|
|
328
|
-
getSize: data.getRadius,
|
|
329
|
-
sizeScale: radiusScale,
|
|
330
|
-
sizeUnits: 'pixels',
|
|
331
|
-
loadOptions: {
|
|
332
|
-
image: {
|
|
333
|
-
type: 'imagebitmap'
|
|
334
|
-
},
|
|
335
|
-
imagebitmap: {
|
|
336
|
-
resizeWidth: maxIconSize,
|
|
337
|
-
resizeHeight: maxIconSize,
|
|
338
|
-
resizeQuality: 'high'
|
|
339
|
-
}
|
|
340
|
-
}
|
|
341
|
-
};
|
|
342
|
-
|
|
343
|
-
return [
|
|
344
|
-
new IconLayer({
|
|
345
|
-
...commonLayerProps,
|
|
346
|
-
...iconLayerProps,
|
|
347
|
-
id: `${defaultLayerProps.id}-icon`,
|
|
348
|
-
data: data.data,
|
|
349
|
-
getColor: data.getFillColor,
|
|
350
|
-
getFilterValue: data.getFilterValue,
|
|
351
|
-
updateTriggers: {
|
|
352
|
-
getFilterValue: updateTriggers.getFilterValue,
|
|
353
|
-
getColor: updateTriggers.getFillColor,
|
|
354
|
-
getIcon: [
|
|
355
|
-
customMarkersUrl,
|
|
356
|
-
maxIconSize,
|
|
357
|
-
customMarkersStatus,
|
|
358
|
-
customMarkersField,
|
|
359
|
-
customMarkersRange
|
|
360
|
-
],
|
|
361
|
-
getSize: updateTriggers.getRadius
|
|
362
|
-
}
|
|
363
|
-
}),
|
|
364
|
-
...(hoveredObject
|
|
365
|
-
? [
|
|
366
|
-
new IconLayer({
|
|
367
|
-
...iconLayerProps,
|
|
368
|
-
...this.getDefaultHoverLayerProps(),
|
|
369
|
-
id: `${defaultLayerProps.id}-icon-hovered`,
|
|
370
|
-
data: [hoveredObject],
|
|
371
|
-
getColor: this.config.highlightColor
|
|
372
|
-
})
|
|
373
|
-
]
|
|
374
|
-
: []),
|
|
375
|
-
...textLabelLayer
|
|
376
|
-
];
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
const scatterPlotLayerProps = {
|
|
380
|
-
stroked: this.config.visConfig.outline,
|
|
381
|
-
filled: this.config.visConfig.filled,
|
|
382
|
-
lineWidthScale: this.config.visConfig.thickness,
|
|
383
|
-
// TODO: invent better way to render something when customMarkers are not yet configured
|
|
384
|
-
radiusScale: customMarkersMisConfigured ? radiusScale / 2 : radiusScale,
|
|
385
|
-
...(this.config.visConfig.fixedRadius ? {} : {radiusMaxPixels: 500})
|
|
386
|
-
};
|
|
387
|
-
|
|
388
281
|
return [
|
|
389
282
|
new ScatterplotLayer({
|
|
283
|
+
...defaultLayerProps,
|
|
390
284
|
...brushingProps,
|
|
285
|
+
...layerProps,
|
|
391
286
|
...data,
|
|
392
|
-
|
|
393
|
-
|
|
287
|
+
parameters: {
|
|
288
|
+
// circles will be flat on the map when the altitude column is not used
|
|
289
|
+
depthTest: this.config.columns.altitude?.fieldIdx > -1
|
|
290
|
+
},
|
|
394
291
|
radiusUnits,
|
|
395
292
|
lineWidthUnits: 'pixels',
|
|
396
293
|
updateTriggers,
|
|
@@ -401,7 +298,7 @@ export default class PointLayer extends Layer {
|
|
|
401
298
|
? [
|
|
402
299
|
new ScatterplotLayer({
|
|
403
300
|
...this.getDefaultHoverLayerProps(),
|
|
404
|
-
...
|
|
301
|
+
...layerProps,
|
|
405
302
|
data: [hoveredObject],
|
|
406
303
|
getLineColor: this.config.highlightColor,
|
|
407
304
|
getFillColor: this.config.highlightColor,
|
|
@@ -411,7 +308,15 @@ export default class PointLayer extends Layer {
|
|
|
411
308
|
]
|
|
412
309
|
: []),
|
|
413
310
|
// text label layer
|
|
414
|
-
...
|
|
311
|
+
...this.renderTextLabelLayer(
|
|
312
|
+
{
|
|
313
|
+
getPosition: data.getPosition,
|
|
314
|
+
sharedProps,
|
|
315
|
+
getPixelOffset,
|
|
316
|
+
updateTriggers
|
|
317
|
+
},
|
|
318
|
+
opts
|
|
319
|
+
)
|
|
415
320
|
];
|
|
416
321
|
}
|
|
417
322
|
}
|
package/src/localization/en.js
CHANGED
|
@@ -34,8 +34,7 @@ export default {
|
|
|
34
34
|
density: 'density',
|
|
35
35
|
height: 'height',
|
|
36
36
|
sum: 'sum',
|
|
37
|
-
pointCount: 'Point Count'
|
|
38
|
-
customMarkers: 'Markers'
|
|
37
|
+
pointCount: 'Point Count'
|
|
39
38
|
},
|
|
40
39
|
placeholder: {
|
|
41
40
|
search: 'Search',
|
|
@@ -86,7 +85,6 @@ export default {
|
|
|
86
85
|
layer: {
|
|
87
86
|
required: 'Required*',
|
|
88
87
|
radius: 'Radius',
|
|
89
|
-
size: 'Size',
|
|
90
88
|
color: 'Color',
|
|
91
89
|
fillColor: 'Fill Color',
|
|
92
90
|
outline: 'Outline',
|
|
@@ -103,7 +101,6 @@ export default {
|
|
|
103
101
|
elevationByDescription: 'When off, height is based on count of points',
|
|
104
102
|
colorByDescription: 'When off, color is based on count of points',
|
|
105
103
|
aggregateBy: 'Aggregate {field} by',
|
|
106
|
-
addUrl: 'Add URL',
|
|
107
104
|
'3DModel': '3D Model',
|
|
108
105
|
'3DModelOptions': '3D Model Options',
|
|
109
106
|
type: {
|
|
@@ -164,9 +161,7 @@ export default {
|
|
|
164
161
|
weightIntensity: 'Weight Intensity',
|
|
165
162
|
zoomScale: 'Zoom Scale',
|
|
166
163
|
heightRange: 'Height Range',
|
|
167
|
-
heightMultiplier: 'Height Multiplier'
|
|
168
|
-
customMarkers: 'Custom markers',
|
|
169
|
-
url: 'Add URL'
|
|
164
|
+
heightMultiplier: 'Height Multiplier'
|
|
170
165
|
},
|
|
171
166
|
layerVisibility: {
|
|
172
167
|
title: 'Visibility by zoom level'
|
package/src/utils/layer-utils.js
CHANGED
|
@@ -126,8 +126,7 @@ export function renderDeckGlLayer(props, layerCallbacks, idx) {
|
|
|
126
126
|
interactionConfig,
|
|
127
127
|
animationConfig,
|
|
128
128
|
mapLayers,
|
|
129
|
-
maskPolygon
|
|
130
|
-
customMarkersStatus
|
|
129
|
+
maskPolygon
|
|
131
130
|
} = props;
|
|
132
131
|
const layer = layers[idx];
|
|
133
132
|
const data = layerData[idx];
|
|
@@ -145,8 +144,7 @@ export function renderDeckGlLayer(props, layerCallbacks, idx) {
|
|
|
145
144
|
animationConfig,
|
|
146
145
|
objectHovered,
|
|
147
146
|
visible,
|
|
148
|
-
maskPolygon
|
|
149
|
-
customMarkersStatus
|
|
147
|
+
maskPolygon
|
|
150
148
|
});
|
|
151
149
|
}
|
|
152
150
|
|
|
@@ -388,7 +388,7 @@ export function findPointFieldPairs(fields) {
|
|
|
388
388
|
|
|
389
389
|
// get list of all fields with matching suffixes
|
|
390
390
|
const acc = [];
|
|
391
|
-
|
|
391
|
+
const result = allNames.reduce((carry, fieldName, idx) => {
|
|
392
392
|
// This search for pairs will early exit if found.
|
|
393
393
|
for (const suffixPair of TRIP_POINT_FIELDS) {
|
|
394
394
|
// match first suffix```
|
|
@@ -421,6 +421,15 @@ export function findPointFieldPairs(fields) {
|
|
|
421
421
|
}
|
|
422
422
|
return carry;
|
|
423
423
|
}, acc);
|
|
424
|
+
|
|
425
|
+
// prioritize the 'latitude'/'longitude' pair
|
|
426
|
+
result.sort((a, b) => {
|
|
427
|
+
if (a.defaultName === '' && a.suffix[0] === 'latitude') return -1;
|
|
428
|
+
if (b.defaultName === '' && b.suffix[0] === 'latitude') return 1;
|
|
429
|
+
return 0;
|
|
430
|
+
});
|
|
431
|
+
|
|
432
|
+
return result;
|
|
424
433
|
}
|
|
425
434
|
|
|
426
435
|
/**
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = CustomMarkersConfigGroupFactory;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
|
-
// Copyright (c) 2022 Uber Technologies, Inc.
|
|
13
|
-
//
|
|
14
|
-
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
15
|
-
// of this software and associated documentation files (the "Software"), to deal
|
|
16
|
-
// in the Software without restriction, including without limitation the rights
|
|
17
|
-
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
18
|
-
// copies of the Software, and to permit persons to whom the Software is
|
|
19
|
-
// furnished to do so, subject to the following conditions:
|
|
20
|
-
//
|
|
21
|
-
// The above copyright notice and this permission notice shall be included in
|
|
22
|
-
// all copies or substantial portions of the Software.
|
|
23
|
-
//
|
|
24
|
-
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
25
|
-
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
26
|
-
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
27
|
-
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
28
|
-
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
29
|
-
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
30
|
-
// THE SOFTWARE.
|
|
31
|
-
function CustomMarkersConfigGroupFactory() {
|
|
32
|
-
var CustomMarkersConfigGroup = function CustomMarkersConfigGroup() {
|
|
33
|
-
return /*#__PURE__*/_react["default"].createElement("div", null, "To be overriden");
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
return CustomMarkersConfigGroup;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
CustomMarkersConfigGroupFactory.deps = [];
|
|
40
|
-
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3NpZGUtcGFuZWwvbGF5ZXItcGFuZWwvY3VzdG9tLW1hcmtlcnMtY29uZmlnLWdyb3VwLmpzIl0sIm5hbWVzIjpbIkN1c3RvbU1hcmtlcnNDb25maWdHcm91cEZhY3RvcnkiLCJDdXN0b21NYXJrZXJzQ29uZmlnR3JvdXAiLCJkZXBzIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFvQkE7O0FBcEJBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBSWUsU0FBU0EsK0JBQVQsR0FBMkM7QUFDeEQsTUFBTUMsd0JBQXdCLEdBQUcsU0FBM0JBLHdCQUEyQixHQUFNO0FBQ3JDLHdCQUFPLCtEQUFQO0FBQ0QsR0FGRDs7QUFHQSxTQUFPQSx3QkFBUDtBQUNEOztBQUVERCwrQkFBK0IsQ0FBQ0UsSUFBaEMsR0FBdUMsRUFBdkMiLCJzb3VyY2VzQ29udGVudCI6WyIvLyBDb3B5cmlnaHQgKGMpIDIwMjIgVWJlciBUZWNobm9sb2dpZXMsIEluYy5cbi8vXG4vLyBQZXJtaXNzaW9uIGlzIGhlcmVieSBncmFudGVkLCBmcmVlIG9mIGNoYXJnZSwgdG8gYW55IHBlcnNvbiBvYnRhaW5pbmcgYSBjb3B5XG4vLyBvZiB0aGlzIHNvZnR3YXJlIGFuZCBhc3NvY2lhdGVkIGRvY3VtZW50YXRpb24gZmlsZXMgKHRoZSBcIlNvZnR3YXJlXCIpLCB0byBkZWFsXG4vLyBpbiB0aGUgU29mdHdhcmUgd2l0aG91dCByZXN0cmljdGlvbiwgaW5jbHVkaW5nIHdpdGhvdXQgbGltaXRhdGlvbiB0aGUgcmlnaHRzXG4vLyB0byB1c2UsIGNvcHksIG1vZGlmeSwgbWVyZ2UsIHB1Ymxpc2gsIGRpc3RyaWJ1dGUsIHN1YmxpY2Vuc2UsIGFuZC9vciBzZWxsXG4vLyBjb3BpZXMgb2YgdGhlIFNvZnR3YXJlLCBhbmQgdG8gcGVybWl0IHBlcnNvbnMgdG8gd2hvbSB0aGUgU29mdHdhcmUgaXNcbi8vIGZ1cm5pc2hlZCB0byBkbyBzbywgc3ViamVjdCB0byB0aGUgZm9sbG93aW5nIGNvbmRpdGlvbnM6XG4vL1xuLy8gVGhlIGFib3ZlIGNvcHlyaWdodCBub3RpY2UgYW5kIHRoaXMgcGVybWlzc2lvbiBub3RpY2Ugc2hhbGwgYmUgaW5jbHVkZWQgaW5cbi8vIGFsbCBjb3BpZXMgb3Igc3Vic3RhbnRpYWwgcG9ydGlvbnMgb2YgdGhlIFNvZnR3YXJlLlxuLy9cbi8vIFRIRSBTT0ZUV0FSRSBJUyBQUk9WSURFRCBcIkFTIElTXCIsIFdJVEhPVVQgV0FSUkFOVFkgT0YgQU5ZIEtJTkQsIEVYUFJFU1MgT1Jcbi8vIElNUExJRUQsIElOQ0xVRElORyBCVVQgTk9UIExJTUlURUQgVE8gVEhFIFdBUlJBTlRJRVMgT0YgTUVSQ0hBTlRBQklMSVRZLFxuLy8gRklUTkVTUyBGT1IgQSBQQVJUSUNVTEFSIFBVUlBPU0UgQU5EIE5PTklORlJJTkdFTUVOVC4gSU4gTk8gRVZFTlQgU0hBTEwgVEhFXG4vLyBBVVRIT1JTIE9SIENPUFlSSUdIVCBIT0xERVJTIEJFIExJQUJMRSBGT1IgQU5ZIENMQUlNLCBEQU1BR0VTIE9SIE9USEVSXG4vLyBMSUFCSUxJVFksIFdIRVRIRVIgSU4gQU4gQUNUSU9OIE9GIENPTlRSQUNULCBUT1JUIE9SIE9USEVSV0lTRSwgQVJJU0lORyBGUk9NLFxuLy8gT1VUIE9GIE9SIElOIENPTk5FQ1RJT04gV0lUSCBUSEUgU09GVFdBUkUgT1IgVEhFIFVTRSBPUiBPVEhFUiBERUFMSU5HUyBJTlxuLy8gVEhFIFNPRlRXQVJFLlxuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBDdXN0b21NYXJrZXJzQ29uZmlnR3JvdXBGYWN0b3J5KCkge1xuICBjb25zdCBDdXN0b21NYXJrZXJzQ29uZmlnR3JvdXAgPSAoKSA9PiB7XG4gICAgcmV0dXJuIDxkaXY+VG8gYmUgb3ZlcnJpZGVuPC9kaXY+O1xuICB9O1xuICByZXR1cm4gQ3VzdG9tTWFya2Vyc0NvbmZpZ0dyb3VwO1xufVxuXG5DdXN0b21NYXJrZXJzQ29uZmlnR3JvdXBGYWN0b3J5LmRlcHMgPSBbXTtcbiJdfQ==
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
// Copyright (c) 2022 Uber Technologies, Inc.
|
|
2
|
-
//
|
|
3
|
-
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
4
|
-
// of this software and associated documentation files (the "Software"), to deal
|
|
5
|
-
// in the Software without restriction, including without limitation the rights
|
|
6
|
-
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
7
|
-
// copies of the Software, and to permit persons to whom the Software is
|
|
8
|
-
// furnished to do so, subject to the following conditions:
|
|
9
|
-
//
|
|
10
|
-
// The above copyright notice and this permission notice shall be included in
|
|
11
|
-
// all copies or substantial portions of the Software.
|
|
12
|
-
//
|
|
13
|
-
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
14
|
-
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
15
|
-
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
16
|
-
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
17
|
-
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
18
|
-
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
19
|
-
// THE SOFTWARE.
|
|
20
|
-
|
|
21
|
-
import React from 'react';
|
|
22
|
-
|
|
23
|
-
export default function CustomMarkersConfigGroupFactory() {
|
|
24
|
-
const CustomMarkersConfigGroup = () => {
|
|
25
|
-
return <div>To be overriden</div>;
|
|
26
|
-
};
|
|
27
|
-
return CustomMarkersConfigGroup;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
CustomMarkersConfigGroupFactory.deps = [];
|