0

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

|improve this answer|||||
-1

Replace leaflet.css file from lefleat.draw distribution

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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