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
Related
So I have 2 Table widgets and a Maps Widget on the Thingsboard, when I click an item in the list table, I want the maps to auto zoom to the marker in the second Maps Widget on the Thingsboard?
How to auto zoom on Maps Thingsboard with type openstreetmaps?
I would make two dashboards.
First one is the one you already have, so the map of all Devices/Assets and Table. On click of some table row set and action to navigate to new dashboard state.
Second dashboard is the one that opens up upon that previous action, and also has alias that will take dashboard state and point to clicked Device/Asset. With that, you can have a map that will show only that clicked Device/Asset and therefor zoom onto it.
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.
Suppose I wish to focus on the state of Colorado in the following chloropeth map:
The typical mechanism is to use the operating-system dependent means of dragging the picture. I am on OS/X so that involves using two fingers to drag the image to the desired new centering location.
However the actual result of that operation is a bounding box is displayed on the image (I can not get a screenshot of it since it disappears)
So then .. how to drag /re-center the Tableau display?
Click onto the small 'play' arrow button on the chart menu in the top left hand corner. A sub menu will pop up where you can select the scroll method you'd like - click and drag is one of these. You can also disable this through the chart options (the small drop down menu on the top right hand corner of the chart).
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.