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

Click somewhere on the map. 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.