The qgis2leaf plugin for QGIS makes it incredibly easy to create a basic, fully-functional Leaflet.js map using QGIS with no HTML/JavaScript/CSS programming. The plugin even allows you to use a variety of interesting basemaps including Stamen Watercolor (see our post on the watercolor map).

To create a Leaflet map using the plugin follow these simple steps:

1. Install the qgis2leaf plugin

Simply click on plugins -> Manage and Install Plugins and search for qgis2leaf.

2. Add your layers of interest and style them as desired

I have not experimented with a wide variety of different kinds of layers and styling options but points and polygons work great.

3. Click on the icon for the plugin, choose the layers to include and choose your basemap and click OK. That’s it!

The plugin creates a folder with all the components. You could upload the folder to a server as is or (as we’ve done here) you can upload the relevant pieces to GitHub and use bl.ocks.org to display your map.

In this exmaple we’re using sidewalk cafe regulation data from New York City’s great OpenData portal. Green is All Cafes, red is Not Permitted, light green is Small Only and orange is Unenclosed Only. The map uses Stamen Design’s terrain baselayer.

The full code is a gist on GitHub, here is what it looks like: