Comments (7)
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
from rlayers.
Or you can also do it with an array of styles, but this too will require additional features in rlayers
from rlayers.
@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
from rlayers.
@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)
from rlayers.
@WizzardMaker currently an RStyleArray
cannot be dynamic, let me think if there is an easy solution to this
from rlayers.
@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>
from rlayers.
Implemented in 1.1.0
from rlayers.
Related Issues (20)
- Is it possible to load tiles using the setTileLoadFunction ? HOT 2
- Unable to use `RPopup` with `RLayerCluster` HOT 10
- Snap doesn't work when use Rmodify HOT 4
- Can't set default rotation in the RView HOT 1
- map is undefined HOT 2
- Improvements for RLayerTileWMSProps HOT 1
- onDrawStart and onDrawEnd not working for RModify interaction HOT 4
- Calling an event only once HOT 3
- Setting tabindex HOT 2
- improve tile layer props HOT 1
- Google Maps Integration HOT 1
- RLayerTileWMS refresh unexpectly HOT 9
- Event Propagation in onPointerDrag HOT 3
- RDragZoom does not extend RDragBox and onChange appears not to work
- RLayerCluster url loading with react suspense
- How can I set map projection on EPSG:5514 HOT 4
- On click overlapping elements, both area triggered HOT 2
- With React 18, dynamic styles are not always updated
- Example page for Extending rlayers is broken HOT 1
- Uncaught DOMException when using RControl.RCustom component
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rlayers.