Global Projection [Feat]

[aabright90]

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]

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

[aabright90]

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

[patrik-u]

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

[Pessimistress]

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]

"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]

@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]

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

[patrik-u]

@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]

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]

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]

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

<Map projection="globe">

[himelsaha29]

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