tangramLayer and marker class

.gitignore

@@ -16,3 +16,6 @@ build
 
 # storing some screenshots here
 screenshots
+
+# ignore custom vscode workspace config
+.vscode

boil.rollup.config.js

@@ -0,0 +1,99 @@
+import fs from 'fs';
+import { execSync } from 'child_process';
+
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import globals from 'rollup-plugin-node-globals';
+import builtins from 'rollup-plugin-node-builtins';
+import replace from 'rollup-plugin-replace';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+import {terser} from 'rollup-plugin-terser';
+import json from 'rollup-plugin-json';
+import string from 'rollup-plugin-string';
+
+import serve from 'rollup-plugin-serve';
+import livereload from 'rollup-plugin-livereload';
+
+const ESM = (process.env.ESM !== 'false'); // default to ESM on
+const MINIFY = (process.env.MINIFY === 'true');
+const SERVE = (process.env.SERVE === 'true');
+
+const outputFile = `../react-webpack-tangram-boilerplate/node_modules/tangram/dist/tangram.${MINIFY ? 'min' : 'debug'}.${ESM ? 'm' : ''}js`;
+
+// Use two pass code splitting and re-bundling technique, for another example see:
+// https://github.com/mapbox/mapbox-gl-js/blob/master/rollup.config.js
+
+const config = [{
+    input: ['src/index.js', 'src/scene/scene_worker.js'],
+    output: {
+        dir: 'build',
+        format: 'amd',
+        sourcemap: 'inline',
+        indent: false,
+        chunkFileNames: 'shared.js',
+    },
+    plugins: [
+        resolve({
+            browser: true,
+            preferBuiltins: false
+        }),
+        commonjs({
+            // Avoids Webpack minification errors
+            ignoreGlobal: true,
+            // There hints are required for importing jszip
+            // See https://rollupjs.org/guide/en#error-name-is-not-exported-by-module-
+            namedExports: {
+                'node_modules/process/browser.js': ['nextTick'],
+                'node_modules/events/events.js': ['EventEmitter'],
+            }
+        }),
+        json(), // load JSON files
+        string({
+            include: ['**/*.glsl'] // inline shader files
+        }),
+
+        // These are needed for jszip node-environment compatibility,
+        // previously provided by browserify
+        globals(),
+        builtins(),
+
+        MINIFY ? terser() : false,
+        babel({
+          exclude: 'node_modules/**'
+        })
+    ]
+}, {
+    // Second pass: combine the chunks from the first pass into a single bundle
+    input: 'build/bundle.js',
+    output: {
+        name: 'Tangram',
+        file: outputFile,
+        format: ESM ? 'esm' : 'umd',
+        sourcemap: MINIFY ? false : true,
+        indent: false,
+        intro: fs.readFileSync(require.resolve('./build/intro.js'), 'utf8')
+    },
+    treeshake: false,
+    plugins: [
+        replace({
+            _ESM: ESM,
+            _SHA: '\'' + String(execSync('git rev-parse HEAD')).trim(1) + '\''
+        }),
+        sourcemaps(), // use source maps produced in the first pass
+
+        // optionally start server and watch for rebuild
+        SERVE ? serve({
+            port: 8000,
+            contentBase: '',
+            headers: {
+                'Access-Control-Allow-Origin': '*'
+            }
+        }): false,
+        SERVE ? livereload({
+            watch: 'dist'
+        }) : false
+    ],
+}];
+
+export default config

demos/app/gui.js

@@ -1,18 +1,8 @@
 (function(){
-    var scene = window.scene;
     var scene_key = 'Simple';
-
     window.addEventListener('load', function () {
-        // Add search control
-        L.control.geocoder('ge-3d066b6b1c398181', {
-            url: 'https://api.geocode.earth/v1',
-            layers: 'coarse',
-            expanded: true,
-            markers: false
-        }).addTo(window.map);
-
         // Add GUI on scene load
-        layer.scene.subscribe({
+        map.scene.subscribe({
             load: function (msg) {
                 addGUI();
             }
@@ -30,13 +20,13 @@
         gui = new dat.GUI({ autoPlace: true });
         gui.domElement.parentNode.style.zIndex = 10000;
         window.gui = gui;
+        scene = window.scene;
 
         setLanguage(gui, scene);
         setCamera(gui, scene);
         setScene(gui);
         setScreenshot(gui, scene);
         setMediaRecorder(gui, scene);
-        setFeatureDebug(gui);
         setLayers(gui, scene);
     }
 
@@ -245,11 +235,4 @@
 
         }
     }
-
-    function setFeatureDebug(gui) {
-        gui.debug = scene.introspection;
-        gui.add(gui, 'debug').onChange(function(value) {
-            scene.setIntrospection(value);
-        });
-    }
 })();

demos/app/key.js

@@ -1,7 +1,7 @@
 (function(){
     window.addEventListener('load', function () {
         // Inject demo API key on load or update
-        layer.scene.subscribe({
+        map.scene.subscribe({
             load: function (msg) {
                 injectAPIKey(msg.config);
             },
@@ -12,7 +12,7 @@
     });
 
     function injectAPIKey(config) {
-        var demo_key = 'NaqqS33fTUmyQcvbuIUCKA';
+        var demo_key = 'd161Q8KATMOhSOcVGNyQ8g';
         if (config.global.sdk_api_key) {
             config.global.sdk_api_key = demo_key;
         }

demos/app/url.js

@@ -1,13 +1,17 @@
 (function(){
     var url_hash = getValuesFromUrl();
-    var map_start_location = url_hash ? url_hash.slice(0, 3) : [16, 40.70531887544228, -74.00976419448853];
+    const defaultLocation = [16, 40.70531887544228, -74.00976419448853];
+    var location = url_hash || defaultLocation;
+    var map_start_location = {lat: location[1], lng: location[2], zoom: location[0]};
 
     /*** URL parsing ***/
     // URL hash pattern #[zoom]/[lat]/[lng]
     function getValuesFromUrl() {
         var url_hash = window.location.hash.slice(1, window.location.hash.length).split('/');
         if (url_hash.length < 3 || parseFloat(url_hash[0]) === 'number') {
             url_hash = false;
+        } else {
+            url_hash = url_hash.map(x => parseFloat(x));
         }
         return url_hash;
     }
@@ -20,17 +24,22 @@
         clearTimeout(update_url_timeout);
         update_url_timeout = setTimeout(function() {
             var center = map.getCenter();
-            var url_options = [map.getZoom(), center.lat, center.lng];
+            var url_options = [Math.round(map.getZoom() * 1000)/1000, center.lat, center.lng];
 
             window.location.hash = url_options.join('/');
         }, update_url_throttle);
     }
 
-    map.on('move', updateURL);
-    map.setView(map_start_location.slice(1, 3), map_start_location[0]);
-
-    layer.on('init', function(){
-        updateURL();
-        map.setView(map_start_location.slice(1, 3), map_start_location[0]);
+    window.addEventListener('load', function () {
+        // update URL scene load
+        map.scene.subscribe({
+            load: onLoad(),
+            move: updateURL,
+        });
     });
+
+    function onLoad() {
+        map.setView(map_start_location);
+    }
+
 })();

demos/css/main.css

@@ -11,10 +11,6 @@ body {
     height: 100%;
 }
 
-div > .leaflet-pelias-control {
-    clear: right;
-}
-
 .featureTable {
     display: table;
     background: white;