kreegr / Leaflet-semicircle

Extend Leaflet's circle class to display semicircles.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Leaflet-Semicircle.

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

Usage:

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.

Example:

Live demo

Useing options.startAngle and options.stopAngle:

L.circle([51.5, -0.09], 500, {
	startAngle: 45,
	stopAngle: 135
}).addTo(map);

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

L.circle([51.5, -0.09], 500)
	.setDirection(90, 90)
	.addTo(map);

Screenshot:

Live demo

Semicircles screenshot

About

Extend Leaflet's circle class to display semicircles.

License:MIT License


Languages

Language:JavaScript 53.3%Language:HTML 46.3%Language:CSS 0.4%