MapConductorDocs / Basics / Circle
Circle
A circle defined by a centre and a radius in metres. The radius tracks zoom and looks the same on every provider.
ANDROID
com.mapconductor:core
iOS
MapConductorCore
REACT
@mapconductor/js-sdk-react
01 · Usage
Create the state object and place it inside the map view. Changing radius or colour on the state applies immediately.
CircleScreen.kt · Jetpack Compose
val circleState = remember {
CircleState(
center = GeoPoint.fromLatLong(21.382314, -157.933097),
radiusMeters = 1000.0,
strokeWidth = 3.dp,
fillColor = Color.Red.copy(alpha = 0.3f),
onClick = { /* circle tapped */ },
)
}
MapLibreMapView(state = mapState) {
Circle(circleState)
}CircleView.swift · SwiftUI
MapLibreMapView(state: mapState) {
Circle(
center: GeoPoint(latitude: 21.382314, longitude: -157.933097),
radiusMeters: 1000,
strokeColor: UIColor.red,
strokeWidth: 2,
fillColor: UIColor.blue.withAlphaComponent(0.3)
)
}CirclePage.tsx · React
import { createCircleState, createGeoPoint } from '@mapconductor/js-sdk-core';
import { Circle } from '@mapconductor/js-sdk-react';
const circle = useMemo(() => createCircleState({
id: 'circle',
center: createGeoPoint({ latitude: 21.382314, longitude: -157.933097 }),
radiusMeters: 1000,
strokeWidth: 3,
fillColor: 'rgba(0, 0, 255, 0.3)',
}), []);
<MapLibreMapView2D state={state}>
<Circle state={circle} />
</MapLibreMapView2D>02 · Options
Option
Type
Description
center
GeoPoint
Centre of the circle.
radiusMeters
Double
Radius in metres — not screen pixels.
fillColor / strokeColor
Color
Fill and stroke colours; transparency comes from the colour alpha.
strokeWidth
Dp · Double · number
Stroke width.
geodesic
Boolean · true
Whether the circle follows the geodesic. Unlike polygon/polyline, the circle defaults to true.
clickable
Boolean · true
Whether the circle is tappable.
zIndex
Int? · null
Stacking order; may be left unset.
extra
any?
Arbitrary payload, handed back on click.
onClick
handler
Receives taps on the circle.
03 · Sample
Drag to change the radius
The sample places markers at the centre and on the edge and recomputes the radius as the edge marker is dragged, using the distance helpers in core.