mutablelogic
diff --git a/‎config/esbuild.geojson.mjs
+40 b/‎config/esbuild.geojson.mjs
+40
diff --git a/‎example/esbuild.js
+1-1 b/‎example/esbuild.js
+1-1
diff --git a/‎example/data.json ‎example/geojson/data.json b/‎example/data.json ‎example/geojson/data.json
diff --git a/‎example/hala-white-132x132.svg ‎example/geojson/hala-white-132x132.svg b/‎example/hala-white-132x132.svg ‎example/geojson/hala-white-132x132.svg
diff --git a/‎example/geojson/index.html
+43 b/‎example/geojson/index.html
+43
diff --git a/‎example/geojson/index.js
+31 b/‎example/geojson/index.js
+31
@@ -0,0 +1,40 @@
+import esbuild from 'esbuild';
+
+const commonOptions = {
+  outdir: 'dist',
+  format: 'esm',
+  bundle: true,
+  loader: {
+    '.svg': 'file',
+    '.woff': 'file',
+    '.woff2': 'file',
+    '.ttf': 'file',
+    '.otf': 'file',
+    '.html': 'copy',
+    '.json': 'copy',
+  },
+  logLevel: 'info',
+  entryPoints: [],
+};
+
+if (process.env.NODE_ENV === 'production') {
+  commonOptions.entryPoints.push('src/index.js');
+  await esbuild.build({
+    ...commonOptions,
+    entryPoints: ['src/index.js'],
+    minify: true,
+    sourcemap: false,
+  }).catch(() => process.exit(1));
+} else {
+  commonOptions.entryPoints.push('example/geojson/index.html', 'example/geojson/index.js', 'example/geojson/data.json');
+  let ctx = await esbuild.context({
+    ...commonOptions,
+    minify: false,
+    sourcemap: true,
+  })
+
+  let { host, port } = await ctx.serve({
+    servedir: commonOptions.outdir,
+  });
+  await ctx.watch();
+}
@@ -1,5 +1,5 @@
 /* Code to reload in the esbuild serve development environment */
 window.addEventListener('load', () => {
   // eslint-disable-next-line no-restricted-globals
-  new EventSource('/esbuild').addEventListener('change', () => location.reload());
+  //new EventSource('/esbuild').addEventListener('change', () => location.reload());
 });
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GeoJSON viewer</title>
+  <script type="module" src="index.js" defer></script>
+  <link href="index.css" rel="stylesheet">
+</head>
+
+<body>
+  <js-canvas>
+    <js-nav vertical>
+      <js-navitem disabled><js-image id="icon"></js-image></js-navitem>
+      <js-navitem>Home</js-navitem>
+    </js-nav>
+
+    <js-content>
+      <!-- the map -->
+      <js-map id="map"
+        accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
+        <!-- add a source from the array (must currently be an array of GeoJSON features) -->
+        <js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
+
+        <!-- display the source on the map -->
+        <js-maplayer id="points" source="#area" type="fill" paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
+      </js-map>
+    </js-content>
+
+  </js-canvas>
+
+  <!-- contains the GeoJSON data -->
+  <js-array id="array" provider="#provider"></js-array>
+
+  <!-- data source which updates when the event source /esbuild changes -->
+  <js-provider id="provider" path="data.json" eventsource="/esbuild"></js-provider>
+
+  <!-- toast which persists on the screen for 1 second -->
+  <js-toast id="toast" duration="1"></js-toast>
+</body>
+
+</html>
@@ -0,0 +1,31 @@
+// This file defines all the styles and elements used for the web components
+import '../../src/index';
+import '../esbuild';
+import hala from './hala-white-132x132.svg';
+import { EventType } from '../../src/core/EventType';
+
+window.addEventListener('load', () => {
+  // Brand
+  const icon = document.querySelector('#icon');
+  if (icon) {
+    icon.src = hala;
+  }
+
+  // Set toast when error or done
+  const provider = document.querySelector('#provider');
+  const toast = document.querySelector('#toast');
+
+  provider.addEventListener(EventType.ERROR, (e) => {
+    toast.visible = true;
+    toast.duration = 10;
+    toast.color = 'error';
+    toast.innerHTML = `${e.detail}<js-close></js-close>`;
+  });
+
+  provider.addEventListener(EventType.DONE, (e) => {
+    toast.visible = true;
+    toast.duration = 10;
+    toast.color = 'info';
+    toast.innerHTML = 'Data Reloaded&nbsp;&nbsp;<js-close></js-close>';
+  });
+});