search

visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.78k stars 1.35k forks source link

Global Projection [Feat] #1906

Open aabright90 opened 2 years ago

aabright90 commented 2 years ago

Target Use Case

I have a client who uses react-map-gl for an application that predicts live events accross the United States that also has global application. He wants to use the latest version of mapbox-gl for its globe feature, but 'globe' isn't available to pass into to projection prop on the Map component.

Proposal

Is it possible to get this package to accomodate the latest version of mapbox-gl so that the globe feature can be used?

https://www.mapbox.com/blog/globe-view/?utm_campaign=email%7Cblast%7Cglobe-launch-weather&utm_content=Globe+view+announcement+1&utm_medium=email_action&utm_source=customer.io

patrik-u commented 2 years ago

We're interested in using the globe projection feature as well.

aabright90 commented 2 years ago

Cool, will this feature be availble in the latest version of React Map GL? And if so, when can this be expected?

patrik-u commented 2 years ago

I'm not part of the react-map-gl team, just part of another project who also want this feature :).

Pessimistress commented 2 years ago

I don't see why you can't use it now. projection accepts any string:

https://github.com/visgl/react-map-gl/blob/v7.0.12/src/mapbox/mapbox.ts#L272

aabright90 commented 2 years ago

"globe" isn't availble in the type declarations here: https://github.com/visgl/react-map-gl/blob/v7.0.12/src/types/external.ts#L4. The globe feature is only availble in Mapbox gl 2.9.1 and the latest version of react-map-gl uses Mapbox gl 2.8.0

Pessimistress commented 2 years ago

@aabright90 You can't set center and parallel with name: 'globe'. The map props allow any string passed to projection on top of ProjectionSpecification.

Pessimistress commented 2 years ago

Regardless, if this bothers you, feel free to open a PR.

patrik-u commented 2 years ago

@aabright90 You can't set center and parallel with name: 'globe'. The map props allow any string passed to projection on top of ProjectionSpecification.

Can you clarify what you mean? I try: 

const { map: mapbox } = useContext(MapContext);
...
mapbox.setProjection("globe");

And get error: Invalid projection name: globe

Is there a workaround for this?

Pessimistress commented 2 years ago

Set projection="globe". It's a prop on the Map component. The native map class is not typed by this library. It is imported from @types/mapbox-gl.

Also, the error you see is not a type error. It probably comes from mapbox-gl which means you do not have the latest version installed.

Pessimistress commented 2 years ago

the latest version of react-map-gl uses Mapbox gl 2.8.0

react-map-gl does not specify a mapbox-gl version. It is whatever version your own project installed.

patrik-u commented 2 years ago

After reinstalling the react-mapbox-gl package I got it to work. 

<Map projection="globe">
himelsaha29 commented 2 years ago

Globe projection prop works with latest react-mapbox-gl update