I'm trying to add the Draw Control availble in with the Leaflet.Draw Plugin

I've downloaded the code and stored in htdocs and point my page towards the js and css libraries needed. The page loads ok but minus the draw control panel as seen here

Here's the code I'm using for the page.

Leaflet Draw

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
<link rel="stylesheet" href="http://localhost/leaflet/leaflet/Leaflet.draw/dist/leaflet.draw.css" />

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" />
    <link rel="stylesheet" href="http://leaflet/leaflet/Leaflet.draw/dist/leaflet.draw.ie.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script src="http://localhost/leaflet/leaflet/Leaflet.draw/dist/leaflet.draw.js"></script>


// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map' , {drawControl: true}).setView([51.505, -0.09], 7);

// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

// Initialize the FeatureGroup to store editable layers
        var drawnItems = new L.FeatureGroup();

// Initialize the draw control and pass it the FeatureGroup of editable layers
        var drawControl = new L.Control.Draw({
            draw: {
                position: 'topleft',
                polygon: {
                    title: 'Draw a sexy polygon!',
                    allowIntersection: false,
                    drawError: {
                        color: '#b00b00',
                        timeout: 1000
                    shapeOptions: {
                        color: '#bada55'
                circle: {
                    shapeOptions: {
                        color: '#662d91'
            edit: {
                featureGroup: drawnItems

  • 2
    This question was answered on the leaflet google group here
    – Matt T
    Commented Mar 4, 2013 at 13:23
  • 1
    I am wondering that if it was asked previously then why you are posting as new question ? Please explain..
    – Sunil
    Commented Mar 13, 2013 at 10:01
  • 1
    Please repeat the answer here or close the question.
    – underdark
    Commented Mar 13, 2013 at 10:14
  • @Sunil - it wasn't asked previously here but simultaneously on the leaflet google group. When they answered first I thought I would post their reply here. Thought i was being helpful :\
    – Matt T
    Commented Mar 13, 2013 at 15:08

2 Answers 2


The question was kindly answered on another forum. Here's the reply:

Leaflet.draw requires Leaflet master. This is because the controls have been refactored in Leaflet after 0.5.1. You can download the build files from the Leaflet Github (https://github.com/Leaflet/Leaflet/tree/master/dist).


Replace leaflet.css file from lefleat.draw distribution

  • Can you give more details? Commented Mar 13, 2013 at 15:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.