Hand Drawn Polygons for Leaflet

You might have seen examples of rough.js floating around on social media this week. Rough.js is a new canvas based library for creating graphics which have a sketchy, hand-drawn appearance. The library's github page includes a neat d3.js demo map in which each of the states has been filled in with a different hand-drawn style.

Rough.js doesn't only work with static maps. Because the library is canvas based you can also overlay hand-drawn, sketch like polygons on top of an interactive map. At least you can if you use the new Leaflet.RoughCanvas plug-in for Leaflet maps. The plug-in allows you to add polylines and polygons to a Leaflet.js map which have a hand-drawn style.

Here's a demo map which I created using Leaflet.RoughCanvas with a Mapbox styled base-map.