visgl / deck.gl Goto Github PK
View Code? Open in Web Editor NEWWebGL2 powered visualization framework
Home Page: https://deck.gl
License: MIT License
WebGL2 powered visualization framework
Home Page: https://deck.gl
License: MIT License
A (hierachical) voronoi layer to visualize density distribution
Setting opacity to 0 appears to be interpreted as falsy rather than zero, which causes the opacity to set back to the default.
Just thought I'd let you know - prepublish
runs on installs as well as before publishing (you can read the shitshow here). This means when you install the module, the entire project is rebuilt.
> [email protected] prepublish /Users/contra/Projects/staeco/node_modules/deck.gl
> npm run build
> [email protected] build /Users/contra/Projects/staeco/node_modules/deck.gl
> npm run build-clean && npm run build-src && npm run build-shaderlib && npm run build-script
> [email protected] build-clean /Users/contra/Projects/staeco/node_modules/deck.gl
> rm -fr dist/*
> [email protected] build-src /Users/contra/Projects/staeco/node_modules/deck.gl
> babel src -d dist --source-maps inline --copy-files
src/bundle.js -> dist/bundle.js
src/index.js -> dist/index.js
src/layers/core/arc-layer/arc-layer.js -> dist/layers/core/arc-layer/arc-layer.js
src/layers/core/arc-layer/index.js -> dist/layers/core/arc-layer/index.js
src/layers/core/choropleth-layer/choropleth-layer.js -> dist/layers/core/choropleth-layer/choropleth-layer.js
src/layers/core/choropleth-layer/index.js -> dist/layers/core/choropleth-layer/index.js
src/layers/core/grid-layer/grid-layer.js -> dist/layers/core/grid-layer/grid-layer.js
src/layers/core/grid-layer/index.js -> dist/layers/core/grid-layer/index.js
src/layers/core/index.js -> dist/layers/core/index.js
src/layers/core/line-layer/index.js -> dist/layers/core/line-layer/index.js
src/layers/core/line-layer/line-layer.js -> dist/layers/core/line-layer/line-layer.js
src/layers/core/scatterplot-layer/index.js -> dist/layers/core/scatterplot-layer/index.js
src/layers/core/scatterplot-layer/scatterplot-layer.js -> dist/layers/core/scatterplot-layer/scatterplot-layer.js
src/layers/fp64/arc-layer/arc-layer.js -> dist/layers/fp64/arc-layer/arc-layer.js
src/layers/fp64/arc-layer/index.js -> dist/layers/fp64/arc-layer/index.js
src/layers/fp64/index.js -> dist/layers/fp64/index.js
src/layers/fp64/scatterplot-layer/index.js -> dist/layers/fp64/scatterplot-layer/index.js
src/layers/fp64/scatterplot-layer/scatterplot-layer.js -> dist/layers/fp64/scatterplot-layer/scatterplot-layer.js
src/layers/samples/enhanced-choropleth-layer/enhanced-choropleth-layer-fragment.js -> dist/layers/samples/enhanced-choropleth-layer/enhanced-choropleth-layer-fragment.js
src/layers/samples/enhanced-choropleth-layer/enhanced-choropleth-layer-vertex.js -> dist/layers/samples/enhanced-choropleth-layer/enhanced-choropleth-layer-vertex.js
src/layers/samples/enhanced-choropleth-layer/enhanced-choropleth-layer.js -> dist/layers/samples/enhanced-choropleth-layer/enhanced-choropleth-layer.js
src/layers/samples/enhanced-choropleth-layer/index.js -> dist/layers/samples/enhanced-choropleth-layer/index.js
src/layers/samples/enhanced-hexagon-layer/enhanced-hexagon-layer-fragment.js -> dist/layers/samples/enhanced-hexagon-layer/enhanced-hexagon-layer-fragment.js
src/layers/samples/enhanced-hexagon-layer/enhanced-hexagon-layer-vertex.js -> dist/layers/samples/enhanced-hexagon-layer/enhanced-hexagon-layer-vertex.js
src/layers/samples/enhanced-hexagon-layer/enhanced-hexagon-layer.js -> dist/layers/samples/enhanced-hexagon-layer/enhanced-hexagon-layer.js
src/layers/samples/enhanced-hexagon-layer/index.js -> dist/layers/samples/enhanced-hexagon-layer/index.js
src/layers/samples/hexagon-layer/hexagon-layer.js -> dist/layers/samples/hexagon-layer/hexagon-layer.js
src/layers/samples/hexagon-layer/index.js -> dist/layers/samples/hexagon-layer/index.js
src/layers/samples/index.js -> dist/layers/samples/index.js
src/layers/samples/point-cloud-layer/index.js -> dist/layers/samples/point-cloud-layer/index.js
src/layers/samples/point-cloud-layer/point-cloud-layer-fragment.js -> dist/layers/samples/point-cloud-layer/point-cloud-layer-fragment.js
src/layers/samples/point-cloud-layer/point-cloud-layer-vertex.js -> dist/layers/samples/point-cloud-layer/point-cloud-layer-vertex.js
src/layers/samples/point-cloud-layer/point-cloud-layer.js -> dist/layers/samples/point-cloud-layer/point-cloud-layer.js
src/layers/samples/voronoi-layer/index.js -> dist/layers/samples/voronoi-layer/index.js
src/layers/samples/voronoi-layer/voronoi-layer.js -> dist/layers/samples/voronoi-layer/voronoi-layer.js
src/layers/shaderlib/project.js -> dist/layers/shaderlib/project.js
src/lib/attribute-manager.js -> dist/lib/attribute-manager.js
src/lib/base-layer.js -> dist/lib/base-layer.js
src/lib/index.js -> dist/lib/index.js
src/lib/layer-manager.js -> dist/lib/layer-manager.js
src/lib/pick-models.js -> dist/lib/pick-models.js
src/lib/utils/fp64.js -> dist/lib/utils/fp64.js
src/lib/utils/index.js -> dist/lib/utils/index.js
src/lib/utils/log.js -> dist/lib/utils/log.js
src/lib/utils/util.js -> dist/lib/utils/util.js
src/react/config.js -> dist/react/config.js
src/react/deckgl.js -> dist/react/deckgl.js
src/react/spec.js -> dist/react/spec.js
src/react/webgl-renderer.js -> dist/react/webgl-renderer.js
src/shader-utils/assemble-shader.js -> dist/shader-utils/assemble-shader.js
src/shader-utils/index.js -> dist/shader-utils/index.js
src/test/browser.js -> dist/test/browser.js
src/test/electron.js -> dist/test/electron.js
src/test/headless.js -> dist/test/headless.js
src/test/imports-spec.js -> dist/test/imports-spec.js
src/test/index.js -> dist/test/index.js
src/test/layers/core-layers.spec.js -> dist/test/layers/core-layers.spec.js
src/test/layers/index.js -> dist/test/layers/index.js
src/test/lib/base-layer.spec.js -> dist/test/lib/base-layer.spec.js
src/test/lib/index.js -> dist/test/lib/index.js
src/test/react/deckgl.spec.js -> dist/test/react/deckgl.spec.js
src/test/react/index.js -> dist/test/react/index.js
src/test/shader.js -> dist/test/shader.js
src/test/test-utils.js -> dist/test/test-utils.js
src/test/viewport/index.js -> dist/test/viewport/index.js
src/test/viewport/viewport.spec.js -> dist/test/viewport/viewport.spec.js
src/viewport/index.js -> dist/viewport/index.js
src/viewport/viewport.js -> dist/viewport/viewport.js
> [email protected] build-shaderlib /Users/contra/Projects/staeco/node_modules/deck.gl
> babel shaderlib -d dist/shaderlib --source-maps inline
shaderlib/fp64/math-fp64.js -> dist/shaderlib/fp64/math-fp64.js
shaderlib/index.js -> dist/shaderlib/index.js
shaderlib/projection/index.js -> dist/shaderlib/projection/index.js
shaderlib/shader-chunks.js -> dist/shaderlib/shader-chunks.js
(you get the point)
I've been trying to use deck.gl in a webpack project, and have encountered a few snags. At first I thought glslify
simply needed to be listed in dependencies
rather than devDependencies
, but I think there may be more subtlety here, so I figured I'd create an issue.
Either way, glslify does appear to be a production dependency, even in the dist.
not sure if this is configurable, couldn't track it down but seems like a bug
Fix the bug for cell (values) shifting when zooming and panning in the grid layer.
It would be nice if we can pass Mapbox access_token via queryParam while running deck.gl examples.
react-map-gl has options to pass access_token via queryParam.
Hi @wwwtyro
I try to edit the scatterplot layer to have radius as an attribute instead of uniform.
My edit works when ONLY scatterplot layers is rendered. But breaks when any other type of layer is rendered together.
Here is to my branch. I edit the example code to include radius in scatterplot. https://github.com/heshan0131/deck.gl/tree/point-size
Going to take a pass at doing some documentation for all of the layers + examples.
The logic for scaling the dots in scatterplots changed in the latest 3.x beta. Is there any info about how this works/is configured?
I know before the radius was a flat pixel size, I think now it works as meters width. Is this configurable? I can't seem to figure out how to override the scaling to do my own logic (min width/max width in pixels)
index always comes back as -1 after updating to the latest (2.4.8)
Not so much an issue, more of a discussion.
Mapbox GL JS just landed support for rendering extrusions, which means 3d buildings are a thing.
mapbox/mapbox-gl-style-spec#456
mapbox/mapbox-gl-style-spec#495
I guess my question is, how is deck.gl going to work with this if its just a layer rendered over the map?
Apply gamma correction to opacity to make it visually "linear":
opacity => Math.pow(opacity, 1 / 2.2)
Not sure if you were aware, but all of the 3.x releases on npm were published without a dist
folder so they don't run (error finding dist/index.js).
This issue only appears on Intel graphics card.
To reproduce:
Possible causes:
I know there was a ticket for this before, not sure where it went.
Two possible solutions as I see it:
properties
attributeproperties
attributelineWidth
/ arcWidth
/ pointRadius
/ choroplethOpacity
)properties
attributeproperties
attributeThoughts? I can take a swing at this once I know which direction to run in.
Personally leaning towards option 2 as its a lot easier from the user's perspective - toss arbitrary geojson into a layer and it just works. Could also do both!
The Layer
class validates input with if (!property)
. This fails on 0
values for zoom, latitude, and longitude.
Works fine on latest 2.x, updating to 3.x causes scatterplots to quit rendering.
Additional info:
3.0.0-beta17
Tested the latest dev branch demo and the core scatter layer works, but the fp64 does not.
Not sure if you're worried about it since it is a dev branch, but these layers don't work on the 3.x dev branch demo:
In previous versions, you could detect hover/non-hovering over a data item because onHover was called for every mouse movement, so hovering = event.index === -1
was enough to keep the cursor in sync.
With the latest 3.x (beta28), the onHover seems to only be called when the item is actually being hovered over, which is great for performance but doesn't let you know when the state changes from hovering -> not hovering. What's the recommended way to keep the cursor in sync with this new change?
Looks like deck.gl layers can only be used on the small zoom levels at the moment due to the way the coordinates are being projected. Here is the difference between how the polygons from the example are rendered by the library and QGIS:
The outlines wobble quite noticeably when you change the viewport, which suggests that not enough precision is being applied in trigonometric functions inside glsls. Attempts to use different numeric types in various places did not help in my case due to lack of WebGL / deck.gl knowledge.
It would be nice if the layers could be upgraded to (optionally) support higher precision during rendering. Until then, let this issue be a warning to those who want to render something on top of MapboxGL at a building scale :โ)
Please share your code if you've managed to patch any of the built-in deck.gl layers!
Tested on latest (2.4.10). Doesn't render anything and logs:
[.Offscreen-For-WebGL-0x7fcf51a8ee00]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
[.Offscreen-For-WebGL-0x7fcf51a8ee00]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
[.Offscreen-For-WebGL-0x7fcf51a8ee00]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
Reproduce by providing this object as the data
prop:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"color": [
73,
154,
255
]
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
-74.116904,
40.710477
],
[
-74.103844,
40.718665
],
[
-74.103774,
40.718694
],
[
-74.103772,
40.718722
],
[
-74.100044,
40.724593
],
[
-74.099086,
40.726101
],
[
-74.098571,
40.727212
],
[
-74.098539,
40.727282
],
[
-74.098182,
40.72795
],
[
-74.0947,
40.73447
],
[
-74.094018,
40.735138
],
[
-74.093956,
40.735199
],
[
-74.092021,
40.736579
],
[
-74.089286,
40.738401
],
[
-74.083061,
40.740149
],
[
-74.08197,
40.740526
],
[
-74.081739,
40.74063
],
[
-74.081586,
40.740701
],
[
-74.080262,
40.741407
],
[
-74.077047,
40.743248
],
[
-74.075202,
40.747395
],
[
-74.078686,
40.750601
],
[
-74.078509,
40.750807
],
[
-74.077472,
40.752014
],
[
-74.077423,
40.752043
],
[
-74.077003,
40.752223
],
[
-74.076381,
40.752278
],
[
-74.075751,
40.752378
],
[
-74.075492,
40.752497
],
[
-74.075385,
40.75262
],
[
-74.075331,
40.752839
],
[
-74.07533,
40.753003
],
[
-74.075404,
40.753226
],
[
-74.075561,
40.753489
],
[
-74.075819,
40.753732
],
[
-74.076154,
40.753956
],
[
-74.07644,
40.754279
],
[
-74.07654,
40.754444
],
[
-74.076591,
40.754623
],
[
-74.07659,
40.754787
],
[
-74.076512,
40.754907
],
[
-74.076391,
40.754998
],
[
-74.076172,
40.755128
],
[
-74.075898,
40.755178
],
[
-74.075633,
40.755195
],
[
-74.075347,
40.755256
],
[
-74.075164,
40.755335
],
[
-74.075057,
40.755437
],
[
-74.07498,
40.755517
],
[
-74.074954,
40.755637
],
[
-74.074953,
40.755798
],
[
-74.074976,
40.755959
],
[
-74.075079,
40.756284
],
[
-74.07513,
40.756467
],
[
-74.075205,
40.756628
],
[
-74.075256,
40.756872
],
[
-74.075147,
40.757274
],
[
-74.075091,
40.757558
],
[
-74.075012,
40.757799
],
[
-74.07488,
40.758021
],
[
-74.074802,
40.758122
],
[
-74.074642,
40.758242
],
[
-74.074458,
40.758326
],
[
-74.074381,
40.758361
],
[
-74.074226,
40.758382
],
[
-74.073548,
40.758559
],
[
-74.073093,
40.75868
],
[
-74.072935,
40.75875
],
[
-74.072751,
40.758859
],
[
-74.072645,
40.758968
],
[
-74.072594,
40.759075
],
[
-74.072601,
40.759304
],
[
-74.072538,
40.759804
],
[
-74.072488,
40.759912
],
[
-74.072269,
40.760078
],
[
-74.072141,
40.760155
],
[
-74.071638,
40.760411
],
[
-74.071343,
40.760558
],
[
-74.070548,
40.760896
],
[
-74.070185,
40.76105
],
[
-74.068748,
40.761732
],
[
-74.068084,
40.762038
],
[
-74.067783,
40.762164
],
[
-74.067611,
40.762236
],
[
-74.067297,
40.762315
],
[
-74.067105,
40.7624
],
[
-74.066669,
40.762574
],
[
-74.066092,
40.762896
],
[
-74.065922,
40.762987
],
[
-74.065529,
40.763328
],
[
-74.065238,
40.763589
],
[
-74.065029,
40.76369
],
[
-74.064793,
40.763769
],
[
-74.064483,
40.763789
],
[
-74.064143,
40.763744
],
[
-74.063806,
40.763644
],
[
-74.063548,
40.763482
],
[
-74.062849,
40.762912
],
[
-74.06251,
40.762666
],
[
-74.06215,
40.762482
],
[
-74.061602,
40.7623
],
[
-74.061366,
40.762277
],
[
-74.060975,
40.762377
],
[
-74.060792,
40.762434
],
[
-74.060585,
40.762433
],
[
-74.060193,
40.762493
],
[
-74.060062,
40.762595
],
[
-74.060008,
40.762675
],
[
-74.060006,
40.762937
],
[
-74.060032,
40.763259
],
[
-74.060002,
40.763401
],
[
-74.059948,
40.76345
],
[
-74.059871,
40.763521
],
[
-74.059767,
40.763743
],
[
-74.059737,
40.763944
],
[
-74.059763,
40.764188
],
[
-74.059938,
40.764653
],
[
-74.060042,
40.764836
],
[
-74.060091,
40.76534
],
[
-74.060089,
40.765523
],
[
-74.05998,
40.765723
],
[
-74.059771,
40.766006
],
[
-74.059533,
40.766166
],
[
-74.059169,
40.766387
],
[
-74.058855,
40.766527
],
[
-74.058512,
40.766708
],
[
-74.058196,
40.767049
],
[
-74.058039,
40.76729
],
[
-74.05796,
40.767431
],
[
-74.057564,
40.767995
],
[
-74.057248,
40.768479
],
[
-74.057118,
40.768694
],
[
-74.056996,
40.768765
],
[
-74.056895,
40.768867
],
[
-74.055287,
40.766234
],
[
-74.053726,
40.763642
],
[
-74.053575,
40.762878
],
[
-74.053478,
40.762402
],
[
-74.053141,
40.761733
],
[
-74.052873,
40.761349
],
[
-74.05262,
40.761053
],
[
-74.052191,
40.760721
],
[
-74.051949,
40.760571
],
[
-74.050833,
40.760046
],
[
-74.050288,
40.759818
],
[
-74.050067,
40.759693
],
[
-74.049888,
40.759592
],
[
-74.049688,
40.759359
],
[
-74.049617,
40.75925
],
[
-74.049473,
40.759026
],
[
-74.049278,
40.758635
],
[
-74.04923,
40.758601
],
[
-74.048922,
40.758442
],
[
-74.045821,
40.757384
],
[
-74.044847,
40.757008
],
[
-74.043682,
40.756591
],
[
-74.043406,
40.755635
],
[
-74.043367,
40.755501
],
[
-74.042979,
40.754052
],
[
-74.042694,
40.753027
],
[
-74.042562,
40.752652
],
[
-74.042478,
40.752501
],
[
-74.042259,
40.752296
],
[
-74.042109,
40.7522
],
[
-74.03878,
40.750922
],
[
-74.03762,
40.750614
],
[
-74.037665,
40.75054
],
[
-74.038065,
40.749794
],
[
-74.038427,
40.749052
],
[
-74.038575,
40.748749
],
[
-74.039201,
40.747539
],
[
-74.039551,
40.746968
],
[
-74.039834,
40.7466
],
[
-74.039875,
40.746546
],
[
-74.040777,
40.745497
],
[
-74.041083,
40.745137
],
[
-74.041321,
40.744834
],
[
-74.041569,
40.744519
],
[
-74.041843,
40.744125
],
[
-74.042106,
40.743675
],
[
-74.042325,
40.743234
],
[
-74.042445,
40.742861
],
[
-74.042285,
40.741201
],
[
-74.043227,
40.740362
],
[
-74.043548,
40.740014
],
[
-74.043985,
40.739401
],
[
-74.043804,
40.73846
],
[
-74.043922,
40.738167
],
[
-74.044117,
40.737814
],
[
-74.042931,
40.736251
],
[
-74.042794,
40.736031
],
[
-74.042333,
40.735937
],
[
-74.040436,
40.736302
],
[
-74.038762,
40.736404
],
[
-74.038688,
40.736382
],
[
-74.036852,
40.735828
],
[
-74.035284,
40.735301
],
[
-74.032525,
40.734453
],
[
-74.032261,
40.734372
],
[
-74.031236,
40.733965
],
[
-74.030525,
40.733683
],
[
-74.030304,
40.733562
],
[
-74.030038,
40.733372
],
[
-74.029509,
40.733035
],
[
-74.022888,
40.731061
],
[
-74.020405,
40.730321
],
[
-74.021104,
40.727468
],
[
-74.021116,
40.727421
],
[
-74.021588,
40.725088
],
[
-74.021961,
40.723586
],
[
-74.02597,
40.701624
],
[
-74.026284,
40.699902
],
[
-74.032939,
40.687783
],
[
-74.034573,
40.684866
],
[
-74.034905,
40.684231
],
[
-74.035057,
40.68394
],
[
-74.042759,
40.672988
],
[
-74.048937,
40.662702
],
[
-74.049594,
40.661622
],
[
-74.065931,
40.666915
],
[
-74.077666,
40.672082
],
[
-74.08256,
40.674278
],
[
-74.088524,
40.676583
],
[
-74.089611,
40.677153
],
[
-74.093672,
40.678695
],
[
-74.094904,
40.67923
],
[
-74.095152,
40.679333
],
[
-74.09791,
40.680855
],
[
-74.097977,
40.680892
],
[
-74.098911,
40.68272
],
[
-74.098964,
40.68282
],
[
-74.099224,
40.683781
],
[
-74.099918,
40.685624
],
[
-74.100589,
40.686896
],
[
-74.101122,
40.688075
],
[
-74.100948,
40.688284
],
[
-74.101281,
40.688902
],
[
-74.101389,
40.689104
],
[
-74.10169,
40.690272
],
[
-74.101745,
40.690579
],
[
-74.101737,
40.690928
],
[
-74.101505,
40.691383
],
[
-74.10139,
40.691612
],
[
-74.101777,
40.693019
],
[
-74.101793,
40.693079
],
[
-74.102056,
40.693742
],
[
-74.102288,
40.694327
],
[
-74.102586,
40.694902
],
[
-74.102586,
40.695102
],
[
-74.103623,
40.695655
],
[
-74.10515,
40.696425
],
[
-74.105673,
40.696603
],
[
-74.10634,
40.697073
],
[
-74.106434,
40.697139
],
[
-74.107974,
40.69789
],
[
-74.114559,
40.701072
],
[
-74.114287,
40.701402
],
[
-74.113338,
40.702477
],
[
-74.112787,
40.703102
],
[
-74.116514,
40.709454
],
[
-74.117057,
40.710381
],
[
-74.116904,
40.710477
]
],
[
[
-74.047285,
40.690503
],
[
-74.046995,
40.690173
],
[
-74.04657,
40.689639
],
[
-74.04647,
40.68949
],
[
-74.046144,
40.68927
],
[
-74.045883,
40.689143
],
[
-74.045616,
40.689022
],
[
-74.04537,
40.688878
],
[
-74.045074,
40.688735
],
[
-74.044569,
40.688581
],
[
-74.044396,
40.688542
],
[
-74.044208,
40.688608
],
[
-74.043977,
40.688658
],
[
-74.043803,
40.688757
],
[
-74.043658,
40.688861
],
[
-74.043586,
40.688982
],
[
-74.043556,
40.689147
],
[
-74.043513,
40.689274
],
[
-74.043521,
40.689588
],
[
-74.043556,
40.689725
],
[
-74.043664,
40.689935
],
[
-74.043773,
40.690083
],
[
-74.043917,
40.690215
],
[
-74.044279,
40.690463
],
[
-74.044531,
40.690584
],
[
-74.044848,
40.690728
],
[
-74.04586,
40.691102
],
[
-74.04607,
40.691185
],
[
-74.046265,
40.691158
],
[
-74.046568,
40.691147
],
[
-74.046895,
40.691125
],
[
-74.047097,
40.691142
],
[
-74.047169,
40.691114
],
[
-74.047249,
40.690999
],
[
-74.047234,
40.69085
],
[
-74.047212,
40.690723
],
[
-74.047184,
40.690685
],
[
-74.047119,
40.690646
],
[
-74.047104,
40.690564
],
[
-74.047133,
40.690542
],
[
-74.047285,
40.690503
]
],
[
[
-74.040346,
40.700387
],
[
-74.040302,
40.700275
],
[
-74.040292,
40.700171
],
[
-74.040209,
40.700142
],
[
-74.040121,
40.700101
],
[
-74.040101,
40.700034
],
[
-74.040175,
40.699908
],
[
-74.04015,
40.699737
],
[
-74.040106,
40.699618
],
[
-74.040003,
40.699547
],
[
-74.039876,
40.699447
],
[
-74.039734,
40.699373
],
[
-74.039665,
40.699276
],
[
-74.040155,
40.699276
],
[
-74.039817,
40.699009
],
[
-74.039732,
40.699026
],
[
-74.039663,
40.69908
],
[
-74.039631,
40.699134
],
[
-74.039565,
40.699177
],
[
-74.03949,
40.699153
],
[
-74.039432,
40.699081
],
[
-74.039391,
40.698977
],
[
-74.039324,
40.698909
],
[
-74.039204,
40.698868
],
[
-74.038976,
40.698865
],
[
-74.038815,
40.69888
],
[
-74.038583,
40.698916
],
[
-74.038176,
40.699087
],
[
-74.038141,
40.69915
],
[
-74.0382,
40.699218
],
[
-74.03833,
40.699249
],
[
-74.039403,
40.700468
],
[
-74.039491,
40.700509
],
[
-74.039608,
40.700538
],
[
-74.039795,
40.700627
],
[
-74.039932,
40.700653
],
[
-74.040177,
40.700605
],
[
-74.040312,
40.700539
],
[
-74.040361,
40.700476
],
[
-74.040346,
40.700387
]
]
]
]
}
}
]
}
A finer-grained heat map layer as compares to the grid layer.
instancePickingColors
attribute (resized to a high water mark) that can be shared between all layers, instead of generating one for each layer (could give a 20-25% boost in attribute update time for many layers, in addition to obvious memory savings).Buffers
(not just typed arrays) as props.FeatureCollection
to PathLayer
and SolidPolygonLayer
readPixels
to reduce GPU roundtrip costs.gl.getPixels
Layer#getNumInstances
requires data.size
or data.set
to be truthy, when 0
is a valid value. An empty Immutable.List
succeeds, but an empty array or Set will throw an error.
https://github.com/uber/deck.gl/blob/dev/src/react/deckgl.js#L100
Calls updateLayers on the layer manager, then this._updateLayers which calls updateLayers again on the layer manager with the same arguments.
Also noticed that this._updateLayers is called immediately after setState. setState is asynchronous, so https://github.com/uber/deck.gl/blob/dev/src/react/deckgl.js#L83 will evaluate to false. The end result is the context not being set, which leads to:
Could solve both by removing L100 and moving L101 to be the callback on the setState. LMK if you want a PR.
This will allow better rendering quality on retina displays, but simply changing pixelRatio from 1 to deivcePixelRatio (2, on retinaDisplay) will break the color picking algorithm. Need further investigation.
would be great to be able to specify an outline color + width on scatterplot points
temporary workaround is to render another layer with the same data, but different colors and a radius 1 unit higher at a z of 0, with your actual data points at a z of 1.
@wwwtyro Now that LumaGL is public, this repo should be based on LumaGL rather than PhiloGL.
I cloned your repo and tried to play with the example, but noticed that the rendered colors do not match the declared ones in scatter plots and archs. Here is what I did:
git clone ...
npm install
MAPBOX_API_KEY=xxx npm start
And here is the result after a bit of tilting and rotating:
Here is what I see after a click (this changes the data behind the hex mesh):
My attempts to change the colors did not bring any results. However, adding console.log
into various places showed that the values do propagate down to the layer classes.
I ran the experiment in Chrome on Win 7 and in Chrome and FF on Ubuntu VM that sits on the same Windows host. Can this be some incompatibility with the graphics driver? Haven't tried the example on other machines yet.
UPD:
40d32d3 (2016-05-20) works:
UPD2:
Tested 2 more versions:
7ad568d (2016-05-26) colors work
a654bf6 (2016-07-05) not any more
@ibgreen
I have edited the example to duplicate my issue that point layer color won't update in this branch:
https://github.com/heshan0131/deck.gl/tree/performance-fix
would be great to have the ability to set the radius per item, like you can do with color
Works fine on beta17, beta21 is missing the index
+ feature
attributes.
Other layers have the index attr but no object, this one is missing both so I figured I would open a different ticket since it probably stems from something else.
You can reproduce this on the example demo using any of the choropleth layers.
What I'm trying to do: Multiple layers, when one is selected the z-index should be 1 while others are 0 so the data points from the selected layer are visible over ones not selected.
What worked: Multiple DeckGLOverlays with one layer each, then use CSS z-index on each overlay
What isn't working: One DeckGLOverlay with multiple layers.
I've tried two approaches:
assert.js:137 Uncaught AssertionError: Matching layer has no state
)Is there currently a way to do this?
The isPickable prop is only being set to the model once when initializing the layer.
https://github.com/uber/deck.gl/blob/master/src/layers/base-layer.js#L466
Users cannot control whether a layer should respond to hover/click events afterward.
One workaround is to set isPickable = true when initializing the layers and to handle the picking logic (e.g. ignore) in the callback functions.
Tentative release checklist for deck.gl v3 (currently being assembled on dev branch and published as v3.0.0-beta*)
deck.gl
pick
lifecycle methodLayerManager
class to enable deck.gl to be used without React.assembleShaders
fp64
: high-precision (64-bit) floating point calculation supportfp64
: intel, amd, nvidia testing and fixes**viewport-mercator-project
viewport-mercator-project
(open PR)luma.gl
react-map-gl
postponed
project
/unproject
errorfitBounds
replacement (that supports perspective)really the underlying problem is with normalize-geojson.
run into error:
[object] has other than one matching layers
I think this would be a nice feature to have by default, or the ability to turn this on easily.
You can do it yourself right now by writing your own wrapper to the layer and changing the radius based on zoom state, but this isn't ideal.
In the current implementation, each layer has only one primitive that uses one shader program.
Adding multiple primitives support will allow rendering more complex layers without duplicating the data.
e.g. allow render choropleth contour (gl.LINES) and filled region (gl.TRIANGLES) within one choropleth layer.
I did a fresh clone, recent clean install of master
, filled in the MAPBOX_ACCESS_TOKEN with a key that I can use, enabled react-dev-tools, did
npm install
npm start
and got a lot of assertion errors, the first one being in layer-manager.js
:
35 const error4 = initializeNewLayers(newLayers, {gl});
where error4 becomes:
{"name":"AssertionError","expected":true,"operator":"==","message":"Attribute updater for instancePickingColors missing update method","generatedMessage":false}
The page loads to the point where the list in the bottom left (Hexagon etc. Click) and the map around SF appear, but I suppose due to these errors, clicking doesn't do anything and no data shows up.
I'm sure it's something very basic
Greetings,
Checked out the new demo page, and looks awesome. Found that pan/tilt though is broken in the demo for my client. Pressing CTLR, ALT, Shift, and combinations there in do not result in a change. Having seen "Trip Routing" and "ArcLayer" elsewhere I know that CTRL should work and allow for a change of view. All the layers display fine along with scroll/zoom.
OS: Linux 4.4.x
Client: Chrome Version 53.0.2785.143 (64-bit)
Let me know what debug info you need to squash this.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.