chore(examples): Remove framework-specific examples

CartoDB · Jan 7, 2025 · 86e9c9f · 86e9c9f
1 parent efebb5c
commit 86e9c9f
Show file tree

Hide file tree

Showing 20 changed files with 187 additions and 1,045 deletions.
diff --git a/examples/01-pure-js/pure-js.ts → examples/01-basic/app.ts b/examples/01-pure-js/pure-js.ts → examples/01-basic/app.ts
diff --git a/examples/01-pure-js/index.html → examples/01-basic/index.html b/examples/01-pure-js/index.html → examples/01-basic/index.html
@@ -58,6 +58,6 @@ <h1>Pure JS</h1>
       </section>
       <footer id="footer"></footer>
     </main>
-    <script type="module" src="./pure-js.ts"></script>
+    <script type="module" src="./app.ts"></script>
   </body>
 </html>
diff --git a/examples/02-react/app.tsx b/examples/02-react/app.tsx
diff --git a/examples/02-react/index.html b/examples/02-react/index.html
diff --git a/examples/02-react/react.tsx b/examples/02-react/react.tsx
diff --git a/examples/02-spatial-index/app.ts b/examples/02-spatial-index/app.ts
@@ -0,0 +1,106 @@
+import maplibregl from 'maplibre-gl';
+import {Deck} from '@deck.gl/core';
+import {H3TileLayer} from '@deck.gl/carto';
+import {Filter, h3TableSource, H3TableSourceResponse} from '@carto/api-client';
+import '../components/index.js';
+import type {Widget, FilterEvent} from '../components/index.js';
+
+/**************************************************************************
+ * REACTIVE STATE
+ */
+
+let data: Promise<H3TableSourceResponse>;
+let viewState = {latitude: 37.375, longitude: -5.996, zoom: 6};
+let filters: Record<string, Filter> = {};
+
+/**************************************************************************
+ * DECK.GL
+ */
+
+const deck = new Deck({
+  canvas: 'deck-canvas',
+  initialViewState: viewState,
+  controller: true,
+  layers: [],
+});
+
+const map = new maplibregl.Map({
+  container: 'map',
+  style:
+    'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
+  interactive: false,
+});
+
+deck.setProps({
+  onViewStateChange: (params) => {
+    viewState = params.viewState;
+    const {longitude, latitude, ...rest} = viewState;
+    map.jumpTo({center: [longitude, latitude], ...rest});
+    updateWidgets();
+  },
+});
+
+const widgets: Widget[] = [
+  bindWidget('#formula'),
+  bindWidget('#category'),
+  bindWidget('#pie'),
+  bindWidget('#table'),
+  bindWidget('#scatter'),
+  bindWidget('#histogram'),
+];
+
+updateSources();
+
+/**************************************************************************
+ * UPDATES
+ */
+
+function updateSources() {
+  data = h3TableSource({
+    accessToken: import.meta.env.VITE_CARTO_ACCESS_TOKEN,
+    connectionName: 'carto_dw',
+    tableName:
+      'carto-demo-data.demo_tables.derived_spatialfeatures_esp_h3res8_v1_yearly_v2',
+    filters,
+    aggregationExp: 'sum(population) as population',
+  });
+
+  updateLayers();
+  updateWidgets();
+}
+
+function updateLayers() {
+  const layer = new H3TileLayer({
+    id: 'retail_stores',
+    data,
+    pointRadiusMinPixels: 4,
+    getFillColor: [200, 0, 80],
+  });
+
+  deck.setProps({layers: [layer]});
+  data.then(({attribution}) => {
+    document.querySelector('#footer')!.innerHTML = attribution;
+  });
+}
+
+function updateWidgets() {
+  for (const widget of widgets) {
+    widget.data = data;
+    widget.viewState = viewState;
+  }
+}
+
+/**************************************************************************
+ * INITIALIZATION
+ */
+
+function bindWidget(selector: string): Widget {
+  const widget = document.querySelector<Widget>(selector)!;
+
+  widget.addEventListener('filter', (event) => {
+    filters = (event as FilterEvent).detail.filters;
+    updateSources();
+  });
+
+  return widget;
+}
diff --git a/examples/05-spatial-index/app.tsx → examples/02-spatial-index/appbak.ts b/examples/05-spatial-index/app.tsx → examples/02-spatial-index/appbak.ts
diff --git a/examples/02-spatial-index/index.html b/examples/02-spatial-index/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <title>Examples / Spatial Index</title>
+    <link rel="stylesheet" href="../style.css" />
+  </head>
+  <body>
+    <main id="app">
+      <header>
+        <h1>Spatial Index</h1>
+        <a href="../">← Back</a>
+      </header>
+      <section id="view">
+        <div id="map"></div>
+        <canvas id="deck-canvas"></canvas>
+      </section>
+      <section id="rail">
+        <formula-widget
+          id="formula"
+          header="Total population"
+          operation="count"
+        ></formula-widget>
+        <category-widget
+          id="category"
+          header="Urbanity"
+          operation="count"
+          column="urbanity"
+        ></category-widget>
+        <pie-widget
+          id="pie"
+          header="Urbanity"
+          operation="count"
+          column="urbanity"
+        ></pie-widget>
+        <table-widget
+          id="table"
+          header="Pop. Distribution"
+          columns='["population", "male", "female"]'
+          sortBy="population"
+        ></table-widget>
+        <scatter-widget
+          id="scatter"
+          header="Education vs. Healthcare"
+          xAxisColumn="education"
+          yAxisColumn="healthcare"
+        ></scatter-widget>
+        <histogram-widget
+          id="histogram"
+          header="Population distribution"
+          column="population"
+          ticks="[100, 500, 1000, 5000]"
+        ></histogram-widget>
+      </section>
+      <footer id="footer"></footer>
+    </main>
+    <script type="module" src="./app.ts"></script>
+  </body>
+</html>