I am working with a leaflet map that uses a custom image, draws rectangles on it with markers and tooltips at the center of each rectangle.
It includes a toolbar that sets a delete mode. In the delete mode, the click event on the rectangle changes the rectangle color and adds it to a list to delete. But the rectangle is not deleted.
However, the markers are deleted when clicked on. How do I disable this deletion?
I searched the Leaflet documentation looking for an option to disable deleting the marker: I couldn't find one.
Debugging in the browser, I see that after the handler I added for the onclick event on the marker, another handler is executed in leaflet that deletes the marker.
I've pored over the configuration settings for the map, but don't see where the delete is disabled for the rectangles.
Related
I have many markers on map with event listeners added to them. I also have a control on map that enables placing other shapes (circles) when map is clicked in the position of a click. The problem now is that clicking on position on the map where marker placed when control is enabled also triggers marker click event. Is there a solution in react-leaflet to add some pane on top of all other panes and layers so events are triggered only on that pane. The key thing here is that pane itself does not have leaflet event handlers, hence can not pass latLng to event callback. It only provides DOM mouseEvent but not LeafletMouseEvent that I need.
I want to have this component's size to only encapsulate the info button not the whole area. Is there a way to have a component have different sizes depending on components state.
Right now when i hover over that entire green area it changes to hover state, i want it to only activate when the "i" is hovered
If you choose the component state and go to the left menu you can hide layer you dont want
I know this is an old post but hopefully this helps someone. This same problem was driving me insane! But there is a simple solution:
Rather than using the default "Hover State" in the component create a "New State" which will function as your hover state and name it whatever you like and design the default and new states. Then, go to the Prototype tab, select the icon you want to trigger the hover animation, then add a new Interaction on the right panel. Set the Trigger to Hover, and the Destination to your new state. Works perfectly, and now you will only trigger the hover animation when hover over your icon rather than the entire component area.
The issue is this:
left-click in the chart area and HOLD the left button
now the brush-drag is active: we can move the mouse around and the area will follow
but when we exit the chart area (e.g. far to the right on the grey area) and then release the mouse button (still on the grey area), the brush-drag mode gets stuck
what I mean is, when you now move the mouse back to the chart area, the brush-drag is still active: i.e. the mouse move will resize the brush area although the left-mouse button is NOT pressed down anymore
this will only stop when you make another click inside the chart area
How can we avoid this?
what I want to happen is that the brush area just selects all the data (until the border of the chart) and then stops: i.e. it should do the same as when I release the mouse button in the chart
So I thought I can just send a mouseup event when the mouse leaves the chart area - but this does not work
I also did not find a suitable action in the echart-docs
Here is a full jsfiddle example and the mouseup event that I tried to send:
const mouseUpEvent = new MouseEvent('mouseup');
var echartsDom = myChart.getDom();
var canceled = echartsDom.dispatchEvent(mouseUpEvent);
This was a bug echarts#10675 that has been fixed in version 4.5.0
I have followed the mapbox toggle layers demo (https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/) on my map project.
In order to turn a layer 'off', I need to click twice on the actual button - once to select, and then a second time to actually hide the layer.
The demo map only requires a single click to show/hide layers.
How can I fix this?
My map is at: https://qlddogs.com.au/maptest2.html
I need to add a control button with a "rectangle" zoom or what's called the boxZoom function in leaflet. I know that the function can be used when pressing shift and drawing a rectangle but I need a button that gets clicked and then the user can draw a rectangle which is used a bounds for the boxZoom function. I thought this wouldn't be difficult but I just can't figure it out.
Bonus points if you could tell me how to link other functions, e.g. of leaflet.draw, to my own buttons. I need to create my own button toolbar, so I need to be able to attach different functions to the buttons and would like to use already existing functions.
There isn't a one size fits all solution for this (thus the reason for L.Control.BoxZoom being its own plugin). You'll need to add buttons with click handlers, then read the API of Leaflet or the plugin you're integrating with (e.g. drawing) to find how to toggle the behavior.
The Leaflet.EasyButton plugin does a good job of encapsulating the creation of single button controls and click handlers in an easy way, and may be a good starting point if you're struggling with getting started.