diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md new file mode 120000 index 00000000000..44fcc634393 --- /dev/null +++ b/docs/CONTRIBUTING.md @@ -0,0 +1 @@ +../CONTRIBUTING.md \ No newline at end of file diff --git a/docs/developer-guide/views.md b/docs/developer-guide/views.md index 57b246b116e..8407c810147 100644 --- a/docs/developer-guide/views.md +++ b/docs/developer-guide/views.md @@ -9,15 +9,15 @@ View classes enable applications to specify one or more rectangular viewports an
A "minimap" app, implemented as two overlapping, partially synchronized MapViews
A vehicle log rendered from the driver's perspective, implemented with FirstPersonView
A graph, implemented with OrthographicView
diff --git a/docs/layers/bitmap-layer.md b/docs/layers/bitmap-layer.md
index 98bf6195a66..5cb953f238e 100644
--- a/docs/layers/bitmap-layer.md
+++ b/docs/layers/bitmap-layer.md
@@ -1,4 +1,6 @@
-
+import {BitmapLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/column-layer.md b/docs/layers/column-layer.md
index def65f1aaad..143b7c134a1 100644
--- a/docs/layers/column-layer.md
+++ b/docs/layers/column-layer.md
@@ -1,4 +1,6 @@
-
+import {ColumnLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/contour-layer.md b/docs/layers/contour-layer.md
index 65c8c204bb3..597473a8553 100644
--- a/docs/layers/contour-layer.md
+++ b/docs/layers/contour-layer.md
@@ -1,4 +1,6 @@
-
+import {ContourLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+
diff --git a/docs/layers/cpu-grid-layer.md b/docs/layers/cpu-grid-layer.md
index 0ec7562da38..254794bd3df 100644
--- a/docs/layers/cpu-grid-layer.md
+++ b/docs/layers/cpu-grid-layer.md
@@ -1,4 +1,6 @@
-
+import {CPUGridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+
@@ -101,7 +103,7 @@ Color scale domain, default is set to the range of point counts in each cell.
##### `colorRange` (Array, optional)
-* Default:
+* Default:
Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
[colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.
diff --git a/docs/layers/geojson-layer.md b/docs/layers/geojson-layer.md
index 378d41f4dee..dfb71ff0387 100644
--- a/docs/layers/geojson-layer.md
+++ b/docs/layers/geojson-layer.md
@@ -1,4 +1,6 @@
-
+import {GeoJsonLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/gpu-grid-layer.md b/docs/layers/gpu-grid-layer.md
index ff86f0e0ad8..01f6a55b7da 100644
--- a/docs/layers/gpu-grid-layer.md
+++ b/docs/layers/gpu-grid-layer.md
@@ -1,4 +1,6 @@
-
+import {GPUGridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+
@@ -99,7 +101,7 @@ Size of each cell in meters. Must be greater than `0`.
##### `colorRange` (Array, optional)
-* Default:
+* Default:
Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
[colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.
diff --git a/docs/layers/great-circle-layer.md b/docs/layers/great-circle-layer.md
index a8823887005..027658a9d1a 100644
--- a/docs/layers/great-circle-layer.md
+++ b/docs/layers/great-circle-layer.md
@@ -1,4 +1,6 @@
-
+import {GreatCircleLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
diff --git a/docs/layers/grid-cell-layer.md b/docs/layers/grid-cell-layer.md
index 6f73d7c7911..040d87ece46 100644
--- a/docs/layers/grid-cell-layer.md
+++ b/docs/layers/grid-cell-layer.md
@@ -1,5 +1,6 @@
+import {GridCellLayerDemo} from 'website-components/doc-demos/layers';
-
+
diff --git a/docs/layers/grid-layer.md b/docs/layers/grid-layer.md
index e7b1c04c8fb..c0683aaca56 100644
--- a/docs/layers/grid-layer.md
+++ b/docs/layers/grid-layer.md
@@ -1,4 +1,6 @@
-
+import {GridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+
@@ -100,7 +102,7 @@ Color scale domain, default is set to the range of point counts in each cell.
##### `colorRange` (Array, optional)
-* Default:
+* Default:
Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
[colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.
diff --git a/docs/layers/h3-cluster-layer.md b/docs/layers/h3-cluster-layer.md
index 7221636420a..9a3af8464be 100644
--- a/docs/layers/h3-cluster-layer.md
+++ b/docs/layers/h3-cluster-layer.md
@@ -1,4 +1,6 @@
-
+import {H3ClusterLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
diff --git a/docs/layers/h3-hexagon-layer.md b/docs/layers/h3-hexagon-layer.md
index 789db611fad..4d28c026968 100644
--- a/docs/layers/h3-hexagon-layer.md
+++ b/docs/layers/h3-hexagon-layer.md
@@ -1,4 +1,6 @@
-
+import {H3HexagonLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
diff --git a/docs/layers/heatmap-layer.md b/docs/layers/heatmap-layer.md
index 4fe1bf54cda..aba261702fa 100644
--- a/docs/layers/heatmap-layer.md
+++ b/docs/layers/heatmap-layer.md
@@ -1,4 +1,6 @@
-
+import {HeatmapLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+
@@ -77,7 +79,7 @@ Radius of the circle in pixels, to which the weight of an object is distributed.
##### `colorRange` (Array, optional)
-* Default:
+* Default:
Specified as an array of colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing Red, Green, Blue and Alpha channels. Each channel is a value between 0 and 255. When Alpha is not provided, a value of 255 is used. By default `colorRange` is set to
[colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.
diff --git a/docs/layers/hexagon-layer.md b/docs/layers/hexagon-layer.md
index cb5a2901729..494e724f892 100644
--- a/docs/layers/hexagon-layer.md
+++ b/docs/layers/hexagon-layer.md
@@ -1,4 +1,6 @@
-
+import {HexagonLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+
@@ -115,7 +117,7 @@ to number of counts by passing in an arbitrary color domain. This property is ex
##### `colorRange` (Array, optional)
-* Default:
+* Default:
Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
[colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.
diff --git a/docs/layers/icon-layer.md b/docs/layers/icon-layer.md
index d942737bfa5..8a9cf65d4f0 100644
--- a/docs/layers/icon-layer.md
+++ b/docs/layers/icon-layer.md
@@ -1,4 +1,6 @@
-
+import {IconLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/line-layer.md b/docs/layers/line-layer.md
index 8bec5f0c541..d1f59eef4c6 100644
--- a/docs/layers/line-layer.md
+++ b/docs/layers/line-layer.md
@@ -1,4 +1,6 @@
-
+import {LineLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/mvt-layer.md b/docs/layers/mvt-layer.md
index afc4fe4a595..eaf29beaddb 100644
--- a/docs/layers/mvt-layer.md
+++ b/docs/layers/mvt-layer.md
@@ -1,4 +1,6 @@
-
+import {MVTLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
diff --git a/docs/layers/path-layer.md b/docs/layers/path-layer.md
index 6de84a93eec..723ad9b4d88 100644
--- a/docs/layers/path-layer.md
+++ b/docs/layers/path-layer.md
@@ -1,4 +1,6 @@
-
+import {PathLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/point-cloud-layer.md b/docs/layers/point-cloud-layer.md
index 91366c8ee24..4fb0ef25dfa 100644
--- a/docs/layers/point-cloud-layer.md
+++ b/docs/layers/point-cloud-layer.md
@@ -1,4 +1,6 @@
-
+import {PointCloudLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/polygon-layer.md b/docs/layers/polygon-layer.md
index 039f3461428..cf9c1ff584d 100644
--- a/docs/layers/polygon-layer.md
+++ b/docs/layers/polygon-layer.md
@@ -1,4 +1,6 @@
-
+import {PolygonLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/s2-layer.md b/docs/layers/s2-layer.md
index 52f1d5c2e23..817ed7805b7 100644
--- a/docs/layers/s2-layer.md
+++ b/docs/layers/s2-layer.md
@@ -1,4 +1,6 @@
-
+import {S2LayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
diff --git a/docs/layers/scatterplot-layer.md b/docs/layers/scatterplot-layer.md
index ec7a7b97273..452f2da3f84 100644
--- a/docs/layers/scatterplot-layer.md
+++ b/docs/layers/scatterplot-layer.md
@@ -1,4 +1,6 @@
-
+import {ScatterplotLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/screen-grid-layer.md b/docs/layers/screen-grid-layer.md
index 7d60fa25466..2aac5530665 100644
--- a/docs/layers/screen-grid-layer.md
+++ b/docs/layers/screen-grid-layer.md
@@ -1,4 +1,6 @@
-
+import {ScreenGridLayerDemo} from 'website-components/doc-demos/aggregation-layers';
+
+
@@ -128,7 +130,7 @@ to value of its weight by passing in an arbitrary color domain. This property is
##### `colorRange` (Array, optional)
-* Default:
+* Default:
Specified as an array of 6 colors [color1, color2, ... color6]. Each color is an array of 3 or 4 values [R, G, B] or [R, G, B, A], representing intensities of Red, Green, Blue and Alpha channels. Each intensity is a value between 0 and 255. When Alpha not provided a value of 255 is used. By default `colorRange` is set to
[colorbrewer](http://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=6) `6-class YlOrRd`.
diff --git a/docs/layers/terrain-layer.md b/docs/layers/terrain-layer.md
index efbbd314a9a..cb5c64e3175 100644
--- a/docs/layers/terrain-layer.md
+++ b/docs/layers/terrain-layer.md
@@ -1,4 +1,6 @@
-
+import {TerrainLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
diff --git a/docs/layers/text-layer.md b/docs/layers/text-layer.md
index edf24dfcdd1..f2abce7f549 100644
--- a/docs/layers/text-layer.md
+++ b/docs/layers/text-layer.md
@@ -1,4 +1,6 @@
-
+import {TextLayerDemo} from 'website-components/doc-demos/layers';
+
+
diff --git a/docs/layers/tile-layer.md b/docs/layers/tile-layer.md
index dc1ce8eb794..8af3c9dd7a7 100644
--- a/docs/layers/tile-layer.md
+++ b/docs/layers/tile-layer.md
@@ -1,4 +1,6 @@
-
+import {TileLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
diff --git a/docs/layers/trips-layer.md b/docs/layers/trips-layer.md
index 4fc4c117463..5064409f02d 100644
--- a/docs/layers/trips-layer.md
+++ b/docs/layers/trips-layer.md
@@ -1,4 +1,7 @@
-
+import {TripsLayerDemo} from 'website-components/doc-demos/geo-layers';
+
+
Orthographic Mode
New TextLayer
ScreenGridLayer Color Scale
Automated Render Tests
Layer Transitions
JSX Layers
GPU-based Highlighting
Dashes in GeoJson
React 16 Support
WebGL 2
Seer Extension
+ Explore {name}
+ 's API
+ {dataUrl && (
+
+ Sample data
+
+ )}
+
deck.gl allows complex visualizations to be constructed by composing existing layers, and makes it easy to package and share new visualizations as reusable layers. We already offer - a catalog of proven layers and + a catalog of proven layers and we have many more in the works.
@@ -41,7 +43,7 @@ export default class IndexPage extends React.Component {
diff --git a/website-gatsby/src/utils/data-utils.js b/website-gatsby/src/utils/data-utils.js index d5c9eedeb33..d5e70c919cf 100644 --- a/website-gatsby/src/utils/data-utils.js +++ b/website-gatsby/src/utils/data-utils.js @@ -1,4 +1,5 @@ import {request, json, text} from 'd3-request'; +import {withPrefix} from 'gatsby'; import {StreamParser} from './worker-utils'; @@ -6,7 +7,7 @@ export function loadData(url, worker, onSuccess) { if (worker) { const req = request(url); // use a web worker to parse data - const dataParser = new StreamParser(worker, (data, meta) => { + const dataParser = new StreamParser(withPrefix(worker), (data, meta) => { onSuccess(data, meta); }); diff --git a/website-gatsby/src/utils/format-utils.js b/website-gatsby/src/utils/format-utils.js index 95f76dfc05f..e13246a18b8 100644 --- a/website-gatsby/src/utils/format-utils.js +++ b/website-gatsby/src/utils/format-utils.js @@ -52,6 +52,9 @@ export function rgbToHex(rgbArr) { } export function colorToRGBArray(color) { + if (!color) { + return [255, 255, 255, 0]; + } if (Array.isArray(color)) { return color.slice(0, 4); } diff --git a/website-gatsby/src/utils/layer-params.js b/website-gatsby/src/utils/layer-params.js index 9171ad834ce..c69afea6183 100644 --- a/website-gatsby/src/utils/layer-params.js +++ b/website-gatsby/src/utils/layer-params.js @@ -1,6 +1,6 @@ const blackList = ['coordinateSystem', 'modelMatrix']; -const ASYNC_ORIGINAL = Symbol.for('asyncPropOriginal'); +export const ASYNC_ORIGINAL = Symbol.for('asyncPropOriginal'); /* eslint-disable complexity */ /* diff --git a/website-gatsby/static/images/icon-atlas.png b/website-gatsby/static/images/icon-atlas.png deleted file mode 100644 index a4ec64594d2..00000000000 Binary files a/website-gatsby/static/images/icon-atlas.png and /dev/null differ diff --git a/website-gatsby/stylesheets/_gallery.scss b/website-gatsby/stylesheets/_gallery.scss index adf055a9972..b24ff4fdc4c 100644 --- a/website-gatsby/stylesheets/_gallery.scss +++ b/website-gatsby/stylesheets/_gallery.scss @@ -179,31 +179,37 @@ code { height: 100%; transition: height 600ms ease-in; } -.markdown { - height: 100%; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} -.markdown .demo { - height: 80vh; +.markdown-demo-container { + height: 30vh; + min-height: 200px; + transition: height 300ms; + pointer-events: none; - >div:first-child { - margin-top: 0; - transition: margin-top 600ms ease-in; + &:hover { + height: 80vh; } - &:not(:hover) { + .demo { height: 30vh; min-height: 200px; transition: height 300ms; + position: absolute; + width: 100%; + left: 0; + top: 0; + pointer-events: all; - >div:first-child { - margin-top: -20vh; - transition: margin-top 300ms; - } .options-panel { overflow-y: hidden; } + + &:hover { + height: 80vh; + + .options-panel { + overflow-y: auto; + } + } } }