Below is my code:

<!DOCTYPE html>
        <title>Simple Leaflet Map</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" />
        <script type='application/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js'</script>       
        <div id="map" style=" position:absolute; top:50; bottom:10; width:99.9%; border-width: 1px; border-style: solid; height: 100%; "></div>

        <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

            var map = L.map('map').setView([-41.2858, 174.78682], 14);
            mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
                'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; ' + mapLink + ' Contributors',
                maxZoom: 18,

            var editableLayers = new L.FeatureGroup();


            var drawPluginOptions = {
                position: 'topright',
                draw: {
                    polygon: {
                        allowIntersection: false, // Restricts shapes to simple polygons
                        drawError: {
                            color: '#e1e100', // Color the shape will turn when intersects
                            message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect

                        shapeOptions: {
                           color: '#97009c'
                    // disable toolbar item by setting it to false
                    polyline: false,
                    circle: false, // Turns off this drawing tool
                    rectangle: false,
                    marker: false,
                edit: {
                    featureGroup: editableLayers, //REQUIRED!!
                    remove: false
             var drawControl = new L.Control.Draw(drawPluginOptions);

I don't know why I'm getting this error and also L is not defined error is coming while adding leaflet.draw.js.

  • 3
    At the eighth line there is not "Greater than" character (>). – xunilk Mar 21 '17 at 7:31
  • 2
    And how are you adding leaflet.draw.js??? – IvanSanchez Mar 21 '17 at 8:41

Add script of leaflet draw after body tag. It works for me.


leaflet.draw (and any Leaflet extension) should be added after <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script> in head or body tag.

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.