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

                    }
                }

            },

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.