visgl · MeTaNoV · Aug 9, 2018 · Aug 10, 2018
diff --git a/examples/get-started/pure-js-google-maps/app.js b/examples/get-started/pure-js-google-maps/app.js
@@ -0,0 +1,86 @@
+import {Deck} from '@deck.gl/core';
+import {GeoJsonLayer} from '@deck.gl/layers';
+
+// Outlines of US States. Source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
+const US_MAP_GEOJSON =
+  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_1_states_provinces_shp.geojson'; //eslint-disable-line
+
+const INITIAL_VIEW_STATE = {
+  latitude: 40,
+  longitude: -100,
+  zoom: 11,
+  // Set back the pitch to 0 (30 in the other demos)
+  pitch: 0
+};
+
+// Retrieving GOOGLE_MAPS_API_KEY from the environment variable
+const GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY; // eslint-disable-line
+const gmUrl = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=visualization`
+
+function loadScript(url) {
+  const script = document.createElement( 'script' );
+  script.id = 'decoder_script';
+  script.type = 'text/javascript';
+  script.src = url;
+
+  const head = document.getElementsByTagName( 'head' )[ 0 ];
+  head.appendChild( script );
+
+  return new Promise(resolve => {
+    script.onload = resolve;
+  });
+};
+
+function initMap() {
+  const map = new google.maps.Map(
+    document.getElementById('map'),
+    {
+      mapTypeId: 'hybrid',
+      center: {
+        lat: INITIAL_VIEW_STATE.latitude, 
+        lng: INITIAL_VIEW_STATE.longitude
+      },
+      // Adding 1 to the zoom level get us close to each other
+      zoom: INITIAL_VIEW_STATE.zoom+1,
+      tilt: INITIAL_VIEW_STATE.pitch,
+      gestureHandling: 'none'
+    }
+  );
+
+  const deck = new Deck({
+    canvas: 'deck-canvas',
+    width: '100%',
+    height: '100%',
+    initialViewState: INITIAL_VIEW_STATE,
+    // Google maps has no rotating capabilities, so we disable rotation here.
+    controller: {
+      dragRotate: false
+    },
+    onViewStateChange: ({viewState}) => {
+      map.setOptions({
+        center: {
+          lat: viewState.latitude, 
+          lng: viewState.longitude
+        },
+        // Adding 1 to the zoom level get us close to each other
+        zoom: viewState.zoom+1,
+        tilt: viewState.pitch,
+      });
+    },
+    layers: [
+      new GeoJsonLayer({
+        data: US_MAP_GEOJSON,
+        stroked: true,
+        filled: true,
+        lineWidthMinPixels: 2,
+        opacity: 0.4,
+        getLineColor: [255, 100, 100],
+        getFillColor: [200, 160, 0, 180]
+      })
+    ]
+  });
+}
+
+loadScript(gmUrl).then(() => {
+  initMap()
+})
diff --git a/examples/get-started/pure-js-google-maps/index.html b/examples/get-started/pure-js-google-maps/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>deck.gl w/ Google Maps 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>
+  </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/examples/get-started/pure-js-google-maps/package.json b/examples/get-started/pure-js-google-maps/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "pure-js-google-maps",
+  "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": "NODE_ENV=production webpack --env.prod=true"
+  },
+  "dependencies": {
+    "@deck.gl/core": "^6.0.0",
+    "@deck.gl/layers": "^6.0.0"
+  },
+  "devDependencies": {
+    "buble": "^0.19.3",
+    "buble-loader": "^0.5.0",
+    "webpack": "^4.3.0",
+    "webpack-cli": "^2.0.13",
+    "webpack-dev-server": "^3.1.1"
+  }
+}
diff --git a/examples/get-started/pure-js-google-maps/webpack.config.js b/examples/get-started/pure-js-google-maps/webpack.config.js
@@ -0,0 +1,20 @@
+// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
+// delete the local development overrides at the bottom of this file
+
+// avoid destructuring for older Node version support
+const resolve = require('path').resolve;
+const webpack = require('webpack');
+
+const CONFIG = {
+  mode: 'development',
+
+  entry: {
+    app: resolve('./app.js')
+  },
+
+  // Optional: Enables reading Google Maps API Key from environment variable
+  plugins: [new webpack.EnvironmentPlugin(['GOOGLE_MAPS_API_KEY'])]
+};
+
+// This line enables bundling against src in this repo rather than installed module
+module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);