custom style example

Signed-off-by: Ihor Dykhta <ihordykhta@Ihors-MacBook-Pro.local>

Author: Ihor Dykhta

examples/custom-map-style/.babelrc

@@ -0,0 +1,4 @@
+# https://yarnpkg.com/configuration/yarnrc
+nodeLinker: node-modules
+# Define the registry to use when fetching packages.
+npmRegistryServer: 'https://registry.yarnpkg.com'

examples/custom-map-style/.yarnrc.yml

@@ -2,22 +2,41 @@
 
 ![map layers](https://studio-public-data.foursquare.com/statics/keplergl/documentation/f-map-styles-8.jpg 'custom map style')
 
-Demo how to use kepler.gl with other basemap services other than Mapbox.
+Demo showing how to use kepler.gl with basemap services other than Mapbox.
 
-Read more about [Custom Map Style][custom-map-styles]
+Read more about [Custom Map Style][custom-map-styles].
 
-### Run Example
+## Pre-requirements
 
-#### 1. Install
+- [Node.js ^20.x](http://nodejs.org)
+- [Yarn 4.4.0](https://yarnpkg.com): See the [installation instructions][yarn-install].
+
+## 1. Install Dependencies
+
+Go to the `examples/custom-map-style` directory and run:
 
 ```sh
-yarn
+touch yarn.lock && yarn
 ```
 
-#### 2. Start the app
+> `touch yarn.lock` is required once to mark this directory as a standalone Yarn project,
+> independent of the monorepo root.
+
+## 2. Start the App
 
 ```sh
 yarn start
 ```
 
-[custom-map-styles]: ./docs/api-reference/advanced-usages/custom-map-styles.md
+The app will be available at [http://localhost:8080](http://localhost:8080).
+
+## Production Build
+
+```sh
+yarn build
+```
+
+The output will be in the `dist/` directory.
+
+[custom-map-styles]: https://docs.kepler.gl/docs/api-reference/advanced-usages/custom-map-styles
+[yarn-install]: https://yarnpkg.com/getting-started/install

examples/custom-map-style/README.md

@@ -2,44 +2,28 @@
 // Copyright contributors to the kepler.gl project
 
 import esbuild from 'esbuild';
-import {replace} from 'esbuild-plugin-replace';
 import {dotenvRun} from '@dotenv-run/esbuild';
 import copyPlugin from 'esbuild-plugin-copy';
 
 import process from 'node:process';
 import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
 import {spawn} from 'node:child_process';
-import {join} from 'node:path';
 
 const args = process.argv;
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const port = 8080;
 
 const NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'production');
 
-// Ensure a single instance of React and friends to avoid invalid hook calls
-const ROOT_NODE_MODULES = join('..', '..', 'node_modules');
-const thirdPartyAliases = {
-  react: join(ROOT_NODE_MODULES, 'react'),
-  'react-dom': join(ROOT_NODE_MODULES, 'react-dom'),
-  'react-redux': join(ROOT_NODE_MODULES, 'react-redux', 'lib'),
-  'styled-components': join(ROOT_NODE_MODULES, 'styled-components'),
-  'apache-arrow': join(ROOT_NODE_MODULES, 'apache-arrow')
-};
-
 const config = {
   platform: 'browser',
   format: 'iife',
   logLevel: 'info',
-  loader: {
-    '.js': 'jsx',
-    '.ts': 'ts',
-    '.tsx': 'tsx',
-    '.css': 'css',
-    '.ttf': 'file',
-    '.woff': 'file',
-    '.woff2': 'file'
-  },
+  loader: {'.js': 'jsx', '.ts': 'ts', '.tsx': 'tsx', '.css': 'css'},
   entryPoints: ['src/main.tsx'],
   outfile: 'dist/bundle.js',
   bundle: true,
@@ -53,10 +37,23 @@ const config = {
       environment: NODE_ENV,
       root: '../../.env'
     }),
-    replace({
-      __PACKAGE_VERSION__: '3.1.10',
-      include: /constants\/src\/default-settings\.ts/
-    }),
+    // styled-components: @hubble.gl/react nests its own copy.
+    // react-palm: several @kepler.gl/* packages nest their own copy.
+    // Both are singletons that break when loaded more than once.
+    {
+      name: 'dedupe-singletons',
+      setup(build) {
+        build.onResolve({filter: /^(styled-components|react-palm(\/|$)|react$|react-dom$)/}, async args => {
+          if (args.pluginData?.deduped) return;
+          const result = await build.resolve(args.path, {
+            resolveDir: __dirname,
+            kind: args.kind,
+            pluginData: {deduped: true}
+          });
+          return result;
+        });
+      }
+    },
     copyPlugin({
       resolveFrom: 'cwd',
       assets: {
@@ -84,16 +81,13 @@ function openURL(url) {
     const result = await esbuild
       .build({
         ...config,
-        alias: thirdPartyAliases,
         minify: true,
         sourcemap: false,
         metafile: true,
         define: {
           ...config.define,
           'process.env.NODE_ENV': '"production"'
-        },
-        drop: ['console', 'debugger'],
-        treeShaking: true
+        }
       })
       .catch(e => {
         console.error(e);
@@ -106,7 +100,6 @@ function openURL(url) {
     await esbuild
       .context({
         ...config,
-        alias: thirdPartyAliases,
         minify: false,
         sourcemap: true,
         banner: {
@@ -123,7 +116,7 @@ function openURL(url) {
             console.info(remoteAddress, status, `"${method} ${path}" [${timeInMS}ms]`);
           }
         });
-        console.info(`kepler.gl custom-map-style example running at ${`http://localhost:${port}`}`);
+        console.info(`kepler.gl custom-map-style example running at http://localhost:${port}`);
         openURL(`http://localhost:${port}`);
       })
       .catch(e => {

examples/custom-map-style/esbuild.config.mjs

@@ -1,25 +1,27 @@
 {
+  "name": "kepler-custom-map-style",
+  "version": "0.0.1",
+  "license": "MIT",
   "scripts": {
     "start": "node esbuild.config.mjs --start",
     "build": "node esbuild.config.mjs --build",
     "start-local": "NODE_ENV=local node esbuild.config.mjs --start"
   },
   "dependencies": {
-    "@kepler.gl/components": "^3.1.10",
-    "@kepler.gl/reducers": "^3.1.10",
-    "global": "^4.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-palm": "^3.3.6",
-    "react-redux": "^8.0.5",
-    "react-virtualized": "^9.21.0",
-    "redux-actions": "^2.2.1",
-    "styled-components": "6.4.3"
+    "@kepler.gl/components": "^3.3.0-alpha.6",
+    "@kepler.gl/reducers": "^3.3.0-alpha.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-redux": "^9.1.0",
+    "redux": "^5.0.1"
   },
   "devDependencies": {
     "@dotenv-run/esbuild": "^1.5.0",
+    "@types/node": "^20",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "esbuild": "^0.25.0",
     "esbuild-plugin-copy": "^2.1.1",
-    "esbuild-plugin-replace": "^1.4.0"
+    "typescript": "^5.5.0"
   }
 }

examples/custom-map-style/package.json

@@ -1,10 +1,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React from 'react';
-import {connect} from 'react-redux';
+import * as React from 'react';
+import {useState, useEffect} from 'react';
 import KeplerGl from '@kepler.gl/components';
-import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 
 const localeMessages = {
   en: {
@@ -14,23 +13,27 @@ const localeMessages = {
   }
 };
 
-const App = () => (
-  <div style={{position: 'absolute', width: '100%', height: '100%'}}>
-    <AutoSizer>
-      {({height, width}) => (
-        <KeplerGl
-          mapboxApiAccessToken=""
-          id="map"
-          width={width}
-          height={height}
-          localeMessages={localeMessages}
-        />
-      )}
-    </AutoSizer>
-  </div>
-);
+function useWindowSize() {
+  const [size, setSize] = useState({width: window.innerWidth, height: window.innerHeight});
+  useEffect(() => {
+    const onResize = () => setSize({width: window.innerWidth, height: window.innerHeight});
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+  return size;
+}
 
-const mapStateToProps = state => state;
-const dispatchToProps = dispatch => ({dispatch});
+const App = () => {
+  const {width, height} = useWindowSize();
+  return (
+    <KeplerGl
+      mapboxApiAccessToken=""
+      id="map"
+      width={width}
+      height={height}
+      localeMessages={localeMessages}
+    />
+  );
+};
 
-export default connect(mapStateToProps, dispatchToProps)(App);
+export default App;

examples/custom-map-style/src/app.tsx

@@ -1,9 +1,8 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom/client';
-import document from 'global/document';
 import {Provider} from 'react-redux';
 import store from './store.ts';
 import App from './app.tsx';
@@ -14,6 +13,6 @@ const Root = () => (
   </Provider>
 );
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-
+const container = document.getElementById('root');
+const root = ReactDOM.createRoot(container!);
 root.render(<Root />);

examples/custom-map-style/src/main.tsx

@@ -52,6 +52,6 @@ const reducers = combineReducers({
 });
 
 const middlewares = enhanceReduxMiddleware([]);
-const enhancers = [applyMiddleware(...middlewares)];
+const enhancers = applyMiddleware(...middlewares);
 
-export default createStore(reducers, {}, compose(...enhancers));
+export default createStore(reducers, {}, compose(enhancers));

examples/custom-map-style/src/store.ts

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

examples/custom-map-style/tsconfig.json

@@ -9,10 +9,15 @@ A minimal example showing how to integrate [Kepler.gl](https://kepler.gl/) into
 
 ## 1. Install Dependencies
 
+Go to the `examples/get-started-vite` directory and run:
+
 ```sh
-yarn install
+touch yarn.lock && yarn
 ```
 
+> `touch yarn.lock` is required once to mark this directory as a standalone Yarn project,
+> independent of the monorepo root.
+
 ## 2. Start the App
 
 ```sh