RCircle style not showing when together with RIcon

[WizzardMaker]

So I have a RLayerCluster with a dynamic RStyle that should render a style with a circle and an icon.

But as soon I add the RIcon to the style the RCircle disappears

<RLayerCluster features={feats} ref={layerRef} key={'trackable-features-layer'} zIndex={50}>
	<RStyle render={useCallback((feature, resolution) => {
		const size = feature.get("features").length;

		// This is the size (number of features) of the cluster
		if (size > 1) {
			// Render a blob with a number
			return (
				<>
					<RCircle radius={16}>
						<RFill color="#05164d" />
					</RCircle>
					<RText scale={1.5} text={size.toString()}>
						<RFill color="#fff" />
					</RText>
				</>
			);
		}

		// We have a single feature cluster
		const unclusteredFeature = feature.get("features")[0];

		const svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640" height="512" enable-background="new 0 0 30 30" xml:space="preserve"><path fill="#00FFFF" d="M143.25 220.81l-12.42 46.37c-3.01 11.25-3.63 22.89-2.41 34.39l-35.2 28.98c-6.57 5.41-16.31-.43-14.62-8.77l15.44-76.68c1.06-5.26-2.66-10.28-8-10.79l-77.86-7.55c-8.47-.82-11.23-11.83-4.14-16.54l65.15-43.3c4.46-2.97 5.38-9.15 1.98-13.29L21.46 93.22c-5.41-6.57.43-16.3 8.78-14.62l76.68 15.44c5.26 1.06 10.28-2.66 10.8-8l7.55-77.86c.82-8.48 11.83-11.23 16.55-4.14l43.3 65.14c2.97 4.46 9.15 5.38 13.29 1.98l60.4-49.71c6.57-5.41 16.3.43 14.62 8.77L262.1 86.38c-2.71 3.05-5.43 6.09-7.91 9.4l-32.15 42.97-10.71 14.32c-32.73 8.76-59.18 34.53-68.08 67.74zm494.57 132.51l-12.42 46.36c-3.13 11.68-9.38 21.61-17.55 29.36a66.876 66.876 0 0 1-8.76 7l-13.99 52.23c-1.14 4.27-3.1 8.1-5.65 11.38-7.67 9.84-20.74 14.68-33.54 11.25L515 502.62c-17.07-4.57-27.2-22.12-22.63-39.19l8.28-30.91-247.28-66.26-8.28 30.91c-4.57 17.07-22.12 27.2-39.19 22.63l-30.91-8.28c-12.8-3.43-21.7-14.16-23.42-26.51-.57-4.12-.35-8.42.79-12.68l13.99-52.23a66.62 66.62 0 0 1-4.09-10.45c-3.2-10.79-3.65-22.52-.52-34.2l12.42-46.37c5.31-19.8 19.36-34.83 36.89-42.21a64.336 64.336 0 0 1 18.49-4.72l18.13-24.23 32.15-42.97c3.45-4.61 7.19-8.9 11.2-12.84 8-7.89 17.03-14.44 26.74-19.51 4.86-2.54 9.89-4.71 15.05-6.49 10.33-3.58 21.19-5.63 32.24-6.04 11.05-.41 22.31.82 33.43 3.8l122.68 32.87c11.12 2.98 21.48 7.54 30.85 13.43a111.11 111.11 0 0 1 34.69 34.5c8.82 13.88 14.64 29.84 16.68 46.99l6.36 53.29 3.59 30.05a64.49 64.49 0 0 1 22.74 29.93c4.39 11.88 5.29 25.19 1.75 38.39zM255.58 234.34c-18.55-4.97-34.21 4.04-39.17 22.53-4.96 18.49 4.11 34.12 22.65 39.09 18.55 4.97 45.54 15.51 50.49-2.98 4.96-18.49-15.43-53.67-33.97-58.64zm290.61 28.17l-6.36-53.29c-.58-4.87-1.89-9.53-3.82-13.86-5.8-12.99-17.2-23.01-31.42-26.82l-122.68-32.87a48.008 48.008 0 0 0-50.86 17.61l-32.15 42.97 172 46.08 75.29 20.18zm18.49 54.65c-18.55-4.97-53.8 15.31-58.75 33.79-4.95 18.49 23.69 22.86 42.24 27.83 18.55 4.97 34.21-4.04 39.17-22.53 4.95-18.48-4.11-34.12-22.66-39.09z"/></svg>'

		// Render a star
		return <>
			<RCircle radius={16}>
				<RFill color="#05164d" />
			</RCircle>
			<RIcon
				scale={16 / icon[1]}
				src={'data:image/svg+xml,' + encodeURIComponent(svg)} >
			</RIcon>
			</>
	}, [])}>
	</RStyle>
</RLayerCluster>

[mmomtchev]

You can't do this using OpenLayers styles - at least not directly - as a Style can contain only one image and both the Icon and the Circle are images
What you can do is create two features, each one with the corresponding style, and use zIndex to control which one is drawn over the other
However rlayers does not currently support zIndex, so I considering this issue to be about adding zIndex

[mmomtchev]

Or you can also do it with an array of styles, but this too will require additional features in rlayers

[mmomtchev]

@WizzardMaker try this

// Render a star
return (
    <RStyleArray>
        <RStyle>
            <RCircle radius={16}>
                <RFill color='#05164d' />
            </RCircle>
        </RStyle>
        <RStyle>
            <RIcon
                scale={0.1}
                src={'data:image/svg+xml,' + encodeURIComponent(svg)}
            ></RIcon>
        </RStyle>
    </RStyleArray>
);

but you still need zIndex to control the overlaying

[WizzardMaker]

@WizzardMaker try this

