Add Circle (with radius expressed in physical units)

[tobrun]

A circle on the earth's surface on a specific LatLng as center.
iOS equivalent: #2167

[tmcw]

Given that there are circles defined from

• Pixel radius
• Meter radius, but always a circle in mercator
• Meter radius, and actually a spherical cap, so sometimes oblong on mercator

We should have a solid vocabulary that helps differentiate from the beginning.

[tobrun]

I created this issue for parity with gmaps. There they define this circle as sperical cap.

[zugaldia]

We're in a good position now to add this API. Meanwhile, we currently have three workarounds:

• Using a polygon: Add MGLCircle (with radius expressed in physical units) #2167 (comment)
• Using a MarkerView: 4153 circle pulse animation #5346
• Using the Runtime Style API: CircleLayerActivity

[1ec5]

Note the differences between the three approaches: the polygon approach in #2167 (comment) is for a circle whose radius corresponds to a physical ground distance, whereas the MarkerView and CircleLayerActivity approaches are for circles whose radii correspond to fixed screen distances, regardless of the zoom level or latitude.

[bilthon]

Using a polygon feels like a hackish workaround. This feature should really be supported at the native level.

[tobrun]

Circles are supported through CircleLayer, we do not expose an annotation API for it atm.

[bilthon]

The problem I have with the CircleLayer right now is that the only way I found of creating a circle with dynamic in-app data is using a geoJSON source. But geojson doesn't seem to allow us to specify a circle. https://stackoverflow.com/questions/16942697/geojson-circles-supported-or-not

[zugaldia]

The problem I have with the CircleLayer right now is that the only way I found of creating a circle with dynamic in-app data is using a geoJSON source. But geojson doesn't seem to allow us to specify a circle.

For a CircleLayer is enough if you set a point to indicate the center of the circle. For example, you could create a GeoJsonSource with:

GeoJsonSource geoJsonSource = new GeoJsonSource("circle-source",
    Point.fromCoordinates(Position.fromLngLat(-0.07520, 51.50550)));
mapboxMap.addSource(geoJsonSource);

And then use the CircleLayer to visualize it:

CircleLayer circleLayer = new CircleLayer("circle-layer", "circle-source");
circleLayer.setProperties(
    PropertyFactory.visibility(Property.VISIBLE),
    PropertyFactory.circleRadius(25f),
    PropertyFactory.circleColor(Color.argb(1, 55, 148, 179)));
mapboxMap.addLayer(circleLayer);

If you need more control over the circle, another option you might want to look into is the SymbolLayer. The LocationLayer plugin is a good example of it.

[1ec5]

@tobrun @zugaldia, please note that there’s a fundamental difference between the kind of circle drawn by CircleLayer (whose radius is expressed in screen units) and the kind of circle that’s tracked in this ticket (whose radius corresponds to a physical distance). Please refer to #4312 (comment). This is still a valid feature request, although there’s a tension between implementing this very useful feature while at the same time conforming to the Simple Features specification and GeoJSON.

[stale]

This issue has been automatically detected as stale because it has not had recent activity and will be archived. Thank you for your contributions.

[jrgonzalezg]

Now there seems to be annotation support for circles using CircleOptions and CircleManager. And the CircleOptions seem quite similar to the Google Maps version, but unlike the behavior on Google Maps it seems that the radius here is using screen pixels instead of meters and the circle does not properly scale with zoom. Workarounds like sampling the circumference and using a polygon with FillManager work but require quite a bit of boilerplate. Also I don't really understand what's the purpose of CircleManager / CircleOptions working that way with radius in device pixels and ignoring zoom changes. Will it be possible to fix this to work as Google Maps (if there aren't any valid use cases for the current behavior) or to provide a variant that works like in Google Maps?

[androideveloper]

Coming from Google Maps and found the same issue. Any updates on this?

[tobrun]

First step to implement this feature is supporting http://turfjs.org/docs/#circle in the java port of turf. This is ticketed in mapbox/mapbox-java#1002.

edit: that functionality is already implemented so this should already be possible today. Will create a small example around this.

edit:

[miladsalimiiii]

The problem I have with the CircleLayer right now is that the only way I found of creating a circle with dynamic in-app data is using a geoJSON source. But geojson doesn't seem to allow us to specify a circle.

For a CircleLayer is enough if you set a point to indicate the center of the circle. For example, you could create a GeoJsonSource with:

GeoJsonSource geoJsonSource = new GeoJsonSource("circle-source",
    Point.fromCoordinates(Position.fromLngLat(-0.07520, 51.50550)));
mapboxMap.addSource(geoJsonSource);

And then use the CircleLayer to visualize it:

CircleLayer circleLayer = new CircleLayer("circle-layer", "circle-source");
circleLayer.setProperties(
    PropertyFactory.visibility(Property.VISIBLE),
    PropertyFactory.circleRadius(25f),
    PropertyFactory.circleColor(Color.argb(1, 55, 148, 179)));
mapboxMap.addLayer(circleLayer);

If you need more control over the circle, another option you might want to look into is the SymbolLayer. The LocationLayer plugin is a good example of it.

Did you try this ?! for draw circle