CartoDB · juandjara · Jan 17, 2025 · Jan 22, 2025 · Jan 22, 2025 · Jan 29, 2025
diff --git a/widgets-tileset/.env b/widgets-tileset/.env
@@ -0,0 +1,6 @@
+# API Base URL (copy this from CARTO Workspace -> Developers)
+VITE_API_BASE_URL=https://gcp-us-east1.api.carto.com
+
+# This API Access Token only grants access to demo data for the examples. Replace it with your own token.
+# Go to app.carto.com -> Developers -> Credentials -> API Access Tokens.
+VITE_API_ACCESS_TOKEN=eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiIwNjU0ZTQ5MyJ9.WoBKztKg5ExQFkUsbAFbwjSZK9nV0ESE9S0_hWS5WgE
diff --git a/widgets-tileset/README.md b/widgets-tileset/README.md
@@ -0,0 +1,24 @@
+## Example: Widgets for tilesets
+
+A simple example that showcases how to build scalable [Widgets](https://docs.carto.com/carto-for-developers/reference/carto-widgets-reference) using CARTO + deck.gl that stays synchronized with the map, using large-scale data coming from the same cloud data warehouse as your maps.
+
+The UI for these charts is built using [Apache eCharts](https://echarts.apache.org) but developers can plug their own charting or data visualization library.
+
+Uses [Vite](https://vitejs.dev/) to bundle and serve files.
+
+## Usage
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/CartoDB/deck.gl-examples/tree/master/widgets-tileset?file=index.ts)
+
+Or run it locally:
+
+```bash
+npm install
+# or
+yarn
+```
+
+Commands:
+
+- `npm run dev` is the development target, to serve the app and hot reload.
+- `npm run build` is the production target, to create the final bundle and write to disk.
diff --git a/widgets-tileset/index.html b/widgets-tileset/index.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="https://app.carto.com/favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="https://app.carto.com/favicon/favicon-16x16.png"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CARTO + deck.gl - Widgets for tilesets</title>
+  </head>
+  <body>
+    <div id="app">
+      <div id="map"></div>
+      <canvas id="deck-canvas"></canvas>
+      <div id="story-card">
+        <p class="overline">✨👀 You're viewing</p>
+        <h2>Widgets for tilesets</h2>
+        <p>
+          This is an example of a couple scalable, performant
+          <a
+            href="https://docs.carto.com/carto-for-developers/reference/carto-widgets-reference"
+            rel="noopener noreferrer"
+            target="_blank"
+            >Widgets</a
+          >
+          using CARTO + deck.gl for a big USA river stream network.
+        </p>
+        <p class="small">
+          These widgets aggregate data in different numerical categories, and they are synchronized
+          with the map using <code>spatialFilter</code>. Learn more about
+          <a
+            href="https://docs.carto.com/carto-for-developers/charts-and-widgets"
+            rel="noopener noreferrer"
+            target="_blank"
+            >building charts and widgets with CARTO</a
+          >.
+        </p>
+        <hr />
+        <section id="dropping-warning-small" class="warning">
+          <p class="small">
+            <strong>Warning:</strong> There may be some data missing at this zoom level because of
+            the tileset dropping features.
+          </p>
+        </section>
+        <section id="dropping-warning-big" class="warning">
+          <p class="small">
+            <strong>Warning:</strong> There is an important amount of data (<span
+              id="dropping-percentage"
+            ></span
+            >) missing at this zoom level (<span id="zoom-level"></span>) because of the tileset
+            dropping features. Widget calculations will not be accurate.
+          </p>
+        </section>
+        <div class="widget-wrapper formula-widget-wrapper">
+          <p class="widget-title overline">Stream count:</p>
+          <div id="formula-widget"></div>
+        </div>
+        <div class="widget-wrapper">
+          <p class="widget-title overline">Stream count by stream order (Histogram widget)</p>
+          <span id="clearHistogramFilter" class="widget-clear-filter">Clear filter</span>
+          <div class="echarts-histogram" id="histogram-widget"></div>
+        </div>
+        <hr />
+        <p class="caption">
+          Source:
+          <a href="https://www.openstreetmap.org" rel="noopener noreferrer" target="_blank"
+            >OpenStreetMap</a
+          >
+        </p>
+      </div>
+    </div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>