I am trying to zoom out 2 zoom levels when clicking on the "-" button of the zoom control. I believe that I should use ZoomOut(2), but I am not sure how to assign this method to the - button.
https://www.mapbox.com/mapbox.js/api/v1.6.2/l-map-class/
Thank you very much for your help
You shouldn't: instead of changing the behavior of the zoom control, you can copy it, rename it, and change the behavior of your new control, like L.control.doubleZoom
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'm using the leaflet.timedimension plugin to animate GPX trails and I would like to show multiple GPX paths at once with the possibility to deselect one or the other.
This works, but as only the first overlay in the leaflet control is enabled by default the user has to explicitly include the other GPX trails which I would like to avoid.
I've now tried to hack a bit around via:
$(".leaflet-control-layers-overlays label input").prop('checked', true)
and this works partially: all options are selected but still only the first GPX trail is shown. When doing
$(".leaflet-control-layers-overlays label input").trigger('click');
then only one trail is clicked depending on where I put it ('on('ready', function () {...}')
What is the proper way in leaflet to trigger an overlay click?
I just forgot to add both layers to the map:
geoJson1.addTo(map);
geoJson2.addTo(map);
I want to crate a popup window with close button and the content of the popup will be a split-app master-detail page.Which control should we use to achieve this?
I've tried with a sap.m.page but unable to change height and width.
I've tried with a sap.m.ResponsivePopover but i can't remove the arrow thing on the top from that.
The arrow in sap.m.ResponsivePopover is using the css classes .sapMPopoverArrUp and .sapMPopoverArr so you could probably overwrite them locally to remove the arrow.
Thanks.I have used overlaycontainer to acheive the requirement.
I have a relatively simple web app, that allows the user to enter two waypoints (from and to locations), then click a button to get the directions itinerary and a map with the route path plotted on the map.
The app was laid out so that the form, the itinerary and the map where in separate "tabs" and the layers could be shown and hidden based on the tab selection.
Oddly, the map would always be zoomed right out to the minimum zoom (entire world view) although the pushpins (waypoints) and route path were correctly plotted, the map bounds were not being honored. If the map was visible, then those route path bounds were honored and the map functioned as expected.
An example of this is here: http://jsfiddle.net/junto/DMR2T/
Click on 'Get Directions' when the map is visible, and the map is zoomed to the correct bounds. Then toggle the map and click 'Get Directions' again. Toggle the map back to visible. You'll see the map has the incorrect zoom level and bounds.
Lastest build of Google Chrome, Safari, Firefox all display this issue. Internet Explorer does not.
Is this a bug?
My guess is that in order to properly compute zooming and bounds, the map needs to know its display size. In order for the map to know that, it needs to be visible. So a workaround would be to move the map off screen rather than hiding it.
See my updated example here: http://jsfiddle.net/ZWzjC/
In my example I simply set a negative left margin, I'm sure there are more clever ways to move something off the screen while maintaining its visibility. I tried using visibility:hidden but that doesn't seem to hide the map correctly. display:none won't work since that causes the map to have 0 dimensions, and that's what .toggle() probably uses internally anyway.