Skip to content

Commit a3b0d3c

Browse files
committed
update custom-map-style example
Signed-off-by: Ihor Dykhta <[email protected]>
1 parent d82b8c7 commit a3b0d3c

File tree

7 files changed

+159
-108
lines changed

7 files changed

+159
-108
lines changed
Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
# Custom Map Style
1+
# Custom Map Style
22

3-
![map layers](https://studio-public-data.foursquare.com/statics/keplergl/documentation/f-map-styles-8.jpg "custom map style")
3+
![map layers](https://studio-public-data.foursquare.com/statics/keplergl/documentation/f-map-styles-8.jpg 'custom map style')
44

55
Demo how to use kepler.gl with other basemap services other than Mapbox.
66

77
Read more about [Custom Map Style][custom-map-styles]
88

9-
109
### Run Example
11-
#### 1. Install
1210

13-
```sh
14-
npm install
15-
```
16-
17-
or
11+
#### 1. Install
1812

1913
```sh
2014
yarn
@@ -23,8 +17,7 @@ yarn
2317
#### 2. Start the app
2418

2519
```sh
26-
npm start
20+
yarn start
2721
```
2822

29-
30-
[custom-map-styles]: ./docs/api-reference/advanced-usages/custom-map-styles.md
23+
[custom-map-styles]: ./docs/api-reference/advanced-usages/custom-map-styles.md
Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// SPDX-License-Identifier: MIT
2+
// Copyright contributors to the kepler.gl project
3+
4+
import esbuild from 'esbuild';
5+
import {replace} from 'esbuild-plugin-replace';
6+
import {dotenvRun} from '@dotenv-run/esbuild';
7+
import copyPlugin from 'esbuild-plugin-copy';
8+
9+
import process from 'node:process';
10+
import fs from 'node:fs';
11+
import {spawn} from 'node:child_process';
12+
import {join} from 'node:path';
13+
14+
const args = process.argv;
15+
16+
const port = 8080;
17+
18+
const NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'production');
19+
20+
// Ensure a single instance of React and friends to avoid invalid hook calls
21+
const ROOT_NODE_MODULES = join('..', '..', 'node_modules');
22+
const thirdPartyAliases = {
23+
react: join(ROOT_NODE_MODULES, 'react'),
24+
'react-dom': join(ROOT_NODE_MODULES, 'react-dom'),
25+
'react-redux': join(ROOT_NODE_MODULES, 'react-redux', 'lib'),
26+
'styled-components': join(ROOT_NODE_MODULES, 'styled-components'),
27+
'apache-arrow': join(ROOT_NODE_MODULES, 'apache-arrow')
28+
};
29+
30+
const config = {
31+
platform: 'browser',
32+
format: 'iife',
33+
logLevel: 'info',
34+
loader: {
35+
'.js': 'jsx',
36+
'.ts': 'ts',
37+
'.tsx': 'tsx',
38+
'.css': 'css',
39+
'.ttf': 'file',
40+
'.woff': 'file',
41+
'.woff2': 'file'
42+
},
43+
entryPoints: ['src/main.tsx'],
44+
outfile: 'dist/bundle.js',
45+
bundle: true,
46+
define: {
47+
NODE_ENV,
48+
'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken || '')
49+
},
50+
plugins: [
51+
dotenvRun({
52+
verbose: true,
53+
environment: NODE_ENV,
54+
root: '../../.env'
55+
}),
56+
replace({
57+
__PACKAGE_VERSION__: '3.1.10',
58+
include: /constants\/src\/default-settings\.ts/
59+
}),
60+
copyPlugin({
61+
resolveFrom: 'cwd',
62+
assets: {
63+
from: ['index.html'],
64+
to: ['dist/index.html']
65+
}
66+
})
67+
]
68+
};
69+
70+
function openURL(url) {
71+
const cmd = {
72+
darwin: ['open'],
73+
linux: ['xdg-open'],
74+
win32: ['cmd', '/c', 'start']
75+
};
76+
const command = cmd[process.platform];
77+
if (command) {
78+
spawn(command[0], [...command.slice(1), url]);
79+
}
80+
}
81+
82+
(async () => {
83+
if (args.includes('--build')) {
84+
const result = await esbuild
85+
.build({
86+
...config,
87+
alias: thirdPartyAliases,
88+
minify: true,
89+
sourcemap: false,
90+
metafile: true,
91+
define: {
92+
...config.define,
93+
'process.env.NODE_ENV': '"production"'
94+
},
95+
drop: ['console', 'debugger'],
96+
treeShaking: true
97+
})
98+
.catch(e => {
99+
console.error(e);
100+
process.exit(1);
101+
});
102+
fs.writeFileSync('dist/esbuild-metadata.json', JSON.stringify(result.metafile));
103+
}
104+
105+
if (args.includes('--start')) {
106+
await esbuild
107+
.context({
108+
...config,
109+
alias: thirdPartyAliases,
110+
minify: false,
111+
sourcemap: true,
112+
banner: {
113+
js: `new EventSource('/esbuild').addEventListener('change', () => location.reload());`
114+
}
115+
})
116+
.then(async ctx => {
117+
await ctx.watch();
118+
await ctx.serve({
119+
servedir: 'dist',
120+
port,
121+
fallback: 'dist/index.html',
122+
onRequest: ({remoteAddress, method, path, status, timeInMS}) => {
123+
console.info(remoteAddress, status, `"${method} ${path}" [${timeInMS}ms]`);
124+
}
125+
});
126+
console.info(`kepler.gl custom-map-style example running at ${`http://localhost:${port}`}`);
127+
openURL(`http://localhost:${port}`);
128+
})
129+
.catch(e => {
130+
console.error(e);
131+
process.exit(1);
132+
});
133+
}
134+
})();
Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{
22
"scripts": {
3-
"start": "webpack-dev-server --progress --hot --open",
4-
"start-local": "webpack-dev-server --env.es6 --progress --hot --open"
3+
"start": "node esbuild.config.mjs --start",
4+
"build": "node esbuild.config.mjs --build",
5+
"start-local": "NODE_ENV=local node esbuild.config.mjs --start"
56
},
67
"dependencies": {
7-
"@kepler.gl/components": "^3.0.0-alpha.1",
8-
"@kepler.gl/reducers": "^3.0.0-alpha.1",
8+
"@kepler.gl/components": "^3.1.10",
9+
"@kepler.gl/reducers": "^3.1.10",
910
"global": "^4.3.0",
1011
"react": "^18.2.0",
1112
"react-dom": "^18.2.0",
@@ -16,21 +17,9 @@
1617
"styled-components": "6.1.8"
1718
},
1819
"devDependencies": {
19-
"@babel/core": "^7.12.1",
20-
"@babel/plugin-transform-class-properties": "^7.12.1",
21-
"@babel/plugin-transform-export-namespace-from": "^7.12.1",
22-
"@babel/plugin-transform-modules-commonjs": "^7.12.1",
23-
"@babel/plugin-transform-optional-chaining": "^7.12.1",
24-
"@babel/plugin-transform-runtime": "^7.12.1",
25-
"@babel/plugin-transform-typescript": "^7.16.8",
26-
"@babel/preset-env": "^7.0.0",
27-
"@babel/preset-react": "^7.0.0",
28-
"@babel/preset-typescript": "^7.16.7",
29-
"babel-loader": "^8.0.0",
30-
"webpack": "^4.29.0",
31-
"webpack-cli": "^3.2.1",
32-
"webpack-dev-middleware": "^3.5.1",
33-
"webpack-dev-server": "^3.1.14",
34-
"webpack-hot-middleware": "^2.24.3"
20+
"@dotenv-run/esbuild": "^1.5.0",
21+
"esbuild": "^0.25.0",
22+
"esbuild-plugin-copy": "^2.1.1",
23+
"esbuild-plugin-replace": "^1.4.0"
3524
}
3625
}

