alex3165 / react-leaflet-draw

React component for leaflet-draw on top of react-leaflet
228 stars 152 forks source link

switching display text from imperial to metric #21

Open sacdeplastique opened 7 years ago

sacdeplastique commented 7 years ago

Whenever I draw a circle with the tool the radius is displayed in feet. I tried changing a few options but no luck. draw={{ metric: true, polyline: { metric: true, }, circle: { metric: true, }, }} edit={{ metric: true, }} Can you please let me know where I could set this feature?

Thank you!

sguergachi commented 6 years ago

Would like this as well!

feralresearch commented 6 years ago

You can pass an object containing settings to EditControl via the "draw" prop like you're doing, the props are just a bit finicky. Setting both metric false AND feet true (or vice-versa) was necessary for me, and you need to do it for each geometry type. I use the following:

Reference: http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html

drawingOptions: (useImperialUnits, showUnits) =>{
            return(
                {
                    rectangle: {
                        showArea: showUnits,
                        showRadius: showUnits,
                        feet: useImperialUnits,
                        metric: !useImperialUnits,
                        nautic: false
                    },
                    polygon: {
                        showArea: showUnits,
                        showLength: showUnits,
                        showRadius: showUnits,
                        feet: useImperialUnits,
                        metric: !useImperialUnits,
                        nautic: false
                    },
                    circle: {
                        showRadius: showUnits,
                        feet: useImperialUnits,
                        metric: !useImperialUnits,
                        nautic: false
                    },
                    polyline: {
                        showLength: showUnits,
                        feet: useImperialUnits,
                        metric: !useImperialUnits,
                        nautic: false
                    }
                }
            );