Extend Leaflet's circle class to display semicircles.
JavaScript HTML CSS
Latest commit 24d804d Feb 2, 2017 @jieter Adding bower.json, Fixes #15, #3



Adds semicircle 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.2.

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.


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:

L.circle([51.5, -0.09], {
    radius: 500,
    startAngle: 45,
    stopAngle: 135

Draw the same semicircle using setDirection(direction, size):

L.circle([51.5, -0.09], {radius: 500})
    .setDirection(90, 90)


Live demo

Semicircles screenshot