Giter Club home page Giter Club logo

leaflet.visualclick's Introduction

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

leaflet.visualclick's People

Contributors

dagjomar avatar ivansanchez avatar wdq avatar gavioto avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.