Skip to content

Commit 4583b7a

Browse files
alasarralasarr
committed
Tileset example
1 parent de39434 commit 4583b7a

17 files changed

+218
-66
lines changed

‎README.md

+42
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,45 @@
44
This repository contains examples to show case the different visualizations that can be achieved using [CARTO](https://carto.com) + [deck.gl](https://deck.gl).
55

66
All the examples can be executed locally or opened with [StackBlitz](https://stackblitz.com/).
7+
8+
9+
## Locally setup with deck.gl master branch
10+
11+
All the examples have a script `dev-local` that can be used to link with the `master` branch of https://github.com/visgl/deck.gl.
12+
13+
In order to use those scripts you need to do the following.
14+
15+
Firts, clone both repos:
16+
```
17+
git clone https://github.com/visgl/deck.gl
18+
git clone https://github.com/CartoDB/deck.gl-examples
19+
```
20+
21+
Initialize deck.gl
22+
```bash
23+
cd deck.gl
24+
yarn
25+
yarn bootstrap
26+
```
27+
28+
Initialize deck.gl-examples
29+
```bash
30+
cd deck.gl-examples
31+
yarn
32+
```
33+
34+
Link types:
35+
```bash
36+
cd deck.gl
37+
yarn build
38+
cd ../deck.gl-examples
39+
cd ../<examples>/node_modules/@types
40+
ln -s ../../../../deck.gl/modules/carto/typed deck.gl__carto
41+
```
42+
43+
Execute the environment:
44+
```bash
45+
yarn dev-local
46+
# or
47+
npm run dev-local
48+
```

‎dynamic-tiling-pois/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"scripts": {
66
"dev": "vite",
7-
"dev-local": "vite --config ./vite.config.local.mjs",
7+
"dev-local": "vite --config ../vite.config.local.mjs",
88
"build": "vite build",
99
"preview": "vite preview"
1010
},

‎dynamic-tiling-pois/style.css

+7-3
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ canvas {
3939
overflow: scroll;
4040
}
4141

42+
.layer-controls {
43+
margin-top: 2.25rem;
44+
}
45+
4246
.overline {
4347
font-size: .625rem;
4448
font-weight: 600;
@@ -47,7 +51,7 @@ canvas {
4751
text-transform: uppercase;
4852
}
4953

50-
select, button {
54+
select{
5155
margin-bottom: 0.6rem;
5256
border-radius: 4px;
5357
font-size: 0.8rem;
@@ -56,7 +60,7 @@ select, button {
5660
max-width: 100%;
5761
}
5862

59-
select:hover, button:hover {
63+
select:hover {
6064
cursor: pointer;
6165
}
6266

@@ -69,4 +73,4 @@ select {
6973
margin-top: 2.25rem;
7074
margin-bottom: 0px;
7175
font-size: 0.8rem;
72-
}
76+
}

‎hello-world/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import './style.css';
22
import maplibregl from 'maplibre-gl';
33
import 'maplibre-gl/dist/maplibre-gl.css';
44
import {Deck} from '@deck.gl/core';
5-
import {BASEMAP, vectorTableSource, VectorTileLayer} from '@deck.gl/carto';
5+
import {BASEMAP, vectorTableSource, VectorTileLayer, vectorTilesetSource} from '@deck.gl/carto';
66

77
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
88
const accessToken = import.meta.env.VITE_API_ACCESS_TOKEN;

‎hello-world/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"scripts": {
66
"dev": "vite",
7-
"dev-local": "vite --config ./vite.config.local.mjs",
7+
"dev-local": "vite --config ../vite.config.local.mjs",
88
"build": "vite build",
99
"preview": "vite preview"
1010
},

‎hello-world/tsconfig.json

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
{
22
"compilerOptions": {
3-
"target": "esnext"
3+
"target": "es2022",
4+
"jsx": "react",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"allowJs": true,
8+
"checkJs": false,
9+
"moduleResolution": "node",
10+
"esModuleInterop": true,
11+
"allowSyntheticDefaultImports": true,
12+
"noEmit": true,
13+
"resolveJsonModule": true,
14+
"skipLibCheck": true,
15+
"baseUrl": "."
416
}
517
}

‎hello-world/vite.config.local.mjs

-24
This file was deleted.

‎package.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "deck-gl-examples",
3+
"version": "1.0.0",
4+
"devDependencies": {
5+
"vite": "^4.5.0",
6+
"ocular-dev-tools": "^2.0.0-alpha.15"
7+
}
8+
}

‎tileset-buildings/.env

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ VITE_API_BASE_URL=https://gcp-us-east1.api.carto.com
44
# Set this variable if you're using an API Access Token (public application).
55
# Go to app.carto.com -> Developers -> Manage API Access Tokens
66
VITE_API_ACCESS_TOKEN=eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiI3ZDVmYjMwMiJ9.ySr1HanHcYklesFUIqDJfxoaeB8bpGrR3QcImrxmXEk
7+

‎tileset-buildings/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
## Example: Tileset Buildings deck.gl and CARTO
2-
This example visualize a tileset with all the buildings in the world (publicly available in [OpenStreetMap](https://console.cloud.google.com/marketplace/product/openstreetmap/geo-openstreetmap?project=cartodb-on-gcp-backend-team)) in a performance and cost-effective way. This dataset has **481M** polygons and a size of **119GB**.
2+
This example visualize a tileset with all the buildings in the world (publicly available in [OpenStreetMap](https://console.cloud.google.com/marketplace/product/openstreetmap/geo-openstreetmap) in a performance and cost-effective way. This dataset has **481M** polygons and a size of **119GB**.
33

44
Uses [Vite](https://vitejs.dev/) to bundle and serve files.
55

‎tileset-buildings/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,23 @@
2626
<div id="app">
2727
<div id="map"></div>
2828
<canvas id="deck-canvas"></canvas>
29+
<div id="story-card">
30+
<p class="overline">✨👀 You're viewing</p>
31+
<h2>World buildings (481M polygons)</h2>
32+
<p>This example visualize a tileset with all the buildings in the world (publicly available in
33+
<a href="https://console.cloud.google.com/marketplace/product/openstreetmap/geo-openstreetmap" rel="noopener noreferrer" target="_blank">OpenStreetMap</a>) in a performance and cost-effective way.
34+
This dataset has <strong>481M</strong> polygons and a size of <strong>119GB</strong>.</p>
35+
<p>
36+
<div class="layer-controls">
37+
<p class="overline">Take me to...</p>
38+
<div class="city-button-group">
39+
<button id="tokyo" value="tokyo">🇯🇵 Tokyo</button>
40+
<button id="newyork" value="newyork">🇺🇸 New York</button>
41+
<button id="barcelona" value="barcelona">🇪🇸 Barcelona</button>
42+
</div>
43+
</div>
44+
<p class="caption">Source: OpenStreetMap</p>
45+
</div>
2946
</div>
3047
<script type="module" src="./index.ts"></script>
3148
</body>

‎tileset-buildings/index.ts

+39-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import './style.css';
22
import maplibregl from 'maplibre-gl';
33
import 'maplibre-gl/dist/maplibre-gl.css';
4-
import {Deck} from '@deck.gl/core';
4+
import {Deck, FlyToInterpolator} from '@deck.gl/core';
55
import {BASEMAP, vectorTilesetSource, VectorTileLayer} from '@deck.gl/carto';
66

77
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
@@ -12,7 +12,7 @@ const cartoConfig = {apiBaseUrl, accessToken, connectionName};
1212
const INITIAL_VIEW_STATE = {
1313
latitude: 40.7128,
1414
longitude: -74.0060,
15-
zoom: 12,
15+
zoom: 10,
1616
bearing: 0,
1717
pitch: 30
1818
};
@@ -49,3 +49,40 @@ deck.setProps({
4949
map.jumpTo({center: [longitude, latitude], ...rest});
5050
}
5151
});
52+
53+
function moveToCity(city: string) {
54+
let latlng: {latitude: string, longitude: number};
55+
56+
switch (city) {
57+
case 'newyork':
58+
latlng = {latitude: 40.7307343, longitude: -74.0056199};
59+
break;
60+
case 'tokyo':
61+
latlng = {latitude: 35.6992343, longitude: 139.7203199};
62+
break
63+
case 'barcelona':
64+
latlng = {latitude: 41.3974343, longitude: 2.1610199};
65+
break;
66+
default:
67+
throw new Error('City not found');
68+
}
69+
70+
const viewState = {
71+
latitude: latlng.latitude,
72+
longitude: latlng.longitude,
73+
zoom: 13,
74+
bearing: 10,
75+
pitch: 45,
76+
transitionDuration: 5000,
77+
transitionInterpolator: new FlyToInterpolator()
78+
};
79+
80+
deck.setProps({
81+
initialViewState: viewState
82+
});
83+
}
84+
85+
const cityButtonsList = document.querySelectorAll<HTMLButtonElement>('.city-button-group button');
86+
cityButtonsList.forEach((element) => {
87+
element.addEventListener('click', () => moveToCity(element.value));
88+
})

‎tileset-buildings/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"scripts": {
66
"dev": "vite",
7-
"dev-local": "vite --config ./vite.config.local.mjs",
7+
"dev-local": "vite --config ../vite.config.local.mjs",
88
"build": "vite build",
99
"preview": "vite preview"
1010
},

‎tileset-buildings/style.css

+70-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
h1,
2-
h2 {
3-
font-family: Lato;
1+
body,
2+
html {
3+
height: 100%;
4+
width: 100%;
5+
overflow: hidden;
6+
position: fixed;
7+
font-family: Inter, sans-serif;
8+
font-weight: 400;
9+
font-size: 1rem;
410
}
11+
512
#map,
613
canvas {
714
position: absolute;
@@ -11,3 +18,63 @@ canvas {
1118
height: 100%;
1219
max-height: 100%;
1320
}
21+
22+
#app {
23+
flex: 1 1 auto;
24+
min-height: 100vh;
25+
display: flex;
26+
flex-direction: column;
27+
}
28+
29+
#story-card {
30+
padding: 1.75rem;
31+
background: #fdfdfe;
32+
box-shadow: 4px 4px 8px #30303099;
33+
border-radius: 4px;
34+
z-index:1;
35+
margin: 1.5rem;
36+
max-width: 480px;
37+
max-height: 100vh;
38+
z-index: 10;
39+
overflow: scroll;
40+
}
41+
42+
.layer-controls {
43+
margin-top: 2.25rem;
44+
}
45+
46+
.overline {
47+
font-size: .625rem;
48+
font-weight: 600;
49+
line-height: 1.2;
50+
letter-spacing: .125rem;
51+
text-transform: uppercase;
52+
}
53+
54+
select:hover, button:hover {
55+
cursor: pointer;
56+
}
57+
58+
button {
59+
border-radius: 4px;
60+
margin-right: 0.75rem;
61+
padding: 0.4rem 0.75rem;
62+
background-color: #f3f3f3;
63+
border-color: #30303099;
64+
border-width: 1px;
65+
}
66+
67+
button:hover {
68+
box-shadow: 2px 2px 2px #30303099;
69+
cursor: pointer;
70+
}
71+
72+
.caption {
73+
margin-top: 2.25rem;
74+
margin-bottom: 0px;
75+
font-size: 0.8rem;
76+
}
77+
78+
.city-button-group {
79+
display: flex;
80+
}

‎tileset-buildings/tsconfig.json

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
{
22
"compilerOptions": {
3-
"target": "esnext"
3+
"target": "es2022",
4+
"jsx": "react",
5+
"strict": true,
6+
"noImplicitAny": false,
7+
"allowJs": true,
8+
"checkJs": false,
9+
"moduleResolution": "node",
10+
"esModuleInterop": true,
11+
"allowSyntheticDefaultImports": true,
12+
"noEmit": true,
13+
"resolveJsonModule": true,
14+
"skipLibCheck": true,
15+
"baseUrl": "."
416
}
517
}

‎tileset-buildings/vite.config.local.mjs

-24
This file was deleted.

0 commit comments

Comments
 (0)