Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>
share|improve this question
2  
This question was answered on the leaflet google group here –  Matt T Mar 4 '13 at 13:23
1  
I am wondering that if it was asked previously then why you are posting as new question ? Please explain.. –  Sunil Mar 13 '13 at 10:01
1  
Please repeat the answer here or close the question. –  underdark Mar 13 '13 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 Mar 13 '13 at 15:08
    
@MattT Okay..thanks for sharing –  Sunil Mar 13 '13 at 16:05
add comment

2 Answers

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

share|improve this answer
add comment

Replace leaflet.css file from lefleat.draw distribution

share|improve this answer
    
Can you give more details? –  Devdatta Tengshe Mar 13 '13 at 15:48
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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