├── .gitattributes
├── .gitignore
├── README.md
├── babel.config.js
├── dist
    ├── bundle.css
    ├── index.min.js
    ├── index.min.js.map
    ├── index.min.mjs
    └── index.min.mjs.map
├── package-lock.json
├── package.json
├── public
    ├── favicon.png
    ├── global.css
    └── index.html
├── rollup.config.js
└── src
    ├── App.svelte
    ├── components
        ├── Deckgl.svelte
        └── components.module.js
    └── main.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 | 
4 | .DS_Store
5 | /dist/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte DeckGL
 2 | 
 3 | ## Deck.gl and Mapbox
 4 | Head over to Deck.gl and Mapbox to see the official documentation to learn more.
 5 | 
 6 | ### Using Mapbox
 7 | ```
 8 | <script>
 9 | import { HexagonLayer } from "@deck.gl/aggregation-layers";
10 | import { SvelteDeckGL } from "./components/components.module";
11 | 
12 | const DATA_URL = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json";
13 | 
14 | const MAPBOX_TOKEN = "<YOUR_TOKEN>";
15 | 
16 | let deckInstance;
17 | 
18 | // Create you own Tooltip
19 | function getTooltip({ object }) {
20 | 	if (!object) {
21 | 		return null;
22 | 	}
23 | 
24 | 	const count = object.points.length;
25 | 
26 | 	return (
27 | 		object &&
28 | 		`${object.position.join(", ")} 
29 | 		No. of bikes: ${count} `
30 | 	);
31 | }
32 |  
33 | // Add the options for mapbox and the style
34 | let viewState = {
35 | 	longitude: -122.4,
36 | 	latitude: 37.74,
37 | 	zoom: 11,
38 | 	maxZoom: 20,
39 | 	pitch: 30,
40 | 	bearing: 0,
41 | 	style: "mapbox://styles/arperyan/cj8n10t397cyn2rkap4ybrjid",
42 | };
43 | 
44 | // Add your own layer
45 | const layers = new HexagonLayer({
46 | 	id: "hexagon-layer",
47 | 	data: DATA_URL,
48 | 	pickable: true,
49 | 	extruded: true,
50 | 	radius: 200,
51 | 	autoHighlight: true,
52 | 	elevationScale: 4,
53 | 	getPosition: (d) => d.COORDINATES,
54 | });
55 | </script>
56 | 
57 | <div class="App">
58 |   <SvelteDeckGL {layers} {viewState} {getTooltip} TOKEN={MAPBOX_TOKEN} bind:deck={deckInstance}/>
59 | </div>
60 | 
61 | <style>
62 | .App {
63 | 	height: 100%;
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   include: ['**/**/*.js', '**/**/*.mjs', '**/**/*.html', '**/**/*.svelte'],
 3 |   plugins: [
 4 |     '@babel/plugin-syntax-dynamic-import',
 5 |     [
 6 |       '@babel/plugin-transform-runtime',
 7 |       {
 8 |         useESModules: true,
 9 |       },
10 |     ],
11 |   ],
12 |   presets: ['@babel/preset-env'],
13 |   ignore: ['node_modules/**'],
14 | };
15 | 


--------------------------------------------------------------------------------
/dist/bundle.css:
--------------------------------------------------------------------------------
1 | .deck-container.svelte-n32q4g{width:100%;height:100%;position:relative}.map-container.svelte-n32q4g{position:absolute;top:0;left:0;width:100%;height:100%;background:#e5e9ec;overflow:hidden}.deck-canvas.svelte-n32q4g{position:absolute;top:0;left:0;width:100%;height:100%}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-deckgl",
 3 |   "description": "Use Deck.gl and Mapbox in svelte",
 4 |   "version": "1.0.0",
 5 |   "main": "dist/index.min.js",
 6 |   "module": "dist/index.min.mjs",
 7 |   "svelte": "src/components/components.module.js",
 8 |   "license": "MIT",
 9 |   "repository": "//https://github.com/arperyan/svelte-deckgl",
10 |   "author": "Ryan Arpe",
11 |   "files": [
12 |     "src/components",
13 |     "dist"
14 |   ],
15 |   "keywords": [
16 |     "svelte",
17 |     "deck.gl",
18 |     "mapbox"
19 |   ],
20 |   "scripts": {
21 |     "build": "rollup -c",
22 |     "dev": "rollup -c -w",
23 |     "start": "sirv public"
24 |   },
25 |   "devDependencies": {
26 |     "@babel/core": "7.10.5",
27 |     "@babel/plugin-syntax-dynamic-import": "7.8.3",
28 |     "@babel/plugin-transform-runtime": "7.10.5",
29 |     "@babel/preset-env": "7.10.4",
30 |     "@rollup/plugin-commonjs": "^17.0.0",
31 |     "@rollup/plugin-node-resolve": "^11.0.0",
32 |     "rollup": "^2.3.4",
33 |     "rollup-plugin-babel": "^4.4.0",
34 |     "rollup-plugin-css-only": "^3.1.0",
35 |     "rollup-plugin-livereload": "^2.0.0",
36 |     "rollup-plugin-peer-deps-external": "^2.2.4",
37 |     "rollup-plugin-replace": "2.2.0",
38 |     "rollup-plugin-svelte": "^7.0.0",
39 |     "rollup-plugin-terser": "^7.0.0",
40 |     "@deck.gl/core": "^8.3.0",
41 |     "svelte": "^3.0.0"
42 |   },
43 |   "dependencies": {
44 |     "@deck.gl/aggregation-layers": "^8.3.0",
45 |     "@deck.gl/core": "^8.3.0",
46 |     "@deck.gl/layers": "^8.3.0",
47 |     "mapbox-gl": "^1.12.0",
48 |     "sirv-cli": "^1.0.0"
49 |   },
50 |   "peerDependencies": {
51 |     "@deck.gl/core": "^8.3.0"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/arperyan/svelte-deckgl/d1af6c82aa103ba78d1714ebbce0e67c7cd34f29/public/favicon.png


--------------------------------------------------------------------------------
/public/global.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 | 	position: relative;
 3 | 	width: 100%;
 4 | 	height: 100%;
 5 | }
 6 | 
 7 | body {
 8 | 	color: #333;
 9 | 	margin: 0;
10 | 	padding: 8px;
11 | 	box-sizing: border-box;
12 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 | 
15 | a {
16 | 	color: rgb(0,100,200);
17 | 	text-decoration: none;
18 | }
19 | 
20 | a:hover {
21 | 	text-decoration: underline;
22 | }
23 | 
24 | a:visited {
25 | 	color: rgb(0,80,160);
26 | }
27 | 
28 | label {
29 | 	display: block;
30 | }
31 | 
32 | input, button, select, textarea {
33 | 	font-family: inherit;
34 | 	font-size: inherit;
35 | 	-webkit-padding: 0.4em 0;
36 | 	padding: 0.4em;
37 | 	margin: 0 0 0.5em 0;
38 | 	box-sizing: border-box;
39 | 	border: 1px solid #ccc;
40 | 	border-radius: 2px;
41 | }
42 | 
43 | input:disabled {
44 | 	color: #ccc;
45 | }
46 | 
47 | button {
48 | 	color: #333;
49 | 	background-color: #f4f4f4;
50 | 	outline: none;
51 | }
52 | 
53 | button:disabled {
54 | 	color: #999;
55 | }
56 | 
57 | button:not(:disabled):active {
58 | 	background-color: #ddd;
59 | }
60 | 
61 | button:focus {
62 | 	border-color: #666;
63 | }
64 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset='utf-8'>
 5 | 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 6 | 
 7 | 	<title>Svelte app</title>
 8 | 
 9 | 	<link rel='icon' type='image/png' href='/favicon.png'>
10 | 	<link rel='stylesheet' href='/global.css'>
11 | 	<link rel='stylesheet' href='/build/bundle.css'>
12 | 
13 | 	<script type="module" src='/build/bundle.js'></script>
14 | </head>
15 | 
16 | <body>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
  1 | import svelte from 'rollup-plugin-svelte';
  2 | import commonjs from '@rollup/plugin-commonjs';
  3 | import resolve from '@rollup/plugin-node-resolve';
  4 | import livereload from 'rollup-plugin-livereload';
  5 | import replace from "rollup-plugin-replace"
  6 | import babel from 'rollup-plugin-babel';
  7 | import pkg from './package.json';
  8 | import {
  9 | 	terser
 10 | } from 'rollup-plugin-terser';
 11 | import css from 'rollup-plugin-css-only';
 12 | 
 13 | const production = !process.env.ROLLUP_WATCH;
 14 | 
 15 | 
 16 | export default {
 17 | 	input: !production ? 'src/main.js' : 'src/components/components.module.js',
 18 | 	output: !production ? {
 19 | 		sourcemap: true,
 20 | 		format: 'iife',
 21 | 		name: 'app',
 22 | 		file: 'public/build/bundle.js',
 23 | 		globals: {
 24 | 			'@deck.gl/core': 'core',
 25 | 			'@deck.gl/layers': 'layers'
 26 | 		}
 27 | 	} : [{
 28 | 			file: pkg.module,
 29 | 			format: 'es',
 30 | 			sourcemap: true,
 31 | 			name: pkg.name,
 32 | 			globals: {
 33 | 				'@deck.gl/core': 'core',
 34 | 				'@deck.gl/layers': 'layers'
 35 | 			}
 36 | 		},
 37 | 		{
 38 | 			file: pkg.main,
 39 | 			format: 'umd',
 40 | 			sourcemap: true,
 41 | 			name: pkg.name,
 42 | 			globals: {
 43 | 				'@deck.gl/core': 'core',
 44 | 				'@deck.gl/layers': 'layers'
 45 | 
 46 | 			}
 47 | 		}
 48 | 
 49 | 	],
 50 | 	plugins: [
 51 | 		svelte({
 52 | 			compilerOptions: {
 53 | 				// enable run-time checks when not in production
 54 | 				dev: !production
 55 | 			},
 56 | 			css: (css) => {
 57 | 				css.write('public/build/bundle.css');
 58 | 			},
 59 | 		}),
 60 | 		css({
 61 | 			output: 'bundle.css'
 62 | 		}),
 63 | 		babel({
 64 | 			runtimeHelpers: true,
 65 | 		}),
 66 | 		// css({
 67 | 		// 	output: 'bundle.css'
 68 | 		// }),
 69 | 		replace({
 70 | 			'process.env.NODE_ENV': JSON.stringify('production'),
 71 | 		}),
 72 | 
 73 | 		// we'll extract any component CSS out into
 74 | 		// a separate file - better for performance
 75 | 
 76 | 
 77 | 		// If you have external dependencies installed from
 78 | 		// npm, you'll most likely need these plugins. In
 79 | 		// some cases you'll need additional configuration -
 80 | 		// consult the documentation for details:
 81 | 		// https://github.com/rollup/plugins/tree/master/packages/commonjs
 82 | 		resolve({
 83 | 			browser: true,
 84 | 			dedupe: ['svelte']
 85 | 		}),
 86 | 		commonjs({
 87 | 			include: ['node_modules/**'],
 88 | 		}),
 89 | 
 90 | 		// In dev mode, call `npm run start` once
 91 | 		// the bundle has been generated
 92 | 		!production && serve(),
 93 | 
 94 | 		// Watch the `public` directory and refresh the
 95 | 		// browser on changes when not in production
 96 | 		!production && livereload('public'),
 97 | 
 98 | 		// If we're building for production (npm run build
 99 | 		// instead of npm run dev), minify
100 | 		production && terser()
101 | 	],
102 | 	// external: ["@deck.gl/core"],
103 | 	watch: {
104 | 		clearScreen: false
105 | 	}
106 | };
107 | 
108 | 
109 | function serve() {
110 | 	let server;
111 | 
112 | 	function toExit() {
113 | 		if (server) server.kill(0);
114 | 	}
115 | 
116 | 	return {
117 | 		writeBundle() {
118 | 			if (server) return;
119 | 			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
120 | 				stdio: ['ignore', 'inherit', 'inherit'],
121 | 				shell: true
122 | 			});
123 | 
124 | 			process.on('SIGTERM', toExit);
125 | 			process.on('exit', toExit);
126 | 		}
127 | 	};
128 | }


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { HexagonLayer } from "@deck.gl/aggregation-layers";
 3 |     import layer from "@deck.gl/core/dist/es5/lib/layer";
 4 |     import { afterUpdate, onMount } from "svelte";
 5 |     import { SvelteDeckGL } from "./components/components.module";
 6 | 
 7 |     export let data;
 8 | 
 9 |     //const DATA_URL = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-bike-parking.json";
10 |     let DATA_URL = "";
11 |     const MAPBOX_TOKEN = "pk.eyJ1IjoiYXJwZXJ5YW4iLCJhIjoiY2l4cTJkc2t6MDAzcjJxcG9maWp1ZmFjMCJ9.XT957ywrTABjNFqGdp_37g";
12 | 
13 |     let urlData = "";
14 |     let deckInstance;
15 | 
16 |     const qlikData = () => {
17 |         let obj = [];
18 | 
19 |         let newData = data?.qHyperCube.qDataPages[0].qMatrix.map((array) => {
20 |             obj = { COORDINATES: [Number(array[0].qText), Number(array[1].qText)] };
21 |             return obj;
22 |         });
23 |         return newData;
24 |     };
25 | 
26 |     onMount(() => {
27 |         layers();
28 |     });
29 | 
30 |     function getTooltip({ object }) {
31 |         if (!object) {
32 |             return null;
33 |         }
34 | 
35 |         const count = object.points.length;
36 | 
37 |         return object && `No. of bikes: ${count} `;
38 |     }
39 |     let viewState = {
40 |         longitude: -122.4,
41 |         latitude: 37.8,
42 |         zoom: 11.2,
43 |         maxZoom: 20,
44 |         pitch: 50,
45 |         bearing: -60,
46 |         style: "mapbox://styles/arperyan/cj8n10t397cyn2rkap4ybrjid",
47 |     };
48 | 
49 |     function layers() {
50 |         return new HexagonLayer({
51 |             id: "hexagon-layer",
52 |             // data: data?.qHyperCube.qDataPages[0].qMatrix,
53 |             //data: qlikData(),
54 |             data: DATA_URL,
55 |             pickable: true,
56 |             extruded: true,
57 |             radius: 200,
58 |             autoHighlight: true,
59 |             elevationScale: 4,
60 |             getPosition: (d) => d.COORDINATES,
61 |         });
62 |     }
63 | 
64 |     /**
65 |      *
66 |      * @function dataChange - update the data using two way bimding
67 |      */
68 |     function dataChange() {
69 |         deckInstance.setProps({ layers: [layers()] });
70 |     }
71 |     $: layers2 = layers();
72 | </script>
73 | 
74 | <div class="App">
75 |     <input type="text" bind:value={DATA_URL} /><button on:click={dataChange}>Update</button>
76 |     <SvelteDeckGL layers={layers2} {viewState} {getTooltip} TOKEN={MAPBOX_TOKEN} bind:deck={deckInstance} />
77 | </div>
78 | 
79 | <style>
80 |     .App {
81 |         height: 100vh;
82 |         width: 100vw;
83 |     }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/src/components/Deckgl.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     import { Deck } from "@deck.gl/core";
  3 |     import mapbox from "mapbox-gl";
  4 |     import { onMount } from "svelte";
  5 |     // import { layerState } from "../../../svelte-deckgl/src/App.svelte";
  6 | 
  7 |     /** @type {Object.<string, number>}*/
  8 |     let map = null;
  9 |     /** @type {Object.<string, number>}*/
 10 |     export let deck = null;
 11 |     /** @type {HTMLElement} */
 12 |     let deckMap = null;
 13 |     /** @type {HTMLElement} */
 14 |     let deckCanvas = null;
 15 |     /** @type {Object.<string, number>} - mapbox gl extra view States*/
 16 |     let options = {};
 17 | 
 18 |     /** @type {Array.<string, object>}*/
 19 |     export let layers = [];
 20 |     /** @type {Object.<string, number>}*/
 21 |     export let viewState = {};
 22 |     /** @type {String}*/
 23 |     export let TOKEN = null;
 24 |     /** @type {Function} */
 25 |     export let getTooltip = () => {};
 26 |     $: console.log(layers);
 27 |     onMount(() => {
 28 |         // creating the map
 29 | 
 30 |         mapbox.accessToken = TOKEN;
 31 |         const link = document.createElement("link");
 32 |         link.rel = "stylesheet";
 33 |         link.type = "text/css";
 34 |         link.href = "https://unpkg.com/mapbox-gl/dist/mapbox-gl.css";
 35 | 
 36 |         const optionsWithDefaults = Object.assign(
 37 |             {
 38 |                 container: deckMap,
 39 |                 style: viewState.style,
 40 |                 center: [viewState.longitude, viewState.latitude],
 41 |                 zoom: viewState.zoom,
 42 |                 interactive: false,
 43 |                 bearing: viewState.bearing,
 44 |                 pitch: viewState.pitch,
 45 |             },
 46 |             options
 47 |         );
 48 | 
 49 |         document.head.appendChild(link);
 50 | 
 51 |         link.onload = () => {
 52 |             map = new mapbox.Map(optionsWithDefaults);
 53 |             render();
 54 |             deck.setProps({ layers: [layers] });
 55 |         };
 56 | 
 57 |         return () => {
 58 |             map.remove();
 59 |             link.parentNode.removeChild(link);
 60 |         };
 61 |     });
 62 | 
 63 |     //$: console.log($layerState);
 64 | 
 65 |     // creating the deck.gl instance
 66 |     function render() {
 67 |         deck = new Deck({
 68 |             canvas: deckCanvas,
 69 |             width: "100%",
 70 |             height: "100%",
 71 |             initialViewState: viewState,
 72 |             controller: true,
 73 |             layers: [],
 74 |             onViewStateChange: ({ viewState }) => {
 75 |                 map.jumpTo({
 76 |                     center: [viewState.longitude, viewState.latitude],
 77 |                     zoom: viewState.zoom,
 78 |                     bearing: viewState.bearing,
 79 |                     pitch: viewState.pitch,
 80 |                 });
 81 |             },
 82 | 
 83 |             getTooltip,
 84 |         });
 85 | 
 86 |         //
 87 |     }
 88 | </script>
 89 | 
 90 | <div class="deck-container">
 91 |     <div class="map-container" bind:this={deckMap} />
 92 |     <canvas class="deck-canvas" bind:this={deckCanvas} />
 93 | </div>
 94 | 
 95 | <style>
 96 |     .deck-container {
 97 |         width: 100%;
 98 |         height: 100%;
 99 |         position: relative;
100 |     }
101 | 
102 |     .map-container {
103 |         position: absolute;
104 |         top: 0;
105 |         left: 0;
106 |         width: 100%;
107 |         height: 100%;
108 |         background: #e5e9ec;
109 |         overflow: hidden;
110 |     }
111 | 
112 |     .deck-canvas {
113 |         position: absolute;
114 |         top: 0;
115 |         left: 0;
116 |         width: 100%;
117 |         height: 100%;
118 |     }
119 | </style>
120 | 


--------------------------------------------------------------------------------
/src/components/components.module.js:
--------------------------------------------------------------------------------
1 | export {
2 |     default as SvelteDeckGL
3 | }
4 | from './Deckgl.svelte';


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import App from "./App.svelte";
2 | 
3 | const app = new App({
4 |   target: document.body,
5 | });
6 | 
7 | export default app;
8 | 


--------------------------------------------------------------------------------