I have developed a map using leaflet and leaflet.Markercluster. My problem is, that when the circle, at full zoom, is too near the original circle, it is not clickable.
In the image, you can see the pop-up that is displayed when you click on a circle. However, when you click on the red circle, no pop-up displays. Firstly, let me emphasise, that the red circle is actually the same as the other circles, I have just coloured red in this image, so I can refer to it. Based on this example, and other examples I have, the problem is when the circle is covered by the original circle (barely visible as an orange shade in the centre).
Is there a way to fix this?
Thanks
This is a known issue of Leaflet.markercluster plugin when you use CircleMarkers and they are spiderfied: see also this post on GIS Stack Exchange https://gis.stackexchange.com/questions/259376/reading-attribute-popup-information-from-cluster-presented-points-in-the-map-gen/259538?noredirect=1
This should normally have been fixed by default since 2018 (PR #846, included since v1.3.0), which version of Leaflet.markercluster are you using?
If you still have an issue, please raise an issue on the plugin repo, and provide a reproduction sample.
In the meantime, you can also use the old trick of increasing spiderfyDistanceMultiplier option to more than 1, so that the spiderfication is bigger, and the innermost Circle Marker extends beyond the Cluster icon.
Related
I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.
Hi I am trying to create custom buttons on unity (trapeziums). I successfully created the visible area on Photoshop and imported it as Sprite 2D UI as per the following image:
The issue arises, when I'm trying to select one of the buttons in game, their border overlap each other, since the transparent area is still being considered as part of the clickable button area. How can I remove this?
EDIT:
Practically when I import I want the squared boxes to not be counted with the image. I need the edges of the orange area to be cut flush with that and not the entire area(i.e. including the transparent boxes).
You may achieve this by using Alpha Hit Test Minimum Threshold. Take a look at this nice video tutorial.
There is one extra step that is not shown in the video but mentioned in the comments: you have to change "Mesh Type" to "Full Rect" and not "Tight" as it is.
Hope that helps.
The clickable area is based on the Rect Transform component of the GameObject. Adjust the width and height to the clickable area you want. You may have to crop your image in photoshop accordingly. If you select 'Gizmos' in the editor you can toggle viewing the click region.
I was asked to see if I could using leaflet draw a circle and as I'm drawing it show what the current expanding radius is. Either as a tooltip or write it to a page label. I noticed the circle option has a showRadius option but can you capture this value as your drawing the circle?
Kind of like the measure tool that uses the drawing plugin can show your distance as you move the mouse.
This way the user can see how big their circle is as they are drawing it.
Any ideas, examples, hints?
Leaflet.draw plugin does that.
Check out this demo
However, it shows radius only when you create a circle. Unfortunately, not when you edit it.
Been trying to get the slider to work as a banner of sorts. It is indeed working, mostly, but I keep bumping heads with this odd bug. The blue background takes the place of about half the image whenever it is moving, this can be due to a transition but also when you slide the image around slowly. See the picture below for more details.
The things I have done to the slider are simple, I've removed the share buttons, lowered both the arrows and the dots and finally I've added the two Icons seen above as circles on a white square. Please help!
I solved my problem by using another plugin. Others in my situation might want to try http://responsiveslides.com for another plugin.
I am creating a MapBox project with a geoJson vector layer. I have been using the following example as my guide.
https://www.mapbox.com/blog/neighborhood-mapping-with-dynamic-vector-data-layers/
When I hover over any geoJson feature the stroke is changed to 2 pixels. However the stroke gets clipped by the neighboring features sometimes. I believe this has something to do with how the different features are stacked. So if I hover on a feature which is stacked near the bottom the neighboring features are covering that stroke.
Here is an example...
http://www.vandam.com/chpc/inconsistent_stroke.jpg
Is their a way to set the stroke to be inside of the polygon or a way to bring a feature to the top of the stack when hovering?
Thanks for any help!
By adding the function
layer.bringtoFront();
after setting the hover styling your polygons will come to front.