I'm very confused... If I pass draw: false. I get a toolbar. I need to customize this toolbar so I passed in the parameters to ensure only imperial units were being used at the time and well. Now I have 2 toolbars. How to disable the defualt one?
Had drawControl: true when initializing the map. That was the issue.
Related
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 a requirement, where I need to show few tabs on selection of a value from a drop down.
I have done this in classic UI. But not sure how to proceed for Touch UI. I know that we can use JQuery, Can anyone let me know the approach I can use.
Its fairly simple, look at the OOTB List Component /libs/foundation/components/list. The selection dropdown is defined - /libs/foundation/components/list/cq:dialog/content/items/column/items/listFrom, look at property class and cq-dialog-dropdown-showhide-target these are used to manage hide and show.
Now from here look at the dropdown values under - /libs/foundation/components/list/cq:dialog/content/items/column/items/listFrom/items these values trigger the hide and show mapping to property showhidetargetvalue as in /libs/foundation/components/list/cq:dialog/content/items/column/items/setDescendants
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).
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.