Adding the draw control in Leaflet

Question

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" />
<![endif]-->
<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>

<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'
}).addTo(map);

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

// 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
            }
        });
        map.addControl(drawControl);



    </script>
</body>
</html>

Answer 1

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).

Answer 2

Replace leaflet.css file from lefleat.draw distribution