Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MapLibre basemap #2461

Merged
merged 16 commits into from
Dec 19, 2023
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Q: Have you tested the jupyter integration?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, in general I had a hard time running the examples and would love some help with that.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How can I test the jupyter bindings locally?

/>
<style type="text/css">
{`font-family: ff-clan-web-pro, 'Helvetica Neue', Helvetica, sans-serif;
Expand Down
2 changes: 1 addition & 1 deletion bindings/kepler.gl-jupyter/js/webpack/build-html.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [

Expand Down
2 changes: 1 addition & 1 deletion examples/custom-map-style/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions examples/custom-map-style/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like you have some editor that auto sorts imports, package.json etc (or perhaps it just your good habita). But this makes the PR bigger than it has to be and can conflict with other users. Is it possible to avoid these changes? Alternatively get those landed first so the functional change set is smaller.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I tried to run this example, and got an error that it couldn't find the 'store' and 'app', and it worked when I added the extensions. Will make a PR just for that, and some of the other minor changes that are unrelated to maplibre.

import App from './app.tsx';

const Root = () => (
<Provider store={store}>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-reducer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-theme/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/demo-app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/node-app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/open-modal/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/replace-component/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/umd-client/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions jest.setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,6 @@ jest.mock('@kepler.gl/utils', () => ({
hasPortableWidth: jest.fn(),
hasMobileWidth: jest.fn()
}));

global.URL.createObjectURL = jest.fn();

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
9 changes: 6 additions & 3 deletions scripts/ast-helper.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
10 changes: 6 additions & 4 deletions src/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -140,5 +141,6 @@
"volta": {
"node": "18.18.2",
"yarn": "1.22.17"
}
},
"devDependencies": {}
}
10 changes: 5 additions & 5 deletions src/components/src/common/styled-components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/src/kepler-gl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
`;
Expand Down
39 changes: 14 additions & 25 deletions src/components/src/map-container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -131,7 +131,7 @@ const StyledMap = styled(StyledMapContainer)<StyledMapContainerProps>(
#default-deckgl-overlay {
mix-blend-mode: ${mixBlendMode};
};
*[mapboxgl-children] {
*[maplibregl-children] {
position: absolute;
}
`
Expand All @@ -141,15 +141,16 @@ const MAPBOXGL_STYLE_UPDATE = 'style.load';
const MAPBOXGL_RENDER = 'render';
const nop = () => {};

const MapboxLogo = () => (
const MapLibreLogo = () => (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should use react-map-gl's AttributionControl instead. Right now there's no mention of MapTiler or Carto in the attribution when their maps are used. I assume that would mean breaching their licenses.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There should be not a logo but a small attribution text (this is from a deck.gl example ).
image.

For some reason this seems to have been lost in the kepler.gl baseline (presumably not an issue with this PR): #2462. If so we could land this and fix that separately. Or fix that first, and rebase to make sure maplibre doesn't clobber it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we remove this code in styled-components.tsx (which hides the default attribution):

   .maplibregl-ctrl-attrib {
      display: none;
    }

and then also remove this in map-container.tsx:

{this.props.primary ? (
            <Attribution
              showMapboxLogo={this.state.showMapboxAttribution}
              showOsmBasemapAttribution={true}
              datasetAttributions={datasetAttributions}
            />
          ) : null}

Then the default attribution will show up:
image

Copy link
Collaborator

@ilyabo ilyabo Dec 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or for dark matter:

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using AttributionControl is actually not required for that. Only if we want to add customAttribution.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyways, we should probably rework the attribution rendering, and it can be done in a separate PR.

<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>
);
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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} = {};

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 =>
Expand Down Expand Up @@ -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
};

Expand Down Expand Up @@ -1090,7 +1079,7 @@ export default function MapContainerFactory(
style={MAP_STYLE.top}
mapboxAccessToken={mapProps.mapboxAccessToken}
baseApiUrl={mapProps.baseApiUrl}
mapLib={mapboxgl}
mapLib={maplibregl}
{...topMapContainerProps}
/>
) : null}
Expand Down