RLayers RLayerVector no height

Question

I'm trying to use RLayers for a project, but I'm having a hard time with pretty simple task: "Add some 1 by 1 km squares to the map". I don't know if it's the issue, but I can see when I inspect things that the RMap itself has the correct 100% height (also it works fine), but the RLayerVector has a height of 0 - which could explain why I can't see them:

<RMap width={"100%"} height={"100%"}
    initial={view}
    view={[view, setView]} 
    className="MapView">
    <ROSM />
    <div className="MapView_squares_overlay"> //this div might not be needed
        <RLayerVector zIndex={10}>
            <RStyle.RStyle>
                {/* styling for said squares */}
                <RStyle.RRegularShape points={4}>
                    <RStyle.RFill color="blue" />
                </RStyle.RRegularShape>
            </RStyle.RStyle>
            {zones.map((zone, index) => {
                const x1 = view.center[0]; //to assure that they're within the viewport
                const y1 = view.center[1];
                return <RFeature
                    key={index}
                    geometry={
                        new Polygon([
                            [
                                [x1, y1],
                                [x1, y1 + 1000],
                                [x1 + 1000, y1 + 1000],
                                [x1 + 1000, y1],
                                [x1, y1],
                            ],
                        ])
                    }
                    style={undefined}
                />;
            })}
        </RLayerVector>
    </div>
</RMap>

I got some styling to go with it, but I doubt that that is doing any difference right now:

.MapView{
    position: fixed;
    top:0;
    right:0;
    margin: 0; 
    padding: 0;
    width: 100vw;
    height: 100vh;
}

.MapView_squares_overlay{
    position: absolute;
    top:0;
    right:0;
    margin: 0; 
    padding: 0;
    width: 100vw;
    height: 100vh;
}

Any suggestions are appreciated!

Answer 1

You are using a point style - it specifies a shape which means that it can be applied only to a point.

Transform your style to

<RStyle.RStyle>
  <RStyle.RFill color='blue' />
</RStyle.RStyle>

and you will see them.

However they will tend to move around as you move and zoom since they depend on the view center.