examples: Add playground example (#160)

examples/arrow-layers/linestring/app.tsx → examples-wip/arrow-layers/linestring/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/arrow-layers/multilinestring/app.tsx → examples-wip/arrow-layers/multilinestring/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/arrow-layers/multipoint/app.tsx → examples-wip/arrow-layers/multipoint/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/arrow-layers/multipolygon/app.tsx → examples-wip/arrow-layers/multipolygon/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/arrow-layers/point/app.tsx → examples-wip/arrow-layers/point/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/arrow-layers/polygon/app.tsx → examples-wip/arrow-layers/polygon/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/arrow-layers/text/app.tsx → examples-wip/arrow-layers/text/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/arrow-layers/trips/app.tsx → examples-wip/arrow-layers/trips/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState, useEffect} from 'react';
 import {createRoot} from 'react-dom/client';
 import {StaticMap, MapContext, NavigationControl} from 'react-map-gl';

examples/editable-layers/codesandbox/getting-started/index.js → examples-wip/codesandbox/getting-started/index.js

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import DeckGL from '@deck.gl/react';

examples/editable-layers/codesandbox/getting-started/package.json → examples-wip/codesandbox/getting-started/package.json

@@ -1,4 +1,5 @@
 {
+  "name": "editable-layers-example-getting-started",
   "dependencies": {
     "@deck.gl/core": "^8.8.23",
     "@deck.gl/react": "^8.8.23",

examples/editable-layers/codesandbox/world-heritage/index.js → examples-wip/codesandbox/world-heritage/index.js

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import DeckGL from '@deck.gl/react';

examples/editable-layers/codesandbox/world-heritage/package.json → examples-wip/codesandbox/world-heritage/package.json

@@ -1,4 +1,5 @@
 {
+  "name": "editable-layers-example-code-sandbox-world-heritage",
   "dependencies": {
     "@deck.gl-community/react": "^9.0.1",
     "@deck.gl/core": "^8.8.23",

examples/bing-maps/get-started/app.ts

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {loadModule} from '@deck.gl-community/bing-maps';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
 

examples/editable-layers/advanced/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "editable-layers-advanced-example",
+  "version": "0.0.0",
   "private": true,
   "type": "module",
   "scripts": {

examples/editable-layers/advanced/src/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 

examples/editable-layers/advanced/src/example.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* eslint-env browser */
 import * as React from 'react';
 import DeckGL from '@deck.gl/react';

examples/editable-layers/advanced/src/index.d.ts

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 declare module '*.png' {
   const value: any;
   export = value;

examples/editable-layers/advanced/src/toolbox.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import styled from 'styled-components';
 

examples/editable-layers/editable-h3-cluster-layer/data.ts

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 const hexagonCluster1 = [
   '89283082a17ffff',
   '8928308769bffff',

examples/editable-layers/editable-h3-cluster-layer/index.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import DeckGL from '@deck.gl/react';

examples/editable-layers/editor/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import {Example} from './example';

examples/editable-layers/editor/example.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useState} from 'react';
 import DeckGL from '@deck.gl/react';
 import {ViewMode, EditableGeoJsonLayer} from '@deck.gl-community/editable-layers';

examples/editable-layers/editor/package.json

@@ -1,5 +1,6 @@
 {
   "name": "editable-layers-editor",
+  "version": "0.0.0",
   "private": true,
   "type": "module",
   "scripts": {

examples/editable-layers/no-map/app.js

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 

examples/editable-layers/no-map/example-no-map.js

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 // TODO Fix this example and re-enable ESLint below.
 // eslint-disable-next-line import/named
 import {BitmapLayer} from '@deck.gl/layers';

examples/editable-layers/no-map/webpack.config.js

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 // NOTE: To use this example standalone (e.g. outside of deck.gl repo)
 // delete the local development overrides at the bottom of this file
 

examples/editable-layers/overlays/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import Example from './example';

examples/editable-layers/overlays/constants.ts

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 export const INITIAL_COORDS = {
   lon: -8.545295433037069,
   lat: 42.880392051799674

examples/editable-layers/overlays/example.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import React, {useEffect, useState} from 'react';
 import DeckGL from '@deck.gl/react';
 import StaticMap from 'react-map-gl/maplibre';

examples/editable-layers/overlays/types.ts

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 type Point = {lon: number; lat: number};
 export type WikipediaEntry = {
   thumbnail: {

examples/editable-layers/sf/app.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 

examples/editable-layers/sf/example.tsx

@@ -1,3 +1,7 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import * as React from 'react';
 import StaticMap from 'react-map-gl/maplibre';
 import CSS from 'csstype';

examples/graph-layers/graph-viewer/package.json

@@ -1,5 +1,6 @@
 {
   "name": "graph-layers-example",
+  "version": "0.0.0",
   "private": true,
   "license": "MIT",
   "type": "module",

examples/playground/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Playground</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' rel='stylesheet' />
+  <style>
+    body {margin: 0; font-family: sans-serif; overflow: hidden;}
+    #app {width: 100vw; height: 100vh; display: flex; flex-direction: row; align-items: stretch;}
+    #left-pane {flex: 0 1 40%; display: flex; flex-direction: column; align-items: stretch;}
+    #left-pane select {flex: 0 0 34px; padding: 5px 35px 5px 5px; font-size: 16px; border: 1px solid #ccc; appearance: none;}
+    #editor {flex: 0 1 100%;}
+    #right-pane {flex: 0 1 60%; position: relative;}
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+<script type="module">
+  import {renderToDOM} from './src/app.tsx';
+  renderToDOM(document.getElementById('app'));
+</script>
+</html>

examples/playground/json-examples/3d-heatmap-minimap.json

@@ -0,0 +1,60 @@
+{
+  "description": "The deck.gl website hexagonlayer example (with added minimap)",
+  "websiteUrl": "https://deck.gl/#/examples/core-layers/hexagon-layer",
+  "initialViewState": {
+    "id": "view-state",
+    "longitude": -1.4157267858730052,
+    "latitude": 52.232395363869415,
+    "zoom": 6.6,
+    "minZoom": 5,
+    "maxZoom": 15,
+    "pitch": 40.5,
+    "bearing": -27.396674584323023
+  },
+  "views": [
+    {
+      "@@type": "MapView",
+      "id": "main",
+      "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
+      "controller": true
+    },
+    {
+      "@@type": "MapView",
+      "id": "minimap",
+      "mapStyle": "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
+      "width": "40%",
+      "height": "40%",
+      "x": "55%",
+      "y": "5%",
+      "clear": true,
+      "viewState": {
+        "id": "main",
+        "pitch": 0,
+        "bearing": 0,
+        "zoom": 4
+      }
+    }
+  ],
+  "layers": [
+    {
+      "@@type": "HexagonLayer",
+      "id": "heatmap",
+      "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv",
+      "coverage": 1,
+      "elevationRange": [0, 3000],
+      "elevationScale": 50,
+      "extruded": true,
+      "getPosition": "@@=[lng,lat]",
+      "radius": 1000,
+      "upperPercentile": 100,
+      "colorRange": [
+        [1, 152, 189],
+        [73, 227, 206],
+        [216, 254, 181],
+        [254, 237, 177],
+        [254, 173, 84],
+        [209, 55, 78]
+      ]
+    }
+  ]
+}

examples/playground/json-examples/3d-heatmap.json

@@ -0,0 +1,47 @@
+{
+  "description": "The deck.gl website hexagonlayer example in JSON format",
+  "websiteUrl": "https://deck.gl/#/examples/core-layers/hexagon-layer",
+  "initialViewState": {
+    "longitude": -1.4157267858730052,
+    "latitude": 52.232395363869415,
+    "zoom": 6.6,
+    "minZoom": 5,
+    "maxZoom": 15,
+    "pitch": 40.5,
+    "bearing": -27.396674584323023
+  },
+  "views": [
+    {
+      "@@type": "MapView",
+      "controller": true,
+      "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json"
+    }
+  ],
+  "layers": [
+    {
+      "@@type": "HexagonLayer",
+      "id": "heatmap",
+      "data": "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv",
+      "coverage": 1,
+      "pickable": true,
+      "autoHighlight": true,
+      "elevationRange": [
+        0,
+        3000
+      ],
+      "elevationScale": 50,
+      "extruded": true,
+      "getPosition": "@@=[lng,lat]",
+      "radius": 1000,
+      "upperPercentile": 100,
+      "colorRange": [
+        [1, 152, 189],
+        [73, 227, 206],
+        [216, 254, 181],
+        [254, 237, 177],
+        [254, 173, 84],
+        [209, 55, 78]
+      ]
+    }
+  ]
+}