React-map-gl: Enable CSS position style overrides (Can't use absolute positioning)

[ljbade]

The map element always has relative positioning set using the width and height properties of the component.

I would like to avoid needing to resize the element via JavaScript events, and instead just use CSS positioning.

Can you add a property that if set to true, stops any positioning styles being added by the component so I can just style it via the stylesheet?

[ibgreen]

Sounds like a reasonable request. Want to propose a PR?

[ljbade]

@ibgreen Sure, I'll make a PR when I get a chance to work on the map integration again.

[ibgreen]

Maybe we could just have a mode where this component is set to '100%' if no width and height is given, and the app could wrap it in wrapper divs/flexbox etc components and style those as it wants.

We'd need to deduce the component size internally to get the viewport calculations correct - there is the concern about a perf hit from size queries on elements causing "reflows" but in practice this has not seemed to be a problem. And we need only query when explicit size is not passed in....

[NLincoln]

+1 on ibgreen's comment above, but if you're worried about a possible perf hit you could possibly put an example on the docs website detailing how users could do it themselves, that way they understand the possible performance implications? Then if the user think the perf hit is acceptable they can c/p the code into their own repo.

[mlg87]

@ibgreen any update on this? atm im using react measure to get the dimensions of the container and then passing that into the map, but having it occupy the space of its container (that is set via css) would be fantastic

[Pessimistress]

This feature is planned for v4.

[Pessimistress]

4.0.0-beta.1