examples/custom-map-style/webpack.config.js

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

examples/custom-reducer/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
# Customize kepler.gl Reducer
22

33
This example demos how to customize kepler.gl reducer
4-
1. Customize reducer initialState by `keplerGlReducer.initialState`
5-
2. Adding custom actions by `keplerGlReducer.plugins`
4+
5+
1. Customize reducer initialState by `keplerGlReducer.initialState`
6+
2. Adding custom actions by `keplerGlReducer.plugins`
67

78
### Local dev
8-
```
9-
npm install
10-
```
11-
or
9+
1210
```
1311
yarn
1412
```
1513

1614
add mapbox access token to node env
15+
1716
```
1817
export MapboxAccessToken=<your_mapbox_token>
1918
```
2019

2120
then
21+
2222
```
23-
npm start
23+
yarn start
2424
```

examples/custom-theme/README.md

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,6 @@ This example show how to customize Kepler.gl theme
66

77
#### 1. Install
88

9-
```sh
10-
npm install
11-
```
12-
13-
or
14-
159
```sh
1610
yarn
1711
```
@@ -27,5 +21,5 @@ export MapboxAccessToken=<your_mapbox_token>
2721
#### 3. Start the app
2822

2923
```sh
30-
npm start
24+
yarn start
3125
```

examples/node-app/README.md

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
# Node/Express
22

3-
This example shows how to embed Kepler.gl in a node/express/webpack application.
3+
This example shows how to embed Kepler.gl in a node/express/webpack application.
44

55
#### 1. Install
66

7-
```sh
8-
npm install
9-
```
10-
11-
or
12-
137
```sh
148
yarn
159
```
1610

17-
1811
#### 2. Mapbox Token
12+
1913
add mapbox access token to node env
2014

2115
```sh
@@ -25,5 +19,5 @@ export MapboxAccessToken=<your_mapbox_token>
2519
#### 3. Start the app
2620

2721
```sh
28-
npm start
22+
yarn start
2923
```

0 commit comments

Comments
 (0)