L.Donut

Makes it possible to draw donuts with L.Donut on Leaflet maps.

It extends L.Circle and adds a inner radius. Look into the Demo.

Leaflet V1+

var donut = new L.Donut(map.getCenter(),{
  radius: 2000,
  innerRadius: 1000,
  innerRadiusAsPercent: false,
}).addTo(map);

Installation

Download L.Donut.js and include them in your project.

<script src="./src/L.Donut.js"></script>

or use the script over cdn:

<script src="https://cdn.jsdelivr.net/gh/Falke-Design/L.Donut@latest/src/L.Donut.js"></script>

Leaflet V2+

import {Donut} from 'leaflet-donut';

var donut = new Donut(map.getCenter(),{
  radius: 2000,
  innerRadius: 1000,
  innerRadiusAsPercent: false,
}).addTo(map);

Installation

Download L.Donut-leaflet-v2.js and include them in your project.

<script type="importmap">
  {
      "imports": {
          "leaflet": "https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.js",
          "leaflet-donut": "./src/L.Donut-leaflet-v2.js"
      }
  }
</script>

or use the script over cdn:

<script type="importmap">
  {
      "imports": {
          "leaflet": "https://unpkg.com/leaflet@2.0.0-alpha.1/dist/leaflet.js",
          "leaflet-donut": "https://cdn.jsdelivr.net/gh/Falke-Design/L.Donut@latest/src/L.Donut-leaflet-v2.js"
      }
  }
</script>

Methods:

You can use new L.Donut

Method	Returns	Description
L.Donut(latlng,options)	this	Creates the Donut shape.
setInnerRadius(radius)	this	Sets the inner radius of a circle. Units are in meters or percent. The outer radius must be greater then the inner radius.
getInnerRadius()	Number	Returns the current inner radius of a circle. Units are in meters or percent.

Options:

Option	Description
radius	Outer radius. The outer radius must be greater then the inner radius.
innerRadius	Inner radius. It can be a meter value or a percent (0-1) value of the outer radius.
innerRadiusAsPercent	Default false. Defines if the inner radius is a percent value of the outer radius.
<L.Circle options>	Other L.Circle options: Docs