Skip to content

Commit c7cb6fd

Browse files
author
Don McCurdy
authored
chore(examples): Remove framework-specific examples (#59)
1 parent 1f29fa6 commit c7cb6fd

20 files changed

Lines changed: 187 additions & 1173 deletions

File tree

examples/01-pure-js/pure-js.ts renamed to examples/01-basic/app.ts

File renamed without changes.

examples/01-pure-js/index.html renamed to examples/01-basic/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,6 @@ <h1>Pure JS</h1>
5858
</section>
5959
<footer id="footer"></footer>
6060
</main>
61-
<script type="module" src="./pure-js.ts"></script>
61+
<script type="module" src="./app.ts"></script>
6262
</body>
6363
</html>

‎examples/02-react/app.tsx‎

Lines changed: 0 additions & 125 deletions
This file was deleted.

‎examples/02-react/index.html‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎examples/02-react/react.tsx‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/02-spatial-index/app.ts‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import maplibregl from 'maplibre-gl';
2+
import {Deck} from '@deck.gl/core';
3+
import {H3TileLayer} from '@deck.gl/carto';
4+
import {Filter, h3TableSource, H3TableSourceResponse} from '@carto/api-client';
5+
import '../components/index.js';
6+
import type {Widget, FilterEvent} from '../components/index.js';
7+
8+
/**************************************************************************
9+
* REACTIVE STATE
10+
*/
11+
12+
let data: Promise<H3TableSourceResponse>;
13+
let viewState = {latitude: 37.375, longitude: -5.996, zoom: 6};
14+
let filters: Record<string, Filter> = {};
15+
16+
/**************************************************************************
17+
* DECK.GL
18+
*/
19+
20+
const deck = new Deck({
21+
canvas: 'deck-canvas',
22+
initialViewState: viewState,
23+
controller: true,
24+
layers: [],
25+
});
26+
27+
const map = new maplibregl.Map({
28+
container: 'map',
29+
style:
30+
'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
31+
interactive: false,
32+
});
33+
34+
deck.setProps({
35+
onViewStateChange: (params) => {
36+
viewState = params.viewState;
37+
const {longitude, latitude, ...rest} = viewState;
38+
map.jumpTo({center: [longitude, latitude], ...rest});
39+
updateWidgets();
40+
},
41+
});
42+
43+
const widgets: Widget[] = [
44+
bindWidget('#formula'),
45+
bindWidget('#category'),
46+
bindWidget('#pie'),
47+
bindWidget('#table'),
48+
bindWidget('#scatter'),
49+
bindWidget('#histogram'),
50+
];
51+
52+
updateSources();
53+
54+
/**************************************************************************
55+
* UPDATES
56+
*/
57+
58+
function updateSources() {
59+
data = h3TableSource({
60+
accessToken: import.meta.env.VITE_CARTO_ACCESS_TOKEN,
61+
connectionName: 'carto_dw',
62+
tableName:
63+
'carto-demo-data.demo_tables.derived_spatialfeatures_esp_h3res8_v1_yearly_v2',
64+
filters,
65+
aggregationExp: 'sum(population) as population',
66+
});
67+
68+
updateLayers();
69+
updateWidgets();
70+
}
71+
72+
function updateLayers() {
73+
const layer = new H3TileLayer({
74+
id: 'retail_stores',
75+
data,
76+
pointRadiusMinPixels: 4,
77+
getFillColor: [200, 0, 80],
78+
});
79+
80+
deck.setProps({layers: [layer]});
81+
data.then(({attribution}) => {
82+
document.querySelector('#footer')!.innerHTML = attribution;
83+
});
84+
}
85+
86+
function updateWidgets() {
87+
for (const widget of widgets) {
88+
widget.data = data;
89+
widget.viewState = viewState;
90+
}
91+
}
92+
93+
/**************************************************************************
94+
* INITIALIZATION
95+
*/
96+
97+
function bindWidget(selector: string): Widget {
98+
const widget = document.querySelector<Widget>(selector)!;
99+
100+
widget.addEventListener('filter', (event) => {
101+
filters = (event as FilterEvent).detail.filters;
102+
updateSources();
103+
});
104+
105+
return widget;
106+
}

‎examples/02-spatial-index/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Examples / Spatial Index</title>
6+
<link rel="stylesheet" href="../style.css" />
7+
</head>
8+
<body>
9+
<main id="app">
10+
<header>
11+
<h1>Spatial Index</h1>
12+
<a href="../">← Back</a>
13+
</header>
14+
<section id="view">
15+
<div id="map"></div>
16+
<canvas id="deck-canvas"></canvas>
17+
</section>
18+
<section id="rail">
19+
<formula-widget
20+
id="formula"
21+
header="Total population"
22+
operation="count"
23+
></formula-widget>
24+
<category-widget
25+
id="category"
26+
header="Urbanity"
27+
operation="count"
28+
column="urbanity"
29+
></category-widget>
30+
<pie-widget
31+
id="pie"
32+
header="Urbanity"
33+
operation="count"
34+
column="urbanity"
35+
></pie-widget>
36+
<table-widget
37+
id="table"
38+
header="Pop. Distribution"
39+
columns='["population", "male", "female"]'
40+
sortBy="population"
41+
></table-widget>
42+
<scatter-widget
43+
id="scatter"
44+
header="Education vs. Healthcare"
45+
xAxisColumn="education"
46+
yAxisColumn="healthcare"
47+
></scatter-widget>
48+
<histogram-widget
49+
id="histogram"
50+
header="Population distribution"
51+
column="population"
52+
ticks="[100, 500, 1000, 5000]"
53+
></histogram-widget>
54+
</section>
55+
<footer id="footer"></footer>
56+
</main>
57+
<script type="module" src="./app.ts"></script>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)