Styling for Feature on Line and Polygon

[ngrhadi]

I was using styling for Feature data using default Openlayers because RLayer in some reason not work or showing what must to be,
I'm using "rlayers": "^1.4.0", for react I'm using "react": "^18.0.0", and Openlayers "ol": "^6.14.1", .

here when I using point and it's work well but not when I'm using RStyle.

<RLayerVector
	properties={{ label: "Demand From Fetching" }}
	zIndex={5}
	style={
		new Style({
			image: new CircleStyle({
				radius: 2,
				fill: new Fill({
					color: "purple",
				}),
				stroke: new Stroke({
					color: "#212529",
					width: 1,
				}),
			}),
		})
	}>
	{featuresDemand.map((f) => (
		<RFeature key={f.get("id")} feature={f}>
			<ROverlay
				position={[f.get("longitude"), f.get("latitude")]}
				offset={[-10, -10]}
				element={
					<div
						style={{
							backgroundColor: "#212529",
							color: "#ffffff",
							padding: "5px",
							fontSize: "12px",
							fontWeight: "bold",
							textAlign: "center",
						}}>
						{f.get("status")}
					</div>
				}>
				<RPopup
					trigger={"hover"}
					className="example-overlay"
					delay={{ show: 1, hide: 5 }}
					onClose={() => {
						setSelected(false);
					}}></RPopup>
			</ROverlay>
		</RFeature>
	))}
	<RInteraction.RModify
		condition={selectedLayer === altKeyOnly}
		deleteCondition={React.useCallback(
			(e) => altKeyOnly(e) && doubleClick(e),
			[],
		)}
	/>
</RLayerVector>

for Line and polygon with same customization it's not work, and also with using RStyle, like so

<RStyle.RStyle>
	<RStyle.RStroke color="#ffff" width={3} lineJoin="round" />
</RStyle.RStyle>

any guide for me?

[ngrhadi]

For line and polygon it's not work just on Feature, but on GeoJSON layer it's work well, here response fetching for line

const {
	data: lvOgConductorDataViewSet,
	isLoading: isLoadingLvOgConductor,
	isError: isErrorLvOgConductor,
	isSuccess: isSuccessLvOgConductor,
} = useLvOg();

if (lvOgConductorDataViewSet === null) {
	return <div>{isLoadingLvOgConductor}</div>;
} else if (isErrorLvOgConductor) {
	return <div>{isErrorLvOgConductor}</div>;
} else if (isSuccessLvOgConductor) {
	return { lvOgConductorDataViewSet };
}

const featuresLvOg = Object.keys(lvOgConductorDataViewSet ?? {}).map(
	(key) =>
		new Feature({
			geometry: new LineString(
				lvOgConductorDataViewSet[key].geometry.coordinates,
			),
			id: lvOgConductorDataViewSet[key].id,
			status: lvOgConductorDataViewSet[key].status,
			phasing: lvOgConductorDataViewSet[key].phasing,
			usage: lvOgConductorDataViewSet[key].usage,
			dat_qty_cl: lvOgConductorDataViewSet[key].dat_qty_cl,
			db_oper: lvOgConductorDataViewSet[key].db_oper,
			label: lvOgConductorDataViewSet[key].label,
			remarks: lvOgConductorDataViewSet[key].remarks,
			device_id: lvOgConductorDataViewSet[key].device_id,
			lvdb_in_no: lvOgConductorDataViewSet[key].lvdb_in_no,
			lvdb_ot_no: lvOgConductorDataViewSet[key].lvdb_ot_no,
			in_lvdb_id: lvOgConductorDataViewSet[key].in_lvdb_id,
			out_lvdb_id: lvOgConductorDataViewSet[key].out_lvdb_id,
			length: lvOgConductorDataViewSet[key].length,
		}),
);
// console.log(featuresLvOg.map((item) => item)); // work

I'm using React-Query for fetching to integrated with react-hook-form to query attribute table.

[mmomtchev]

A circle by itself doesn't do anything, you also have to specify a fill color or a stroke color:

<RStyle.RStyle>
    <RStyle.RCircle radius={5}>
        <RStyle.RFill color='red' />
    </RStyle.RCircle>
</RStyle.RStyle>

This is a solid red circle with a radius of 5 pixels.
You can check the examples for how to use the styles.

Also , you are using lots of non existing properties - ROverlay doesn't have element, position or offset, RPopup doesn't have onClose, RCircle doesn't have lineJoin or color.

[ngrhadi]

I was check it, and I was using you sample on Point it's work, thanks
here when I was create line

<RStyle.RStyle>
   <RStyle.RStroke color="red" />
</RStyle.RStyle>

that's not work sir, what maybe my data when to provide that Linestring Feature has wrong?

[mmomtchev]

The width parameter is mandatory - if you use TypeScript or a smart code editor - it would point these issues to you before even running your code.

[ngrhadi]

Thanks sir, my bad, I was not configured linestring exactly as openlayers want, and now I have issues to display multiLineString with object.key.

Thanks for your time sir, really appreciate 🙏