Skip to content

dynmeth/RaphaelLayer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

RaphaelLayer

RaphaelLayer is the combination of Leaflet and Raphael to allow a Raphael's paper object to overlay a Leaflet's map object.

Why? Leaflet already has an SVG layer.

Raphael is great for handling SVG animations. Leaflet is great for custom mapping. By combining Raphael's animations with Leaflet's mapping, you can produce some powerful visualisations.

Leaflet's Path SVG layer is good, however it is difficult to do advanced animations with it.

Dependencies

RaphaelLayer has two dependencies:

  1. Raphael
  2. Leaflet

Using

If you don't need to modify/build any changes into RaphaelLayer, just download and include the dist/rlayer.js.

We've followed the naming convention of Leaflet by using the prefix R.. For example, to use RaphaelLayer's Marker just add a new layer as you would normally:

map.addLayer(new R.Marker(latlng));

To modify the marker's attributes, such as fill, stroke etc, just pass regular Raphael style attributes through like this:

map.addLayer(new R.Marker(latlng, {'fill': '#fff', 'stroke': '#000'));

Examples

There are some examples in the debug folder.

Building

The build system borrows the same method from Leaflet and is powered by Node.js, Jake, JSHint and UglifyJS. The easiest way to install it:

  1. Download and install Node
  2. Run the following commands in the command line:
npm install

Once this has completed, just run jake inside the RaphaelLayer directory. This will check the source files for Javascript errors and inconsistencies, and then combine and compress it to the dist folder.

About

Raphael overlay for Leaflet maps

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published