Skip to content
This repository has been archived by the owner on Nov 21, 2024. It is now read-only.

A plugin that adds visual feedback when user clicks/taps the map. Useful for when you have a delay on the clickEvents for async fetching of data, or implmentation of Leaflet.singleclick

License

Notifications You must be signed in to change notification settings

MazeMap/Leaflet.VisualClick

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Deprecated

This repository is no longer maintained and is deprecated. Please be aware that it may not work with the latest versions of its dependencies.


Leaflet.VisualClick

A plugin that adds visual feedback when user clicks/taps the map. Useful for when you have a delay on the clickEvents for async fetching of data, or implementation of Leaflet.singleclick - or just because it looks great :)

Screencapture GIF

Install

  • npm install - This will download dependencies, and run a build upon completion

Run the demo

  • Open up the demo/demo.html file in a browser and watch the magic!

Copy files

After install, files should be generated in the dist folder Copy these files and include them as you normally would

That's it

  • it should work now :)

Browser compatibility

Uses CSS3 animations, so basically follows this table: http://caniuse.com/#search=animation

Tested in

  • Chrome 45 @ OSX
  • Safari 8.0.7 @ OSX
  • Firefox 41.01 @ OSX
  • IE10 @ Windows 8
  • IE11 @ Windows 8.1
  • Chrome 45 @ iPhone iOS 9
  • Safari @ iPhone iOS 9

Behaviour is bugged in IE10 due to the lack of pointer-events: none in CSS. This means that the decoration added by this plugin will catch events meant for whatever overlay might be underneath the clicked point. This is worked around by using a map pane between the tiles pane and the overlays pane (but of course this means overlays will overlap the visual click effect).

Configurations

There are some options you can configure if you really need to. Here's an example:

    map = L.map('map',{
      //visualClick: false, //can be disabled
      //visualClickMode: 'touch', //A default detection is done, but you can override...
      visualClickEvents: 'click contextmenu' //can be multiple space-seperated events, like 'click', 'contextmenu', 'dblclick'...
      //visualClickPane: 'shadowPane'
    });

Developing?

  • run npm start - this should fire the build process and also start a watcher that re-compiles if you change the source files

About

A plugin that adds visual feedback when user clicks/taps the map. Useful for when you have a delay on the clickEvents for async fetching of data, or implmentation of Leaflet.singleclick

Resources

License

Stars

Watchers

Forks

Packages

No packages published