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
Note: This is an old project. We are waiting for Leaflet 2 to stabilise before updating it with modern TypeScript and Javascript features.
- Tested with Leaflet 1.x
- Leaflet 2 is still under active refactoring for now
- A HTML5 browser supporting canvas is required
- Tested with Safari iOS8, Firefox 33, Chrome 38 and Internet Explorer 11
You need to include the JavaScript file and the CSS file. Feel free to improve the CSS file.
leafletMap.MapPaint.enable();
...
leafletMap.MapPaint.disable();You can also use the control switch :
leafletMap.addControl(new MapPaint.SwitchControl());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.
- This library was developed in context of the BRIDGE project (European Union’s Seventh Framework Programme for research, technological development and demonstration under grant agreement no 261817).
- The icons are from the material design icons project.
- The procedural pencil is inspired by harmony.
The source code of this library is licenced under the MIT License.
