CartoDB · alasarr · Oct 6, 2020 · Oct 6, 2020
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules/
+node_modules/
+.DS_Store
diff --git a/deck.gl/examples/experimental/globe/README.md b/deck.gl/examples/experimental/globe/README.md
@@ -0,0 +1,9 @@
+Experimental example using a Globe
+### Usage
+
+Run
+
+```js
+yarn
+yarn start
+```
diff --git a/deck.gl/examples/experimental/globe/dist/index.html b/deck.gl/examples/experimental/globe/dist/index.html
@@ -0,0 +1,14 @@
+<!doctype html><html><head><meta charset="UTF-8"/><title>CARTO for Deck.gl example</title><style>#container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    #container > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }</style><link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet"/></head><body><div id="container"><div id="map"></div><canvas id="deck-canvas"></canvas></div><script src="js/app.62991d76.js"></script></body></html>
diff --git a/deck.gl/examples/experimental/globe/dist/js/app.62991d76.js b/deck.gl/examples/experimental/globe/dist/js/app.62991d76.js
diff --git a/deck.gl/examples/experimental/globe/package.json b/deck.gl/examples/experimental/globe/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "pure-js-carto",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open",
+    "build": "webpack --env.production"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^8.2.8",
+    "@deck.gl/layers": "^8.2.8"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^4.5.0",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.1"
+  }
+}
diff --git a/deck.gl/examples/experimental/globe/src/app.js b/deck.gl/examples/experimental/globe/src/app.js
@@ -0,0 +1,73 @@
+import {Deck, _GlobeView as GlobeView} from '@deck.gl/core';
+import {SolidPolygonLayer, GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
+
+const INITIAL_VIEW_STATE = {
+  latitude: 40.783058,
+  longitude: -73.971252,
+  zoom: 0
+};
+
+export const deck = new Deck({
+  views: new GlobeView(),
+  initialViewState: INITIAL_VIEW_STATE,
+  controller: true,
+  layers: []
+});
+
+load()
+
+async function load(){
+  const countries = await fetch('https://aasuero.carto.com/api/v2/sql?q=SELECT%20*%20FROM%20world_borders&format=geojson');
+  const countriesJSON = await countries.json();
+
+  const airports = await fetch('https://public.carto.com/api/v2/sql?q=select * from ne_10m_airports where scalerank < 4 &format=geojson');
+  const airportsJSON = await airports.json();
+
+  const layers = [
+    // A GeoJSON polygon that covers the entire earth
+    // See /docs/api-reference/globe-view.md#remarks
+    new SolidPolygonLayer({
+      id: 'background',
+      data: [
+        // prettier-ignore
+        [[-180, 90], [0, 90], [180, 90], [180, -90], [0, -90], [-180, -90]]
+      ],
+      opacity: 0.5,
+      getPolygon: d => d,
+      stroked: false,
+      filled: true,
+      getFillColor: [5, 10, 40]
+    }),
+    new GeoJsonLayer({
+      id: 'base-map',
+      data: countriesJSON,
+      // Styles
+      stroked: true,
+      filled: true,
+      lineWidthMinPixels: 2,
+      getLineColor: [5, 10, 40],
+      getFillColor: [15, 40, 80]
+    }),
+    new ArcLayer({
+      id: 'arcs',
+      data: airportsJSON.features,
+
+      // Styles
+      getSourcePosition: f => [-0.4531566, 51.4709959], // London
+      getTargetPosition: f => {
+        return f.geometry.coordinates;
+      },
+      getSourceColor: [0, 128, 200],
+      getTargetColor: [200, 0, 80],
+      getWidth: 1
+    })
+  ]
+
+  deck.setProps({ layers });
+
+}
+
+// For automated test cases
+/* global document */
+document.body.style.margin = '0px';
+document.body.style.background = '#111';
diff --git a/deck.gl/examples/experimental/globe/src/index.html b/deck.gl/examples/experimental/globe/src/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>CARTO for Deck.gl example</title>
+    <style>
+    #container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    #container > * {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    </style>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css' rel='stylesheet' />
+  </head>
+  <body>
+    <div id="container">
+      <div id="map"></div>
+      <canvas id="deck-canvas"></canvas>
+    </div>
+    <!-- <script src='app.js'></script> -->
+  </body>
+</html>
diff --git a/deck.gl/examples/experimental/globe/webpack.config.js b/deck.gl/examples/experimental/globe/webpack.config.js
@@ -0,0 +1,41 @@
+// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
+// delete the local development overrides at the bottom of this file
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const {resolve} = require('path');
+
+const CONFIG = (env) => {
+
+  const config = {
+
+    mode: 'development',
+
+    entry: {
+      app: "./src/app.js",
+    },
+
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: resolve(__dirname, 'src/index.html'),
+      })
+    ]
+  }
+
+  if (env && env.production) {
+    config.mode = 'production';
+    config.output =  {
+      // The build folder.
+      path: resolve(__dirname, 'dist'),
+      filename: 'js/[name].[contenthash:8].js',
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: 'js/[name].[contenthash:8].chunk.js'
+    }
+  }
+
+  return config;
+
+};
+
+// This line enables bundling against src in this repo rather than installed module
+module.exports = env => (env ? require('../../webpack.config.local')(CONFIG(env))(env) : CONFIG(env));