Merge b782814 into d569e25

docs/api-reference/arcgis/arcgis-deck-layer.md

@@ -0,0 +1,53 @@
+# ArcGISDeckLayer
+
+This class inherits from the ArcGIS [Layer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html) class and can be added to maps created with the ArcGIS API for JavaScript. Its content is defined by the `deckLayers` property, which is a collection of deck.gl layers.
+
+## Usage
+
+```js
+import {loadArcGISModules} from '@deck.gl/arcgis';
+import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
+
+loadArcGISModules([
+  "esri/Map",
+  "esri/views/MapView"
+]).then(([
+  arcGIS,
+  ArcGISMap,
+  MapView
+]) => {
+  const layer = new arcGIS.ArcGISDeckLayer({
+    deckLayers: [
+      new GeoJsonLayer({
+        ...
+      }),
+      new ArcLayer({
+        ...
+      })
+    ]
+  });
+
+  const mapView = new MapView({
+    container: "viewDiv",
+    map: new ArcGISMap({
+      basemap: "dark-gray-vector",
+      layers: [layer]
+    }),
+    center: [0.119167, 52.205276],
+    zoom: 5
+  });
+});
+```
+
+
+## Constructor
+
+```js
+const layer = new arcGIS.ArcGISDeckLayer(props)
+```
+
+`props` are forwarded to a `Deck` instance. The following [Deck](/docs/api-reference/deck.md) props are supported:
+
+- `deckLayers` is forwarded to `layers`
+- `effects`
+- `parameters`

docs/api-reference/arcgis/overview.md

@@ -0,0 +1,75 @@
+# @deck.gl/arcgis
+
+Use deck.gl layers with the ArcGIS API for JavaScript.
+
+The functionality exported by this module must be loaded asynchronously using the loader function `loadArcGISModules`.
+This function can be used to load any module that ships with the ArcGIS API for JavaScript, plus an additional `arcGIS` module
+that acts as an interface between deck.gl and ArcGIS.
+
+At the moment only 2D integration with `MapView` is supported; it is provided by the `arcGIS.ArcGISDeckLayer` class.
+
+## Installation
+
+### Include the Standalone Bundle
+
+```html
+<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
+<!-- or -->
+<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
+<script src="https://unpkg.com/@deck.gl/arcgis@^1.0.0/dist.min.js"></script>
+<!-- usage -->
+<script type="text/javascript">
+deck.loadArcGISModules([
+  "esri/Map",
+  "esri/views/MapView"
+]).then(([
+  arcGIS,
+  ArcGISMap,
+  MapView
+]) => {
+  const {ArcGISDeckLayer} = arcGIS;
+  ...
+</script>
+```
+
+### Install from NPM
+
+```bash
+npm install deck.gl
+# or
+npm install @deck.gl/core @deck.gl/arcgis
+```
+
+```js
+import {loadArcGISModules} from '@deck.gl/arcgis';
+
+loadArcGISModules([
+  "esri/Map",
+  "esri/views/MapView"
+]).then(([
+  arcGIS,
+  ArcGISMap,
+  MapView
+]) => {
+  const {ArcGISDeckLayer} = arcGIS;
+  ...
+</script>
+```
+
+## Supported Features and Limitations
+
+Supported deck.gl features:
+
+- Layers
+- Effects
+- Attribute transitions
+
+Not supported features:
+
+- Tilting
+- Views
+- Controller
+- React integration
+- Gesture event callbacks (e.g. `onDrag*`)
+- Auto-highlighting
+- `onHover` and `onClick` callbacks

examples/get-started/pure-js/arcgis/README.md

@@ -0,0 +1,23 @@
+<div align="center">
+   <img width="150" heigth="150" src="https://webpack.js.org/assets/icon-square-big.svg" />
+</div>
+
+## Example: Use deck.gl with Esri ArcGIS API for JavaScript
+
+This sample shows how to use the `@deck.gl/arcgis` module to add a deck.gl layer to an [ArcGIS JavaScript](https://developers.arcgis.com/javascript/) app.
+Uses [Webpack](https://github.com/webpack/webpack) and the [ArcGIS Webpack plugin](https://github.com/Esri/arcgis-webpack-plugin)
+to bundle files and serves it with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
+
+## Usage
+
+To install dependencies:
+
+```bash
+npm install
+# or
+yarn
+```
+
+Commands:
+* `npm start` is the development target, to serves the app and hot reload.
+* `npm run build` is the production target, to create the final bundle and write to disk.

examples/get-started/pure-js/arcgis/app.js

@@ -0,0 +1,53 @@
+import {loadArcGISModules} from '@deck.gl/arcgis';
+import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
+
+// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
+const AIR_PORTS =
+  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
+
+loadArcGISModules(['esri/Map', 'esri/views/MapView']).then(([arcGIS, ArcGISMap, MapView]) => {
+  const layer = new arcGIS.ArcGISDeckLayer({
+    deckLayers: [
+      new GeoJsonLayer({
+        id: 'airports',
+        data: AIR_PORTS,
+        // Styles
+        filled: true,
+        pointRadiusMinPixels: 2,
+        pointRadiusScale: 2000,
+        getRadius: f => 11 - f.properties.scalerank,
+        getFillColor: [200, 0, 80, 180],
+        // Interactive props
+        pickable: true,
+        autoHighlight: true,
+        onClick: info =>
+          // eslint-disable-next-line
+          info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
+      }),
+      new ArcLayer({
+        id: 'arcs',
+        data: AIR_PORTS,
+        dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
+        // Styles
+        getSourcePosition: f => [-0.4531566, 51.4709959], // London
+        getTargetPosition: f => f.geometry.coordinates,
+        getSourceColor: [0, 128, 200],
+        getTargetColor: [200, 0, 80],
+        getWidth: 1
+      })
+    ]
+  });
+
+  // In the ArcGIS API for JavaScript the MapView is responsible
+  // for displaying a Map, which usually contains at least a basemap.
+  // eslint-disable-next-line
+  const mapView = new MapView({
+    container: 'viewDiv',
+    map: new ArcGISMap({
+      basemap: 'dark-gray-vector',
+      layers: [layer]
+    }),
+    center: [0.119167, 52.205276],
+    zoom: 5
+  });
+});

examples/get-started/pure-js/arcgis/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>deck.gl w/ Esri ArcGIS API for JavaScript example</title>
+    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css"/>
+    <style>
+      html,
+      body,
+      #viewDiv {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="viewDiv"></div>
+    <script src='app.js'></script>
+  </body>
+</html>

examples/get-started/pure-js/arcgis/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "pure-js-esri-arcgis",
+  "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 -p"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^8.0.0",
+    "@deck.gl/layers": "^8.0.0"
+  },
+  "devDependencies": {
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.1"
+  }
+}

