Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Extend Leaflet's circle class to display semicircles.
JavaScript HTML CSS
Branch: master


Adds simicircle functionality to L.Circle. Angles are defined like compass courses: 0 = north, 90 = east, etc. If the script is not included, Leaflet will fall back drawing full circles.

Updated for use with leaflet 1.0.0-b1.

Provided methods

L.Circle.setStartAngle(angle) Set the start angle of the circle to angle and redraw.
L.Circle.setStopAngle(angle) Set the stop angle of the circle to angle and redraw.
L.Circle.setDirection(direction, size) Set the startAngle to direction - (0.5 * size) and the stopAngle to direction + (0.5 * size) and redraw.

Known issues

  • Not really robust yet for cases when startAngle is bigger than stopAngle.
  • Behaves differently for those cases on canvas


The plugin provides two ways to only display a part of the circle: 1. Use the options map and set startAngle and stopAngle. 2. Use setDirection(direction, size) to display a semicircle of size degrees at direction.


Live demo

Useing options.startAngle and options.stopAngle:[51.5, -0.09], 500, {
    startAngle: 45,
    stopAngle: 135

Draw the same semicircle using setDirection(direction, size):[51.5, -0.09], 500)
    .setDirection(90, 90)


Live demo

Semicircles screenshot

Something went wrong with that request. Please try again.