-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
MapLibre basemap #2461
Changes from all commits
a714b76
fa16840
5924541
1f5b0ed
e8c8e58
fd983cc
00f31e5
c55b456
db8d3cd
536809b
2879d7f
16c0677
ba68773
f66e2f9
056e9d0
6aea09f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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}> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 = () => ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe we should use react-map-gl's There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 ). 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If we remove this code in
and then also remove this in
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Using There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
); | ||
|
@@ -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} | ||
|
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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?