react-leaflet-draw
react-leaflet-draw copied to clipboard
How to change the 'White square marker' ?
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?
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()' } }}
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 ?
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
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.