Javascript leaflet circle radius to feet

Question

I want to show to the user the radius of the circle that he is creating but in feet and miles instead of meters and kilometers.

This is the current scenario:

The code that creating the circle to the map is:

 this.map.on(L.Draw.Event.CREATED, (e:any) => {

        if (e.layer.setStyle)
            e.layer.setStyle(defaultStyle);

        this.drawnItems.addLayer(e.layer);
        let leafletIdToId = this.state.leafletIdToId;

    });

The code that creates the polygons menu:

this.drawControlFull = new L.Control.Draw({
        edit: {
            featureGroup: this.drawnItems
        },

         draw: drawOptions
    }).addTo(this.map);

Iv'e tried couple of ways but all of them rely on the L.circle but im not creating the circle this way by my self.

Any suggestions maybe?

nikoshr nikoshr · Accepted Answer · 2018-01-23T17:07:20

L.Draw.Circle accepts a metric option, set to true by default, that sets the usage of the metric measurement system or imperial. Try

this.drawControlFull = new L.Control.Draw({
    edit: {
        featureGroup: this.drawnItems
    },

    draw: {
        circle: {
            metric: false
        }
    }
}).addTo(this.map);

If you want miles and yards, set the feet option to false :

this.drawControlFull = new L.Control.Draw({
    edit: {
        featureGroup: this.drawnItems
    },

    draw: {
        circle: {
            metric: false,
            feet: false
        }
    }
}).addTo(this.map);

If you want to mix miles and feet, you will have to override L.GeometryUtil.readableDistance. For example

var orgReadbleDistance = L.GeometryUtil.readableDistance;
L.GeometryUtil.readableDistance = function (distance, isMetric, isFeet, isNauticalMile, precision) {
    if (isMetric||isNauticalMile||!isFeet) return orgReadbleDistance(distance, isMetric, isFeet, isNauticalMile, precision);

    distance *= 1.09361; // distance in yards

    if (distance > 1760) {
        return L.GeometryUtil.formattedNumber(distance / 1760, 2) + ' miles';
    } else {
        return L.GeometryUtil.formattedNumber(distance * 3, 0) + ' ft';
    }
};

And a demo

var orgReadbleDistance = L.GeometryUtil.readableDistance;
L.GeometryUtil.readableDistance = function (distance, isMetric, isFeet, isNauticalMile, precision) {
  if (isMetric||isNauticalMile||!isFeet) return orgReadbleDistance(distance, isMetric, isFeet, isNauticalMile, precision);
  distance *= 1.09361;
  
    if (distance > 1760) {
        return L.GeometryUtil.formattedNumber(distance / 1760, 2) + ' miles';
    } else {
        return L.GeometryUtil.formattedNumber(distance * 3, 0) + ' ft';
    }
};


var map = L.map('map').setView([51.505, -0.09], 13);
 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);
 // FeatureGroup is to store editable layers
 var drawnItems = new L.FeatureGroup();
 map.addLayer(drawnItems);
 var drawControl = new L.Control.Draw({
     edit: {
         featureGroup: drawnItems
     },
     draw: {
        polygon: false,
        marker: false,
        circlemarker: false,
        rectangle: false,
        polyline: false,
        circle: {
          metric: false,
          feet: true
        }
     }
 });
 map.addControl(drawControl);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.0/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.0/leaflet.draw.js"></script>

<div id='map'></div>

Javascript leaflet circle radius to feet

1 Answers