feat: MapLibre basemap (#2461)

bindings/kepler.gl-jupyter/js/lib/keplergl/components/app.js

@@ -104,7 +104,7 @@ function App() {
           />
           <link
             rel="stylesheet"
-            href="http://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css"
+            href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css"
           />
           <style type="text/css">
             {`font-family: ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif;

bindings/kepler.gl-jupyter/js/webpack/build-html.js

@@ -91,7 +91,7 @@ module.exports = (rules, plugins) => ({
       inject: true,
       links: [
         'https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css',
-        'https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css'
+        'https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css'
       ],
       scripts: [
 

examples/custom-map-style/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8' />
     <title>kepler.gl demo</title>
     <link rel="stylesheet" href="//d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
-    <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
     <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
     </style>

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

@@ -22,8 +22,8 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import document from 'global/document';
 import {Provider} from 'react-redux';
-import store from './store';
-import App from './app';
+import store from './store.ts';
+import App from './app.tsx';
 
 const Root = () => (
   <Provider store={store}>

examples/custom-reducer/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8' />
     <title>kepler.gl demo</title>
     <link href="//d1a3f4spazzrp4.cloudfront.net/uber-fonts/4.0.0/superfine.css" rel="stylesheet">
-    <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
     <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
     </style>

examples/custom-theme/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8' />
     <title>kepler.gl demo</title>
     <link rel="stylesheet" href="//d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
-    <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
     <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
     </style>

examples/demo-app/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8' />
     <title>kepler.gl demo</title>
     <link rel="stylesheet" href="//d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
-    <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
     <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
     </style>

examples/node-app/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8' />
     <title>kepler.gl demo</title>
     <link rel="stylesheet" href="//d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
-    <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
     <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
     </style>

examples/open-modal/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8' />
     <title>kepler.gl demo</title>
     <link rel="stylesheet" href="//d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
-    <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
     <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
     </style>

examples/replace-component/index.html

@@ -4,7 +4,7 @@
     <meta charset='UTF-8' />
     <title>kepler.gl demo</title>
     <link rel="stylesheet" href="//d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
-    <link href="//api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
     <style type="text/css">
        body {margin: 0; padding: 0; overflow: hidden;}
     </style>

examples/umd-client/index.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css">
 
     <!--MapBox css-->
-    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet">
+    <link href="https:https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css" rel="stylesheet">
 
     <!-- Load React/Redux -->
     <script src="https://unpkg.com/react@16.8.4/umd/react.production.min.js" crossorigin></script>

jest.setup.js

@@ -31,3 +31,6 @@ jest.mock('@kepler.gl/utils', () => ({
   hasPortableWidth: jest.fn(),
   hasMobileWidth: jest.fn()
 }));
+
+global.URL.createObjectURL = jest.fn();
+

package.json

@@ -183,7 +183,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jsdom": "^16.4.0",
     "json-loader": "^0.5.4",
-    "mapbox-gl": "1.13.1",
+    "maplibre-gl": "^3.6.2",
     "nyc": "^15.1.0",
     "prettier": "1.19.1",
     "progress-bar-webpack-plugin": "^2.1.0",
@@ -234,7 +234,7 @@
     "d3-scale": "^3.2.3",
     "dot-prop": "6.0.0",
     "kind-of": "6.0.3",
-    "jpeg-js": "0.4.2",
+    "jpeg-js": "^0.4.3",
     "lodash": "4.17.19",
     "minimist": "1.2.3",
     "node-fetch": "2.6.1",

scripts/ast-helper.js

@@ -22,11 +22,14 @@ import fs from 'fs';
 import {join} from 'path';
 
 export function walkSync(dir, fileList = []) {
-  dir.forEach(dir => {
-    const files = fs.readdirSync(dir);
+  // Ensure dir is an array
+  const directories = Array.isArray(dir) ? dir : [dir];
+
+  directories.forEach(dirPath => {
+    const files = fs.readdirSync(dirPath);
 
     files.forEach((file) => {
-      const path = join(dir, file);
+      const path = join(dirPath, file);
 
       if (fs.statSync(path).isDirectory()) {
         fileList = walkSync(path, fileList);

src/components/package.json

@@ -40,8 +40,8 @@
     "@kepler.gl/actions": "3.0.0-alpha.1",
     "@kepler.gl/cloud-providers": "3.0.0-alpha.1",
     "@kepler.gl/constants": "3.0.0-alpha.1",
-    "@kepler.gl/layers": "3.0.0-alpha.1",
     "@kepler.gl/effects": "3.0.0-alpha.1",
+    "@kepler.gl/layers": "3.0.0-alpha.1",
     "@kepler.gl/localization": "3.0.0-alpha.1",
     "@kepler.gl/processors": "3.0.0-alpha.1",
     "@kepler.gl/reducers": "3.0.0-alpha.1",
@@ -67,8 +67,8 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/lodash.uniq": "^4.5.7",
     "@types/lodash.uniqby": "^4.7.7",
-    "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react": "^18.0.28",
+    "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "^18.0.11",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-map-gl": "^6.1.3",
@@ -99,6 +99,7 @@
     "lodash.uniq": "^4.0.1",
     "lodash.uniqby": "^4.7.0",
     "mapbox-gl": "1.13.1",
+    "maplibre-gl": "^3.6.2",
     "mjolnir.js": "^2.7.0",
     "moment": "^2.10.6",
     "moment-timezone": "^0.5.35",
@@ -111,7 +112,7 @@
     "react-intl": "^6.3.0",
     "react-json-pretty": "^2.2.0",
     "react-lifecycles-compat": "^3.0.4",
-    "react-map-gl": "7.0.25",
+    "react-map-gl": "^7.1.6",
     "react-markdown": "^5.0.2",
     "react-modal": "^3.12.1",
     "react-onclickoutside": "^6.7.1",
@@ -140,5 +141,6 @@
   "volta": {
     "node": "18.18.2",
     "yarn": "1.22.17"
-  }
+  },
+  "devDependencies": {}
 }

src/components/src/common/styled-components.tsx

@@ -532,18 +532,18 @@ export const StyledModalInputFootnote = styled.div.attrs({
 export const StyledMapContainer = styled.div`
   width: 100%;
   height: 100%;
-  .mapboxgl-map {
-    .mapboxgl-missing-css {
+  .maplibregl-map {
+    .maplibregl-missing-css {
       display: none;
     }
-    .mapboxgl-ctrl-attrib {
+    .maplibregl-ctrl-attrib {
       display: none;
     }
   }
 `;
 
 export const StyledAttrbution = styled.div.attrs({
-  className: 'mapbox-attribution-container'
+  className: 'maplibre-attribution-container'
 })`
   bottom: 0;
   right: 0;
@@ -574,7 +574,7 @@ export const StyledAttrbution = styled.div.attrs({
     align-items: center;
     color: ${props => props.theme.labelColor};
 
-    a.mapboxgl-ctrl-logo {
+    a.maplibregl-ctrl-logo {
       width: 72px;
       margin-left: 4px;
       background-size: contain;

src/components/src/kepler-gl.tsx

@@ -111,7 +111,7 @@ const GlobalStyle = styled.div`
     color: ${props => props.theme.labelColor};
   }
 
-  .mapboxgl-ctrl .mapboxgl-ctrl-logo {
+  .maplibregl-ctrl .maplibregl-ctrl-logo {
     display: none;
   }
 `;

src/components/src/map-container.tsx

@@ -21,11 +21,11 @@
 // libraries
 import React, {Component, createRef, useMemo} from 'react';
 import styled, {withTheme} from 'styled-components';
-import {Map, MapRef} from 'react-map-gl';
+import {Map, MapRef} from 'react-map-gl/maplibre';
 import {PickInfo} from '@deck.gl/core/lib/deck';
 import DeckGL from '@deck.gl/react';
 import {createSelector, Selector} from 'reselect';
-import mapboxgl from 'mapbox-gl';
+import maplibregl from 'maplibre-gl';
 import {useDroppable} from '@dnd-kit/core';
 import debounce from 'lodash.debounce';
 
@@ -131,7 +131,7 @@ const StyledMap = styled(StyledMapContainer)<StyledMapContainerProps>(
   #default-deckgl-overlay {
     mix-blend-mode: ${mixBlendMode};
   };
-  *[mapboxgl-children] {
+  *[maplibregl-children] {
     position: absolute;
   }
 `
@@ -141,15 +141,16 @@ const MAPBOXGL_STYLE_UPDATE = 'style.load';
 const MAPBOXGL_RENDER = 'render';
 const nop = () => {};
 
-const MapboxLogo = () => (
+const MapLibreLogo = () => (
   <div className="attrition-logo">
     Basemap by:
     <a
-      className="mapboxgl-ctrl-logo"
+      style={{marginLeft: "5px"}}
+      className="maplibregl-ctrl-logo"
       target="_blank"
       rel="noopener noreferrer"
-      href="https://www.mapbox.com/"
-      aria-label="Mapbox logo"
+      href="https://www.maplibre.org/"
+      aria-label="MapLibre logo"
     />
   </div>
 );
@@ -259,22 +260,11 @@ export const Attribution: React.FC<{
           <DatasetAttributions datasetAttributions={datasetAttributions} isPalm={isPalm} />
           <div className="attrition-link">
             {datasetAttributions?.length ? <span className="pipe-separator">|</span> : null}
-            {isPalm ? <MapboxLogo /> : null}
+            {isPalm ? <MapLibreLogo /> : null}
             <a href="https://kepler.gl/policy/" target="_blank" rel="noopener noreferrer">
               © kepler.gl |{' '}
             </a>
-            <a href="https://www.mapbox.com/about/maps/" target="_blank" rel="noopener noreferrer">
-              © Mapbox |{' '}
-            </a>
-            <a
-              href="https://www.mapbox.com/map-feedback/"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <strong>Improve this map </strong>
-              {!isPalm ? <strong> | </strong> : null}
-            </a>
-            {!isPalm ? <MapboxLogo /> : null}
+            {!isPalm ? <MapLibreLogo /> : null}
           </div>
         </EndHorizontalFlexbox>
       </StyledAttrbution>
@@ -387,7 +377,7 @@ export default function MapContainerFactory(
     }
 
     _deck: any = null;
-    _map: mapboxgl.Map | null = null;
+    _map: maplibregl.Map | null = null;
     _ref = createRef<HTMLDivElement>();
     _deckGLErrorsElapsed: {[id: string]: number} = {};
 
@@ -515,7 +505,6 @@ export default function MapContainerFactory(
 
     _setMapboxMap: React.Ref<MapRef> = mapbox => {
       if (!this._map && mapbox) {
-        // @ts-expect-error react-map-gl.Map vs mapbox-gl.Map ?
         this._map = mapbox.getMap();
         // i noticed in certain context we don't access the actual map element
         if (!this._map) {
@@ -777,7 +766,7 @@ export default function MapContainerFactory(
 
       const extraDeckParams: {
         getTooltip?: (info: any) => object | null;
-        getCursor?: ({isDragging: boolean}) => string;
+        getCursor?: ({isDragging}: {isDragging: boolean}) => string;
       } = {};
       if (primaryMap) {
         extraDeckParams.getTooltip = info =>
@@ -1003,7 +992,7 @@ export default function MapContainerFactory(
         preserveDrawingBuffer: true,
         mapboxAccessToken: currentStyle?.accessToken || mapboxApiAccessToken,
         baseApiUrl: mapboxApiUrl,
-        mapLib: mapboxgl,
+        mapLib: maplibregl,
         transformRequest: this.props.transformRequest || transformRequest
       };
 
@@ -1090,7 +1079,7 @@ export default function MapContainerFactory(
               style={MAP_STYLE.top}
               mapboxAccessToken={mapProps.mapboxAccessToken}
               baseApiUrl={mapProps.baseApiUrl}
-              mapLib={mapboxgl}
+              mapLib={maplibregl}
               {...topMapContainerProps}
             />
           ) : null}