Using leaflet-draw with browserify

A while back I was working on a simple mapping project and wanted to use leaflet-draw with browserify. I discovered that there was "one weird trick" for getting everything working as expected.

Install leaflet and leaflet-draw with npm

First, install the modules from npm:

npm i --save leaflet leaflet-draw

Create map.js file

Require the leaflet modules

And here's the trick. You have to require the leaflet-draw module without assigning it to a variable. This adds it to the global scope, and modifies the L object to add the drawing-specific methods.

var L = require('leaflet');
require('leaflet-draw');

For more about Leaflet and browserify, check out this article: Basics of making maps with leaflet.js & browserify.

Seth Vincent

Seth makes weird arcades, writes JavaScript, and builds civic technology.
sethvincent.com
twitter.com/sethdvincent
github.com/sethvincent