I’m wondering how to build something like this? I have the map in the right colors but need to darken the area outside the center circle.
actually it seems like the roads are the same but the non-roads are lighter.
I use other groups to overlay them. I have a background color set with a lower opacity set. So my first thought is to create a group and make it a circle, however you above example has lighter color circle…I don’t know how to make it inverse like that but you could play around with overlay groups and probably figure a way to it.
There may also be some code online you could dig up and use.
Is there a way to create the darker opacity on the outside of a circle instead of inside?
I can’t think how to do that.
Something like this?
Just make a group with a solid white background. Set its roundness to maximum required to make it round. Then set its opacity to 15% (or to your liking).
Then ensure you send the circle “to front”.
If this isn’t what you meant, please let me know.
That was my first thought but from a test app
I see how this works to an extent, but the darker the overlay of the black out, the less you can see in the white circle.
There should be a way to manage it so that you have a square that is the black out and then create like a donut hole that has a different opacity setting of the dark color … I wonder if there is some code that would do just that
One other thought is to possible have two of the same images…so one is the square with the blackout overlay, the second is the circle with the lighter dark overlay also as a circle…
After testing
Here is a example of the single image with set up of two overlay, one dark square and one white circle
Here is the example of the idea I had while typing, to use two images, one circular and two overlays, both dark, on circular with less opacity
In my opinion the second is better, gives more control over opacity issues etc.
Problem with second set up is that the image ratio needs to be equal ( ie. 1:1 ) for the circular effects to hold true.
Also make sure first square image is in back, then on top of that place the square dark overlay, next is the circular picture and on top is the circular overlay with lower opacity of dark color.
@ryan16 in case you are still trying
In my version I only used a single overlay. While it changes the color slightly, it’s not drastic and accents it well.
I’m curious which version Ryan will use!
so your image has the dark color already, so if you removed the white circle the entire image would be as dark as the area outside of the circle?
Yes. Maybe i misunderstood his post, but he starts off by saying that he has the map color right. So i assumed that was part of his plugin. Perhaps I’m wrong? Guess he will have to reply to find out!
Either way, there are good options here.
1 Like
Yes, that’s what I needed - version 2. Way better.
I haven’t tried it yet… But when I try the version with the white circle it prevents me from grabbing the map underneath it and scrolling it like normal. That’s a deal breaker. Is there a way to make the overlay be invisible to the clicks?
I am feeling like CSS is going to provide at least some of the solution here and be necessary, but I’m no expert.
Unfortunately there is not as it basically just sits on top of the other element. I use it a lot for setting up search results in repeating groups, and what I need to do is set conditionals on the elements underneath to correspond to what happens to the overlay group ( ie. when overlay group is hovered change group underneath color — when overlay group has no color; usually it is a link )
No sure if there would be a way to set conditionals on the map to scroll based on the overlay group getting clicked, but check out the possible conditionals you could create on the map.
Otherwise, yes, I think you’ll need CSS or some other code.
This topic was automatically closed after 70 days. New replies are no longer allowed.