For the default mapbox layers toggle icon, how do you collapse the control on mouse click rather than hover? ANd then, how would you uncollapse on another click?
Thanks
Looking at the code for the layers control might be helpful.
You want to instantiate the layers control with the collapsed option set to false, then attach event handlers to its container, calling the (private) methods _collapse and _expand as needed.
Also, it should be possible to make a small Leaflet plugin to make a custom layers control with expand-on-click behaviour (and thus prevent calls to "private" methods from outside).
Related
Using Mapbox-gl-draw (https://github.com/mapbox/mapbox-gl-draw)
I am able to get the basic example up and running, and this package does everything I need. However, I am having trouble figuring out how to activate the draw functionality programatically. For example, my application has some panel overlays, and as part of a form I'd like to activate the draw ability by clicking a custom button, not the control button that shows on the map. Ideally I'd like to keep the map control button hidden (which I can do).
I've scoured the documentation with no luck. Anyone have any insight?
Demo of the functionality I am referring to here: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
It's documented in the API reference
changeMode(mode: string, options?: Object): draw
Changes Draw to another mode. Returns the draw instance for chaining.
In a map application based on Leaflet, I would like to have a large application menu, kind of a settings menu. I managed to put a nice button into the top right corner as a L.Control and it gets fired on a click.
The menu should position either to the left of the menu button or simply in the middle of the screen.
I am wondering whether it is best practice to use
a Popup,
a Layer,
another Control or
just position a at the right place on the page.
Trying the latter, I found that I have to set z-index to a very high value to see it, and it feels a bit odd not to use the Leafleat features.
What would be the "right" solution to use with Leaflet?
If you want a full screen map, you can use https://github.com/Turbo87/leaflet-sidebar
I use it here: http://franceimage.github.io/map
You can create a nice customized icons based toolbar using Leaflet easybutton plugin.
You will have all the leaflet based controls (Click, hover, position etc.) to set that up as per your requirements.
Here are the implementation examples:
http://danielmontague.com/projects/easyButton.js/v1/examples/
and github repo: https://github.com/CliffCloud/Leaflet.EasyButton
I have a custom div (with settings) within a map. I would like click event not to propagate to map when a user clicks on the div. How could one achieve such behavior?
Leaflet version 1.0.
See the documentation for L.DomEvent.stopPropagation().
For anyone else coming here from a search engine, if you are trying to prevent clicks from a circle or other interactive layer from being handled by the underlying object (other circle or the map itself) you could also create the layer passing the option bubblingMouseEvents: false
Documentation: http://leafletjs.com/reference-1.2.0.html#interactive-layer
I have 3 dropdown that are stacked on top of each other; I use canvas group to make the non relevant ones invisible; although the click is intercepted only on the topmost control.
How do you work around this? Should I keep track of the position in the hierarchy and swap it when I need to have a specific dropdown control so I can use it? Feels like a lot of work...hopefully is there an easier way?
The image component of UI elements has a Raycast Target property that you can set to false. This will make them unclickable.
I need some panels in GWT that have moveable functionality. This is so that if you have a series of event-driven panels that have to be displayed on screen, they aren't all directly on top of each other. This can cause problems when you want to compare two different panels or want to close panels in your own order.
I'm currently using PopupPanels which as far as I'm aware, don't have this functionality.
I think what you want is a DialogBox. This class is a movable PopupPanel and has a constructor argument to create it as non modal, meaning if set to non modal mouse/keyboard events outside the panel are not ignored, but passed to the underlying widgets. This allows to open multiple DialogBox at once and being able to click on them or what's under it.
However, these panels can be moved inside the whole browser window and it's not possible to limit the movable area in the browser window. If you want such functionality you might want to look at the http://code.google.com/p/gwt-dnd/ library, which makes it possible to create movable panels inside a specific area.
Does your DialogBox refuse to be moved/dragged around? Make sure you DO NOT add() it into your RootPanel. Just create a new dialog and call show() on it.