examples/get-started/pure-js/arcgis/webpack.config.js

@@ -0,0 +1,13 @@
+// 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 CONFIG = {
+  mode: 'development',
+
+  entry: {
+    app: './app.js'
+  }
+};
+
+// This line enables bundling against src in this repo rather than installed module
+module.exports = env => (env ? require('../../../webpack.config.local')(CONFIG)(env) : CONFIG);

modules/arcgis/bundle.js

@@ -0,0 +1,12 @@
+const ArcGISUtils = require('./src');
+
+/* global window, global */
+const _global = typeof window === 'undefined' ? global : window;
+const deck = _global.deck || {};
+
+// Check if peer dependencies are included
+if (!deck.Layer) {
+  throw new Error('@deck.gl/core is not found');
+}
+
+module.exports = Object.assign(deck, ArcGISUtils);

modules/arcgis/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@deck.gl/arcgis",
+  "version": "0.0.1",
+  "main": "index.js",
+  "license": "Apache-2.0",
+  "scripts": {
+    "build-bundle": "../../node_modules/.bin/webpack --config ../../scripts/bundle.config.js"
+  },
+  "peerDependencies": {
+    "@deck.gl/core": "^8.0.0"
+  },
+  "dependencies": {
+    "esri-loader": "^2.13.0"
+  }
+}

modules/arcgis/src/arcgis-deck-external-renderer.js

@@ -0,0 +1,92 @@
+/* eslint-disable no-invalid-this */
+
+import {
+  initializeResources,
+  createOrResizeFramebuffer,
+  createFramebuffer,
+  destroyFramebuffer,
+  initializeDeckGL
+} from './commons';
+
+export default function loadArcGISDeckExternalRenderer(externalRenderers, Collection) {
+  function ArcGISDeckExternalRenderer(view, conf) {
+    this.view = view;
+    this.deckLayers = new Collection();
+    this.deckLayers.addMany(conf.deckLayers);
+  }
+  ArcGISDeckExternalRenderer.prototype.initializeResources = initializeResources;
+  ArcGISDeckExternalRenderer.prototype.createOrResizeFramebuffer = createOrResizeFramebuffer;
+  ArcGISDeckExternalRenderer.prototype.createFramebuffer = createFramebuffer;
+  ArcGISDeckExternalRenderer.prototype.destroyFramebuffer = destroyFramebuffer;
+  ArcGISDeckExternalRenderer.prototype.initializeDeckGL = initializeDeckGL;
+
+  function setup(context) {
+    const gl = context.gl;
+    this.initializeResources(gl);
+    // eslint-disable-next-line
+    const dpr = window.devicePixelRatio;
+    this.createFramebuffer(
+      gl,
+      Math.round(this.view.size[0] * dpr),
+      Math.round(this.view.size[1] * dpr)
+    );
+    this.initializeDeckGL(gl);
+    this.deckLayers.on('change', () => {
+      externalRenderers.requestRender(this.view);
+    });
+  }
+
+  ArcGISDeckExternalRenderer.prototype.setup = setup;
+
+  function render(context) {
+    const gl = context.gl;
+    const screenFbo = gl.getParameter(gl.FRAMEBUFFER_BINDING);
+
+    // eslint-disable-next-line
+    const dpr = window.devicePixelRatio;
+    this.createOrResizeFramebuffer(
+      gl,
+      Math.round(this.view.size[0] * dpr),
+      Math.round(this.view.size[1] * dpr)
+    );
+
+    this.deckgl.setProps({
+      layers: this.deckLayers.items.slice(),
+      viewState: {
+        latitude: this.view.center.latitude,
+        longitude: this.view.center.longitude,
+        zoom: this.view.zoom,
+        bearing: this.view.camera.heading,
+        pitch: this.view.camera.tilt
+      }
+    });
+
+    gl.activeTexture(gl.TEXTURE0 + 0);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+
+    this.deckgl.redraw(true);
+
+    // We overlay the texture on top of the map using the full-screen quad.
+    gl.bindFramebuffer(gl.FRAMEBUFFER, screenFbo);
+    gl.viewport(0, 0, Math.round(this.view.size[0] * dpr), Math.round(this.view.size[1] * dpr));
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+    gl.vertexAttribPointer(0, 2, gl.BYTE, false, 2, 0);
+    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+    gl.useProgram(this.program);
+    gl.uniform1i(this.uTexture, 0);
+    gl.activeTexture(gl.TEXTURE0 + 0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+    gl.enableVertexAttribArray(0);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  }
+
+  ArcGISDeckExternalRenderer.prototype.render = render;
+
+  return ArcGISDeckExternalRenderer;
+}