kartena/leaflet.zoomslider

A zoom slider widget for leaflet

leaflet.zoomslider's Issues

Improve cursor behavior

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).

Massive hangs trying to combine zoomslider with markercluster plugin

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.

Is the branch wip/0.7 officially compatible with Leaflet 0.7.1?

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

Move zoomslider.option.position to option!

default is 'topleft'
we must can change this position!

onRemove not called

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.

Add a project page

This should include a demo of the zoomslider

Add a test suite

Look at how Leaflet is doing it.

_snapToSliderValue() call in onAdd()

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();

iOS: zoom knob

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/

Make it possible to restyle buttons fully

See openstreetmap/openstreetmap-website#164 (comment)

add a license

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.

Update style to the new 0.5 look

See
CloudMade/Leaflet@e92ca29
CloudMade/Leaflet@c2272fb
CloudMade/Leaflet@a1b8da5

How do I change the zoom buttons title

How do I change the zoom buttons - 'zoomIn' and 'zoomOut' - title

Doesn't play well with layer changes

The slider should resize when changing tilelayer.

Update to 0.6 style

Look at Control.Zoom in Leaflet master.

zoom in/out buttons should be (visibly) disabled when max/min zoom is reached

See Issue #917 in Leaflet.

Leaflet and NPM

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?

Support google maps-style slider look

New options

• non snapping drag
  • but snap on 'dragend'
• zoom while dragging

New theme

• Larger, white knob
• Thinner slider body
• Don't show exact zoom levels as marks on the slider
  • or maybe do but make it less prominent (maybe light grey?)

Weird character on zoom out button

Sometimes, I got a weird character on the zoom out (minus button) like â with ^.

After refreshing the page, it will go back to normal. Sometimes, I get this weird bug again.
Is there any way to fix it permanently?

[accessibility] Keyboard- and screen reader-friendly slider

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:

• Leaflet guide to accessibility: Test your maps
• Leaflet Plugin Authoring Guide: Content Accessibility

Make it possible to enable/disable the zoomslider

ZoomControl on master add this: Leaflet/Leaflet@aace5b2, so let's do it in ZoomSlider as well.

Prevent zoomslider from eating other controls.

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?

Update for Leaflet 0.5

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

Prevention of event propagation doesn't work in IE8

Doubleclick on minus-sign zooms out and then in again.

_createSlider fails if we have no map layer

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.

Compatible with Leaflet 1.0?

Is this plugin compatible with Leaflet 1.0?

Horizontal Slider

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.

Control sizing on touch devices

See kartena/Leaflet.Pancontrol#2

Slider rail and Slider knob require box-sizing content-box

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.

Double zoom on click (galaxy nexus)

Single "click" on zoom buttons on my Galaxy Nexus triggers two zoomevents.

Adding the control as default creates problems for other plug-ins

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?

Split out slider to a separate class

Splitting out the ui-part of the slider to a separate widget class will probably make the code easier to follow.