---
title: Circle (Arc) and Ellipse Curves
source: https://vjmap.com/en/guide/circlearc.html
---

# Circle (Arc) and Ellipse Curves

## Arc Fill

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/circle/circleArcFill)

Usage:

```js
const mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
    center: center,
    radius: radius,
    startAngle: 120,
    endAngle: 60,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
circle.addTo(map);
```


<mapFrameEx>
<pre>
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Open map
let res = await svc.openMap({
    mapid: "sys_hello", // Map ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry data rendering
    style: vjmap.openMapLightStyle() // When div has dark background, pass dark background style here
})
if (res.error) {
    // If open fails
    showError(res.error)
    return;
}
// Get map bounds
let mapBounds = vjmap.GeoBounds.fromString(res.bounds);
// Create geometric projection coordinate system from map bounds
let prj = new vjmap.GeoProjection(mapBounds);
//
// Map object
let map = new vjmap.Map({
    container: 'map', // DIV container ID
    style: svc.rasterStyle(), // Style, raster style here
    center: prj.toLngLat(mapBounds.center()), // Set map center
    zoom: 1, // Set map zoom level
    pitch: 0,
    renderWorldCopies: false // Do not display multi-screen map
});
// Associate service object and projection object
map.attach(svc, prj);
await map.onLoad();
mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
    center: center,
    radius: radius,
    startAngle: 120,
    endAngle: 60,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
circle.addTo(map);
</pre>
</mapFrameEx>
<br/>
<br/>


## Arc Path

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/circle/circleArcPath)

Usage:

```js
const cirleArcPath = vjmap.getCirclePolygonCoordinates(mapExtent.center(), mapExtent.width() / 5, 360, 120, 60, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(cirleArcPath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);
```

## Circle Fill

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/circle/circleFill)

Usage:

```js
const mapBounds = map.getGeoBounds(0.2);
const center = mapBounds.center();
const radius = mapBounds.width() / 4;
let circle = new vjmap.CircleFill({
    center: center,
    radius: radius,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
circle.addTo(map);
```

## Circle Path

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/circle/circlePath)

Usage:

```js
const cirlePath = vjmap.getCirclePolygonCoordinates(mapExtent.center(), mapExtent.width() / 10, 120, 0, 360, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(cirlePath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);
```

## Ellipse Arc Fill

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipseArcFill)

Usage:

```js
const mapBounds = map.getGeoBounds(0.6);
const center = mapBounds.center();
const majorAxis = mapBounds.width() / 4;
const minorAxis = mapBounds.width() / 6;
let ellipseArcFill = new vjmap.EllipseFill({
    center: center,
    majorAxisRadius: majorAxis,
    minorAxisRadius: minorAxis,
    startAngle: 60,
    endAngle: 300,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
ellipseArcFill.addTo(map);
```

## Ellipse Arc Path

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipseArcPath)

Usage:

```js
const majorAxisRadius = mapExtent.width() / 5;
const minorAxisRadius = mapExtent.width() / 10;
const ellipseArcPath = vjmap.getEllipsePolygonCoordinates(mapExtent.center(), majorAxisRadius, minorAxisRadius, 360, 100, 300, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(ellipseArcPath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);
```

## Ellipse Fill

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipseFill)

Usage:

```js
const mapBounds = map.getGeoBounds(0.6);
const center = mapBounds.center();
const majorAxis = mapBounds.width() / 4;
const minorAxis = mapBounds.width() / 6;
let ellipse = new vjmap.EllipseFill({
    center: center,
    majorAxisRadius: majorAxis,
    minorAxisRadius: minorAxis,
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
ellipse.addTo(map);
```

## Ellipse Path

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/ellipse/ellipsePath)

Usage:

```js
const majorAxisRadius = mapExtent.width() / 4;
const minorAxisRadius = mapExtent.width() / 6;
const ellipsePath = vjmap.getEllipsePolygonCoordinates(mapExtent.center(), majorAxisRadius, minorAxisRadius, 360, 0, 360, false);
let path = new vjmap.Polyline({
    data: map.toLngLat(ellipsePath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);
```

## Bezier Curve Path

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/curve/curvePath)

Usage:

```js
const mapBounds = map.getGeoBounds(0.4);
const curvePoints = [];
curvePoints.push(mapBounds.min.toArray());
curvePoints.push(mapBounds.center().toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.max.x, mapBounds.min.y]).toArray());
curvePoints.push(mapBounds.max.toArray());
// Convert curve points to Bezier curve parameters
const c = vjmap.polylineToBezierCurve(curvePoints);
// Discretize line from Bezier curve parameters
const curvePath = vjmap.bezierCurveToPolyline(c);
let path = new vjmap.Polyline({
    data: map.toLngLat(curvePath),
    lineColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', '#FFA0FD'],
    lineWidth: 3,
    isHoverPointer: true,
    isHoverFeatureState: true
});
path.addTo(map);
```

## Bezier Curve Fill

[Online Example](https://vjmap.com/demo/#/demo/map/overlay/curve/curvePathFill)

Usage:

```js
const mapBounds = map.getGeoBounds(0.2);
const curvePoints = [];
curvePoints.push(mapBounds.min.toArray());
curvePoints.push(mapBounds.center().toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.max.x, mapBounds.min.y]).toArray());
curvePoints.push(mapBounds.max.toArray());
curvePoints.push(vjmap.geoPoint([mapBounds.min.x, mapBounds.max.y]).toArray());
curvePoints.push(mapBounds.min.toArray());
// Convert curve points to Bezier curve parameters
const c = vjmap.polylineToBezierCurve(curvePoints);
// Discretize line from Bezier curve parameters
const curvePath = vjmap.bezierCurveToPolyline(c);
let polygon = new vjmap.Polygon({
    data: map.toLngLat(curvePath),
    fillColor: ['case', ['to-boolean', ['feature-state', 'hover']], 'red', 'yellow'],
    fillOpacity: 0.8,
    fillOutlineColor: "#f00",
    isHoverPointer: true,
    isHoverFeatureState: true
});
polygon.addTo(map);
```