// Render a star
return (
    <RStyleArray>
        <RStyle>
            <RCircle radius={16}>
                <RFill color='#05164d' />
            </RCircle>
        </RStyle>
        <RStyle>
            <RIcon
                scale={0.1}
                src={'data:image/svg+xml,' + encodeURIComponent(svg)}
            ></RIcon>
        </RStyle>
    </RStyleArray>
);

but you still need zIndex to control the overlaying

This kinda works.
It shows the circle, but now all features look the same

This is how it looks like if I only use RIcon and add the circle by editing the SVG (each feature can have a different icon)

[mmomtchev]

@WizzardMaker currently an RStyleArray cannot be dynamic, let me think if there is an easy solution to this

[mmomtchev]

@WizzardMaker I will probably add some sort of example with this
This is the proper way to do it, but there was a bug in rlayers that prevented a dynamic RStyleArray from working propely

I will release a new version very soon

<RLayerCluster features={feats} key={'trackable-features-layer'} zIndex={50}>
    <RStyleArray
        render={useCallback((feature, resolution) => {
            const size = feature.get('features').length;

            // This is the size (number of features) of the cluster
            if (size > 1) {
                // Render a blob with a number
                return (
                    <React.Fragment>
                        <RStyle>
                            <RCircle radius={16}>
                                <RFill color='#05164d' />
                            </RCircle>
                            <RText scale={1.5} text={size.toString()}>
                                <RFill color='#fff' />
                            </RText>
                        </RStyle>
                    </React.Fragment>
                );
            }

            // We have a single feature cluster
            const unclusteredFeature = feature.get('features')[0];

            const svg =
                '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="640" height="512" enable-background="new 0 0 30 30" xml:space="preserve"><path fill="#00FFFF" d="M143.25 220.81l-12.42 46.37c-3.01 11.25-3.63 22.89-2.41 34.39l-35.2 28.98c-6.57 5.41-16.31-.43-14.62-8.77l15.44-76.68c1.06-5.26-2.66-10.28-8-10.79l-77.86-7.55c-8.47-.82-11.23-11.83-4.14-16.54l65.15-43.3c4.46-2.97 5.38-9.15 1.98-13.29L21.46 93.22c-5.41-6.57.43-16.3 8.78-14.62l76.68 15.44c5.26 1.06 10.28-2.66 10.8-8l7.55-77.86c.82-8.48 11.83-11.23 16.55-4.14l43.3 65.14c2.97 4.46 9.15 5.38 13.29 1.98l60.4-49.71c6.57-5.41 16.3.43 14.62 8.77L262.1 86.38c-2.71 3.05-5.43 6.09-7.91 9.4l-32.15 42.97-10.71 14.32c-32.73 8.76-59.18 34.53-68.08 67.74zm494.57 132.51l-12.42 46.36c-3.13 11.68-9.38 21.61-17.55 29.36a66.876 66.876 0 0 1-8.76 7l-13.99 52.23c-1.14 4.27-3.1 8.1-5.65 11.38-7.67 9.84-20.74 14.68-33.54 11.25L515 502.62c-17.07-4.57-27.2-22.12-22.63-39.19l8.28-30.91-247.28-66.26-8.28 30.91c-4.57 17.07-22.12 27.2-39.19 22.63l-30.91-8.28c-12.8-3.43-21.7-14.16-23.42-26.51-.57-4.12-.35-8.42.79-12.68l13.99-52.23a66.62 66.62 0 0 1-4.09-10.45c-3.2-10.79-3.65-22.52-.52-34.2l12.42-46.37c5.31-19.8 19.36-34.83 36.89-42.21a64.336 64.336 0 0 1 18.49-4.72l18.13-24.23 32.15-42.97c3.45-4.61 7.19-8.9 11.2-12.84 8-7.89 17.03-14.44 26.74-19.51 4.86-2.54 9.89-4.71 15.05-6.49 10.33-3.58 21.19-5.63 32.24-6.04 11.05-.41 22.31.82 33.43 3.8l122.68 32.87c11.12 2.98 21.48 7.54 30.85 13.43a111.11 111.11 0 0 1 34.69 34.5c8.82 13.88 14.64 29.84 16.68 46.99l6.36 53.29 3.59 30.05a64.49 64.49 0 0 1 22.74 29.93c4.39 11.88 5.29 25.19 1.75 38.39zM255.58 234.34c-18.55-4.97-34.21 4.04-39.17 22.53-4.96 18.49 4.11 34.12 22.65 39.09 18.55 4.97 45.54 15.51 50.49-2.98 4.96-18.49-15.43-53.67-33.97-58.64zm290.61 28.17l-6.36-53.29c-.58-4.87-1.89-9.53-3.82-13.86-5.8-12.99-17.2-23.01-31.42-26.82l-122.68-32.87a48.008 48.008 0 0 0-50.86 17.61l-32.15 42.97 172 46.08 75.29 20.18zm18.49 54.65c-18.55-4.97-53.8 15.31-58.75 33.79-4.95 18.49 23.69 22.86 42.24 27.83 18.55 4.97 34.21-4.04 39.17-22.53 4.95-18.48-4.11-34.12-22.66-39.09z"/></svg>';

            // Render a star
            return (
                <React.Fragment>
                    <RStyle>
                        <RCircle radius={16}>
                            <RFill color='#05164d' />
                        </RCircle>
                    </RStyle>
                    <RStyle>
                        <RIcon
                            scale={0.025}
                            src={'data:image/svg+xml,' + encodeURIComponent(svg)}
                        ></RIcon>
                    </RStyle>
                </React.Fragment>
            );
        }, [])}
    ></RStyleArray>
</RLayerCluster>

[mmomtchev]

Implemented in 1.1.0