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
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.
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 am building a map application using the Bing Maps API 7.0 javascript control. I am trying to figure out how to toggle the default "draggable" behavior of the map. I want my users to be able select a rectangular region by clicking in one corner, and then dragging the mouse to the other corner. Is this possible?
I'm not asking for any help with the selection behavior, just the ability to toggle the draggable behavior. Thanks!
The easiest way to do this is to set the map options to disable panning/zooming:
map.setOptions({disableZooming: true, disablePanning: true});
When you want to be able to move the map again then set these values to false.
The JavaFX 2 colour picker has a button that pops up a colour chooser pane like so:
I'd like to do something similar, in that I'd like a custom pane to pop up when the button is clicked on and disappear when something else is clicked (in my case, a few image thumbnails). What would be the best way of achieving this? Should I use a ContextMenu and add a pane to a MenuItem somehow, or is there something else I should look at?
It's kind of difficult to do well with the current JavaFX 2.2 API.
Here are some options.
Use a MenuButton with a graphic set in it's MenuItem
This is the approach taken in Button with popup showed below's executable sample code.
Use a PopupControl
Take a look at how the ColorPicker does this in it's code.
ColorPicker extends PopupControl. You could do this, but not all of the API required to build your own PopupControl is currently public. So, for JavaFX 2.2, you would have to rely on internal com.sun classes which are deprecated and will be replaced by public javafx.scene.control classes in JDK8.
Use a ContextMenu
So, I think your idea to "use a ContextMenu and add a pane to a MenuItem" is probably the best approach for now. You should be able to do this by using a CustomMenuItem or setting a graphic on a normal MenuItem. The ContextMenu has nice relative positioning logic. A ContextMenu can also be triggered by a MenuButton.
Use a Custom Dialog
To do this, display a transparent stage at a location relative to the node.
There is some sample code to get you started which I have temporarily linked here.
The sample code does relative positioning to the sides of the main window, but you could update it to perform positioning relative to the sides of a given node (like the ContextMenu's show method).
Use a Glass Pane
To do this, create a StackPane as your root of your main window. Place your main content pane as the first node in the StackPane and then create a Group as the second node in the stackpane, so that it will layer over the top of the main content. Normally, the top group contains nothing, but when you want to show your popup, place it in the top group and translate it to a location relative to the appropriate node in your main content.
You could look at how the anchor nodes in this demo are used to see how this might be adaptable to your context.
Is there a relevant update for this for JavaFX8?
There is not much difference of relevance for Java 8, in general the options are as outlined in this post based on Java 2.2 functionality. Java 8 does add Dialog and Alert functionality, but those are more targeted at use of dialogs with borders, titles and buttons rather than the kind of functionality desired in the question. Perhaps you might be able to start from the Dialog class and heavily customize it to get something close to what is needed, but you are probably better off starting from a blank stage or PopupControl instead.
For business use Microsoft charge extra for use of the Bing Maps birds eye angled view, so my client has ask that I disable this option. In verion 6.3 of the control this was easy, there is a map option that can be used to do this: enter link description here
However, I can't find how to do this using the API with version 7 of the control. The current menu has Birds eye as an option with check boxes show labels and show angled view. Ideally I'd like to disable the option from the menu so that users are only able to view road and aerial views. So it looks like I have two options available:-
1) Hide the show angled view check box somehow with css. The issue here is that I can't get to the HTML content using the IE developer toolbar of firebug as it only displays when selected.
2) Attach to the map maptypechanged event and if birds eye map selected set it back to the map type it used to be.
Both of the above are far from ideal. Does anyone have a suggestion for the best way of doing this?
Sample code:
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{
credentials: 'Your Bing Maps Key',
disableBirdseye:true
});
here are some working examples from the iSDK:
http://www.bingmapsportal.com/isdk/ajaxv7#CreateMapWithMapOptions14
API Reference:
And here is the MSDN:
http://msdn.microsoft.com/en-us/library/gg427603.aspx
disableBirdseye
boolean
A boolean indicating whether to disable the bird’s eye map type. The default value is false. If this property is set to true, bird’s eye will be removed from the map navigation control and the birdseyeMapTypeId is disabled. Additionally, the auto map type will only display road or aerial.
This property can only be set when using the Map constructor.
You're correct in stating that there is no way currently using the v7 API to disable individual map styles. A possible Option #3 which is less hackish, but requires a bit more work, is to set the showMapTypeSelector property of the MapOptions to false, which would have the effect of hiding the entire map style selection dropdown. Then create your own custom navigation menu that only includes links to those styles you want to allow the user to choose.