Leaflet.MapPaint

Bitmap painting for Leaflet.

• Designed for touch device
• Works fine with an old mouse
• 15 different colors!
• Felt, crayon, procedural pencil and fancy/ugly patterns

Demo

Requirements

• Tested with Leaflet 0.7
• A HTML5 browser supporting canvas is required
• Tested with Safari iOS8, Firefox 33, Chrome 38 and Internet Explorer 11

Installation

Download the archive or use bower :

bower install leaflet-mappaint

You need to include the JavaScript file and the CSS file. Feel free to improve the CSS file.

Usage

leafletMap.MapPaint.enable();
...
leafletMap.MapPaint.disable();

You can also use the control switch :

leafletMap.addControl(new MapPaint.SwitchControl());

Saving

By default the drawing is added to the map as a L.ImageOverlay. You can setup a different save method :

leafletMap.MapPaint.saveMethod = function(image, bounds) {
}

image is a PNG file as a base64 string

Example: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsMAAAIHCAYAAAB69VHgAAAgAElEQ…Gmc9yN5Rv"

bounds represents the L.LatLngBounds of the drawing.

Acknowledgements

This library is developed in context of the BRIDGE project.

The icons are from the material design icons project.

Licence

The source code of this library is licenced under the MIT License.