React-map-gl: Add support for "vw" and "vh" in map size parameters

[DominikLevitsky]

Right now the preferred attributes are numeric (width = { 100 }). Would be really awesome, if they could also be set in strings like "100vw" or "100%". Should be easy to implement.

[owap]

This is a desired behavior for us as well; we'd like to be able to specify that the map should be 100% of its parent container.

The problem is that I don't know how easy it'll be to implement, because the code assumes that the width is measured in pixels in some places:

  _calculateNewPitchAndBearing({pos, startPos, startBearing, startPitch}) {
    const xDelta = pos.x - startPos.x;
    const bearing = startBearing + 180 * xDelta / this.props.width;
...

[tftetrad]

As a temporary solution I am using this module: react-dimensions. Simply wrap the MapGL element in a <div style={{width: '100vw', height: '100vh'}}/> and then access the the width and height through the dimensions module.

[balthazar]

We don't plan to add support for non-pixels values soon, so react-dimensions is the way to go if you have an use-case like this.

[rlueder]

I landed here looking for an easy way to set the height and width of the map based on the dimentions of the parent component. The react-dimensions lib mentioned above is not maintained anymore so I came up with a solution using hooks (useEffect, useRef, useState) instead:

const MyMap = () => {
  const [state, setState] = React.useState({
    viewport: {
      latitude: 37.7577,
      longitude: -122.4376,
      zoom: 8
    }
  });

  const ref = React.useRef();

  React.useEffect(() => {
    if (ref.current) {
      setState({
        ...state,
        viewport: {
          ...state.viewport,
          height: ref.current.offsetHeight, // parent element height
          width: ref.current.offsetWidth // parent element width
        }
      });
    }
  }, []);

  return (
    <div className="Map" ref={ref}> // element used as a reference for height and width
      <ReactMapGL
        {...state.viewport}
        onViewportChange={viewport => {
          const { latitude, longitude, zoom } = viewport; // if you just spead viewport it'll cause an infinite resizing of the map, so we skip setting height and width with viewport changes
          setState({
            ...state,
            viewport: {
              ...state.viewport,
              latitude: latitude,
              longitude: longitude,
              zoom: zoom
            }
          });
        }}
      />
    </div>
  );
};

export default MyMap;

Docs for hooks can be found here: https://reactjs.org/docs/hooks-intro.html

[saadsaifse]

@rlueder how would this handle the resize of window? for me, the height does not change on window resize. Even though I set the parent div's height to 100%. Thoughts?

[rlueder]

@saadsaifse the example above was really just to take the dimensions of the parent element. To get the map to resize as the window resizes you'd probably have to add some event listeners (e.g. window.onresize) and from there resize your parent element, haven't tried it but something along those lines would work.

[Pessimistress]

We do not monitor closed issues, especially with something that is 3 years old. react-map-gl already supports CSS values in width and height. Please open a new issue if you have questions about the latest version.