I'm using Flutter's mapbox_maps_flutter package for displaying maps. I want to add a circle layer at a specific point with latitude, longitude, and radius specified in kilometers. My current implementation adds a circle layer, but I'm not sure how to make it proportional to the map's zoom level. In other words, the circle should cover the same area regardless of the zoom level.
Here is my code for creating the circle layer:
void _createCircle() {
final point = Point(coordinates: Position(cameraCenterLongitude, cameraCenterLatitude));
mapboxMap?.style.addSource(GeoJsonSource(id: "source", data: json.encode(point)));
mapboxMap?.style.addLayer(CircleLayer(
id: 'layer',
sourceId: 'source',
visibility: maps.Visibility.VISIBLE,
circleSortKey: 1.0,
circleColor: Colors.blue.value,
circleOpacity: 0.2,
circlePitchAlignment: CirclePitchAlignment.MAP,
circlePitchScale: CirclePitchScale.MAP,
circleRadius: AppConstants.defaultRadius / 1000.toDouble(),
circleStrokeColor: Colors.blue.value,
circleStrokeOpacity: 1.0,
circleStrokeWidth: 1.0,
circleTranslate: [0.0, 1.0],
circleTranslateAnchor: CircleTranslateAnchor.MAP,
));
mapboxMap?.style.setStyleLayerProperty("layer", 'circle-radius', [
'interpolate',
['linear'],
['zoom'],
5, 10, 10, 500
]);
}
I've attempted to use interpolation to handle the zooming, but I'm not confident that I've implemented it correctly. Specifically, I'm not sure how to adjust the circle-radius so that it remains consistent in terms of real-world distance (in kilometers) regardless of the zoom level.
Can anyone provide guidance or a solution for creating a proportional circle layer with a radius specified in kilometers?
Thanks in advance!