react-leaflet-draw icon indicating copy to clipboard operation
react-leaflet-draw copied to clipboard

How to change the 'White square marker' ?

Open moorthi07 opened this issue 3 years ago • 4 comments

When you select try to draw anything, It shows a white square marker for every click you draw. Is there any way to change the style of the marker like circle with nice colors?

moorthi07 avatar Jul 19 '21 18:07 moorthi07

There may be a way, by changing the icon to your required icon. For example, consider the case of a polygon, then one can visualize the code as below: draw:{{ polygon:{ icon: 'Your icon, it may be a L.icon()' } }}

HariKeerthanaKondapalli avatar Aug 10 '21 13:08 HariKeerthanaKondapalli

This package only takes True or False to disable or enable the button.

draw: {{
        rectangle: false
      }}

Did you mean make the change in this package ?

moorthi07 avatar Aug 10 '21 14:08 moorthi07

No, not in that sense. Usually, it takes an empty object by default i.e.,{ } If we set any draw option like rectangle, polygon.. to false, it means that we are disabling that particular handler and if we want to change any of its properties, we can specify that in the object as mentioned.

For more reference, https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html#drawoptions

HariKeerthanaKondapalli avatar Aug 11 '21 02:08 HariKeerthanaKondapalli

To anyone who might be looking for answer to this in the future I used this code to reduce the size of the white draw icons by 4x the size:

draw={{
            polygon: {
                allowIntersection: false, // Restricts shapes to simple polygons
                guidelineDistance: 10,
                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: '#000000',
                    weight: 1
                },
                icon: new DivIcon({
                    iconSize: new Point(4, 4),
                    className: 'leaflet-div-icon leaflet-editing-icon'
                }),
            },

The icon option here ls what changed the shape. DivIcon and Point are imported from leaflet itself (i.e. you can use L.DivIcon and L.Point too). I didn't find these options in the documentation so had to do a bit of digging to find them.

dajomu avatar Jan 02 '24 21:01 dajomu