[feat] mapbox and maplibre simultaneous support

Signed-off-by: Ihor Dykhta <[email protected]>

Author: igorDykhta

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

@@ -84,6 +84,10 @@ function App() {
             rel="stylesheet"
             href="http://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css"
           />
+          <link
+            rel="stylesheet"
+            href="http://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css"
+          />
           <link
             rel="stylesheet"
             href="https://unpkg.com/maplibre-gl@^3/dist/maplibre-gl.css"

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

@@ -75,6 +75,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,6 +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;}

examples/custom-reducer/index.html

@@ -4,6 +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;}

examples/custom-theme/index.html

@@ -4,6 +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;}

examples/demo-app/dist/index.html

@@ -4,6 +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">
     <link rel="stylesheet" href="/bundle.css">
     <style type="text/css">

examples/node-app/index.html

@@ -4,6 +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;}

examples/open-modal/index.html

@@ -4,6 +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;}

examples/umd-client/index.html

@@ -11,6 +11,7 @@
     />
 
     <!--MapBox css-->
+    <link href="https://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" />
 
     <!-- Load React/Redux -->
@@ -88,8 +89,8 @@
       /** END STORE **/
 
       /** COMPONENTS **/
-      const KeplerElement = (function(react, keplerGl, mapboxToken) {
-        return function(props) {
+      const KeplerElement = (function (react, keplerGl, mapboxToken) {
+        return function (props) {
           return react.createElement(
             'div',
             {style: {position: 'absolute', left: 0, width: '100vw', height: '100vh'}},

package.json

@@ -183,6 +183,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jsdom": "^24.1.1",
     "json-loader": "^0.5.4",
+    "mapbox-gl": "1.13.1",
     "maplibre-gl": "^3.6.2",
     "minimist": "^1.2.6",
     "nyc": "^15.1.0",

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

@@ -533,11 +533,24 @@ export const StyledMapContainer = styled.div`
       display: none;
     }
   }
+  .mapboxgl-map {
+    .mapboxgl-missing-css {
+      display: none;
+    }
+    .mapboxgl-ctrl-attrib {
+      display: none;
+    }
+  }
 `;
 
-export const StyledAttrbution = styled.div.attrs({
-  className: 'maplibre-attribution-container'
-})`
+export type StyledAttrbutionProps = {
+  mapLibCssClass: string;
+  mapLibAttributionCssClass: string;
+};
+
+export const StyledAttrbution = styled.div.attrs<StyledAttrbutionProps>(props => ({
+  className: props.mapLibAttributionCssClass
+}))<StyledAttrbutionProps>`
   bottom: 0;
   right: 0;
   position: absolute;
@@ -567,7 +580,7 @@ export const StyledAttrbution = styled.div.attrs({
     align-items: center;
     color: ${props => props.theme.labelColor};
 
-    a.maplibregl-ctrl-logo {
+    a.${props => props.mapLibCssClass}-ctrl-logo {
       width: 72px;
       margin-left: 4px;
       background-size: contain;

src/components/src/kepler-gl.tsx

@@ -109,6 +109,10 @@ const GlobalStyle = styled.div`
   .maplibregl-ctrl .maplibregl-ctrl-logo {
     display: none;
   }
+
+  .mapboxgl-ctrl .mapboxgl-ctrl-logo {
+    display: none;
+  }
 `;
 
 type BottomWidgetOuterProps = {