1

I am using Leaflet draw for adding Draw toolbar to my leaflet map. I am using angular leaflet directive to add the map. I want certain elements of the draw toolbar to be removed, specifically (line and circle). I have tried using this statement in my code but does not works polyline:false. How should i go about it? Here is my code

JS

angular.extend($scope, {
                center: {
                    lat: 51.505,
                    lng: 10.09,
                    zoom: 3
                },
                controls: {
                  scale:true,
                  draw: {}

                },


                layers: {
                    baselayers: {
                        mapbox_light: {
                            name: 'Mapbox Streets',
                            url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmVoYW5zNTE2IiwiYSI6ImNpeWxjcWNkODAwNGwzM3FxamR6a2gxOXkifQ.PuUfs90MyfmVGYVqx0AoUw',
                            type: 'xyz',
                            layerOptions: {
                                apikey: 'pk.eyJ1IjoicmVoYW5zNTE2IiwiYSI6ImNpeWxjcWNkODAwNGwzM3FxamR6a2gxOXkifQ.PuUfs90MyfmVGYVqx0AoUw',
                                mapid: 'mapbox.streets',
                                format: '@2x.png'
                            },
                            layerParams: {
                                showOnSelector: false
                            }
                        }
                    },
                    overlays: {
                        draw: {
                            name: 'draw',
                            type: 'group',
                            visible: true,

                            layerParams: {
                                showOnSelector: false
                            }
                        }


                    }
                }

           });


           leafletData.getMap().then(function(map) {

               leafletData.getLayers().then(function(baselayers) {
                 var drawnItems = baselayers.overlays.draw;

                  map.on('draw:created', function (e) {

                    var layer = e.layer;


                    drawnItems.addLayer(layer);



                    console.log(JSON.stringify(layer.toGeoJSON()));
                    coordinates_selected = layer.toGeoJSON();

                  });
               });
           });

HTML

        <leaflet lf-center="center" controls="controls" layers="layers" geojson="geojson" width="540" height="400"></leaflet>
1
  • Just turning one off won't work. you will need to give those options which you want to display. Look at how they are setting option in the readme page: github.com/Leaflet/Leaflet.draw Commented May 27, 2017 at 17:32

2 Answers 2

1

It was quite simple with angular. i just had to set the property of individual elements to false within a nested draw{} in controls section on angular js code.

controls: {
                scale: true,
                draw: {
                    draw: {
                        polyline: false,
                        circle: false

                    }
                }

            },
0

I have never worked with angular but it seems you need to add the decision of omitting the polyline and circle options within the options of the draw control. The following worked (based on the example given on the github repository).

var options = {
       position: 'topright',
       draw: {
           polyline: false,
           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: '#bada55'
               }
           },
           circle: false, // Turns off this drawing tool
           rectangle: {
               shapeOptions: {
                   clickable: false
               }
           }
       },
       edit: {
           featureGroup: editableLayers, //REQUIRED!!
           remove: false
       }
   };

   var drawControl = new L.Control.Draw(options);

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.