mapbox / mapbox/mapbox-maps-ios

CircleLayer.circleTranslate with circleTranslateAnchor === .viewport is not working as expected

Open
#2,275 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :beetle:
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.