kartena / leaflet.zoomslider Goto Github PK
View Code? Open in Web Editor NEWA zoom slider widget for leaflet
Home Page: http://kartena.github.com/Leaflet.zoomslider/
License: BSD 2-Clause "Simplified" License
A zoom slider widget for leaflet
Home Page: http://kartena.github.com/Leaflet.zoomslider/
License: BSD 2-Clause "Simplified" License
Currently the cursor behavior is not perfect โ slider handle gets a pointer cursor on hover (which is misleading because pointer cursor indicates anything clickable), while it would be better to indicate draggability. So maybe it would be better to switch to the same cursors used for map dragging (or n-resize
).
Another issue is that if you hold the handle while moving the cursor away from it, the cursor changes, which also doesn't look nice (especially when you just drag the handle and see "flashing" of cursor). So the cursor should be the same over the whole period of dragging (just like the map).
I just upgraded from leaflet 0.5 to leaflet 0.7.1
I also upgraded to the leaflet zoom slider available in the branch wip/0.7
However I don't see any slider showing up anymore on my leaflet map.
Is it suppose to work or still a work in progress?
Thanks
Look at Control.Zoom in Leaflet master.
The zoom slider is not keyboard operable, nor accessible with a screen reader.
The slider could be improved by implementing an ARIA slider.
Other resources that you may find helpful:
Trying to use zoomslider with the latest leaflet (0.6.4) and the leaflet.markercluster plugin.
I'm getting some massive hangs. Not really sure which plugin is the issue, but I know these 2 are interfering because I can comment out one or the other and the app will be speedy and responsive as normal.
With both plugins included, it takes a few seconds longer than normal to load initially, but then hangs for a very long time on every zoom, and it gets successively worse with each zoom.
After zooming in once, it will take about 20-30 seconds to become responsive and memory usage shot from 500K to 600K ish
After zooming in a second time, it will take at least 5+ minutes (closed it before it became responsive) and memory went from 600K to as high as 1,600K at one point.
I don't think it's a memory leak because the memory constantly shoots up and down, but there's definitely some almost infinite/infinite looping going on.
Here's are some pictures from the Firebug Profiler:
Own Time (without nested function calls)
http://i306.photobucket.com/albums/nn255/Krb686/zoomslider_error_own_time.png
Overall Time (with nested function calls)
http://i306.photobucket.com/albums/nn255/Krb686/zoomslider_error_time.png
I'm working on a fiddle, and I'm going to anti-minify the scripts so I can tell which functions it's spending time in and I'll post back here.
It looks like there is no onRemove() implemented for when the Zoomslider is removed. As a result, if it is removed, the 'zoomend' event handler is still fired (i.e. "this._map.on('zoomend', this._snapToSliderValue, this);"), throwing an error.
Look at how Leaflet is doing it.
Popular css libraries will try to make box sizing consistent. For example bootstrap sets content box to border-box. If you have a bootstrap project and try to use zoomslider the slider rail won't show and the knob styling will be smaller than desired.
Setting zoomsliders body and knob box-sizing to content-box fixes things.
I would like to put this slider in an outer DIV right to the map. Therefore i would be nicer to have this slider hozitontally not vertically drawn.
This should include a demo of the zoomslider
I made some changes to before 0.5 release so that common toolbar styles (used by zoom control) are extracted into separate classes. Please check it out and update the plugin if needed: Leaflet/Leaflet#1209
If the Zoomslider is added via addControl() (e.g. map.addControl(myZoomslider);), it will not display the correct zoom level because it is missing a call to _snapToSliderValue() in the onAdd(). Simply adding this line to onAdd() should correct this:
this._snapToSliderValue();
Is this plugin compatible with Leaflet 1.0?
How do I change the zoom buttons - 'zoomIn' and 'zoomOut' - title
default is 'topleft'
we must can change this position!
map.getMaxZoom() returns Infinity.
Maybe just don't create a slider if getMaxZoom returns Infinity. We already subscribe to layeradd/remove so it should get updated when the layer is added.
On the iPad, the zoom knob is off-center. The screenshot is an example which I captured in iOS Simulator from this page: http://kartena.github.com/Leaflet.zoomslider/
It's not clear what license Leaflet.zoomslider is released under. Please consider adding a LICENSE file to the repository and a copyright/license comment to the top of the source file.
The slider should resize when changing tilelayer.
Splitting out the ui-part of the slider to a separate widget class will probably make the code easier to follow.
I originally filed this issue with the PanControl plugin, but I'll file it here too now, since Zoomslider seems to be getting the most developer attention:
Since L.Map.MergeOptions sets Zoomslider (and also in the pancontrol plugin) to true by default, you actively have to set options to deny it when setting up a map window. This causes problems for the minimap plug-in, since it then winds up with these controls in it. Furthermore, allowing the user to set arbitrary map options isn't really a good idea since they might potentially set options that break the minimap functionality. (see Norkart/Leaflet-MiniMap#11 )
Is it really a necessity to auto-enable the plugin like this, or would it be better to make it opt-in like most plugins are?
Single "click" on zoom buttons on my Galaxy Nexus triggers two zoomevents.
This control looks pretty cool, I just wish I could get it to work with
https://github.com/brunob/leaflet.fullscreen
The fullscreen control is tacked on to the bottom of the existing zoom control, which this zoomslider overrides. How can this be fixed?
See Issue #917 in Leaflet.
ZoomControl on master add this: Leaflet/Leaflet@aace5b2, so let's do it in ZoomSlider as well.
Doubleclick on minus-sign zooms out and then in again.
This is less of a bug and more of an annoyance I suppose. It looks like your library is dependent on Leaflet v0.7.7. I am working on a leaflet upgrade to v1.0.3. NPM will bring in both versions of leaflet.js. This causes issues since leaflet sets some global namespace types.
For example, in my app this is happening....
leaflet v1.0.3 is being imported, later in the code leaflet draw is imported which adds to L.Control a draw property (L.Control.Draw). Then zoomslider is imported, which subsequently imports its version of leaflet v0.7.7 which reinitializes the L.Control object eliminating what the leaflet draw plugin initialized.
Could you maybe look at moving leaflet.js to a dev dependency, or updating your dependency version to the recent leaflet if everything works?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.