mapbox / mapbox/mapbox-maps-ios
CircleLayer.circleTranslate with circleTranslateAnchor === .viewport is not working as expected
Nobody has claimed this yet.
- Dominant language
- Swift
- Stars
- 601
- Forks
- 196
- PR merge metrics
- No merged PRs in 30d
Description
## Environment
- Xcode version: Version 16.1 (16B40)
- iOS version: 18.1
- Devices affected: iPhone 13 Pro, Simulator iPhone 16 Pro
- Maps SDK Version: 11.8.0
## Observed behavior and steps to reproduce
`circleTranslate` with `circleTranslateAnchor === .viewport` is not working as expected.
I expected (and it worked on 6.3.0) distance between 2 points the same on any zoom level
But it looks like circleTranslate ignores `circleTranslateAnchor`, because point distance is different on different zoom levels
## Expected behavior
circleTranslate should not be dependant on zoom level if `circleTranslateAnchor === .viewport`
## Notes / preliminary analysis
Maybe circleTranslateAnchor is ignored
## Additional links and references
Demo of my example (code below):
https://www.loom.com/share/4db96bcaacfd4ed69cc271fe5bc7a2ee
Demo of my working app, where I'm dragging points:
https://www.loom.com/share/a9ec12fda2b547c2bca889d9cb676144
```
import MapboxMaps
import UIKit
class ViewController: UIViewController {
private var cancelables = Set()
private var fcMapEditors = Set()
override func viewDidLoad() {
super.viewDidLoad()
let centerCoordinate = CLLocationCoordinate2D(latitude: 0, longitude: 0)
let options = MapInitOptions(cameraOptions: CameraOptions(center: centerCoordinate, zoom: 2.4))
let mapView = MapView(frame: view.bounds, mapInitOptions: options)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(mapView)
mapView.mapboxMap.onNext(event: .mapLoaded) { _ in
self.addCircleLayers(mapView: mapView)
}
}
// Function to add circle layers to the map
func addCircleLayers(mapView: MapView) {
let pointCoordinate = CLLocationCoordinate2D(latitude: 0, longitude: 0)
var source = GeoJSONSource(id: "circle-source")
source.data = .featureCollection(FeatureCollection(features: [Feature(
geometry: .point(Point(pointCoordinate))
)]))
try? mapView.mapboxMap.addSource(source)
// Define the red circle layer
var redCircleLayer = CircleLayer(id: "red-circle", source: "circle-source")
redCircleLayer.circleColor = .constant(StyleColor(.red))
redCircleLayer.circleRadius = .constant(10.0)
// Define the green circle layer with translation offset
var greenCircleLayer = CircleLayer(id: "green-circle", source: "circle-source")
greenCircleLayer.circleColor = .constant(StyleColor(.green))
greenCircleLayer.circleRadius = .constant(10.0)
greenCircleLayer.circleTranslateAnchor = .constant(.viewport)
greenCircleLayer.circleTranslate = .constant([100.0, 0.0]) // Offset the green circle
// Add layers to map
try? mapView.mapboxMap.addLayer(redCircleLayer)
try? mapView.mapboxMap.addLayer(greenCircleLayer)
}
}
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior from the ViewController.addCircleLayers example using MapView, CircleLayer, circleTranslateAnchor, and circleTranslate. Compare the viewport-anchored offset across zoom levels and verify the expected constant point distance; no source file or test is identified in the issue, so implementation entry points will need to be located in the SDK.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, swift
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100