mapbox / mapbox/mapbox-maps-ios

Adding linePattern image after render doesn't shows on initial zoom level

Open
#1,751 3 comments 1 reaction 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: 14.1
- iOS version: Simulator iOS 16.1
- Devices affected: Simulator iOS 16.1/iPhone 14 Pro
- Maps SDK Version: 10.10.0-rc.1, 10.9.0

## Observed behavior and steps to reproduce

Adding image of linePatter after the line already rendered, doesn't apply the pattern on the current zoom level, just on smaller and larger zooms.

```swift
layer.linePattern = Value.constant(.name(imageUrl))
map.style.addLayer(layer)
...

URLSession.shared.dataTask(with: URL(string: imageUrl)!) { data,response,error in
...
DispatchQueue.main.async { try! map.style.addImage(image, id: imageUrl) }
}
```

https://user-images.githubusercontent.com/52435/203414920-d228324e-cf3a-4f74-849a-7d42d5f940f1.mov

```swift
class ViewControllerFillPattern : UIViewController {
internal var mapView: MapView!

let center = LocationCoordinate2D(latitude: 43.610, longitude: -116.395)

func addLineLayer(_ map: MapboxMap, center: LocationCoordinate2D) {
var source = GeoJSONSource()
source.data = .geometry(Geometry.lineString(LineString([center, LocationCoordinate2D(latitude: center.latitude+0.2, longitude: center.longitude+0.2)])))

try! map.style.addSource(source, id: "line-source")
var layer = LineLayer(id: "line-with-pattern")
layer.source = "line-source"
layer.lineColor = .constant(StyleColor(.red))
layer.lineWidth = .constant(32.0)

let imageUrl = "https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png?\(Int.random(in: 0..<10000))"
layer.linePattern = Value.constant(.name(imageUrl))


try! map.style.addLayer(layer)
URLSession.shared.dataTask(with: URL(string: imageUrl)!) { data,response,error in
guard let data = data else {
print("=> download failed: \(error) \(response)")
return
}

DispatchQueue.main.async {
let image = UIImage(data: data)!

try! map.style.addImage(image, id: imageUrl)
}
}.resume()
}

override func viewDidLoad() {
super.viewDidLoad()

let accessToken = MY_ACCESS_TOKEN;

let mapUri = StyleURI.streets
let myResourceOptions = ResourceOptions(accessToken:accessToken)
let myMapInitOptions = MapInitOptions(resourceOptions: myResourceOptions, styleURI: mapUri)

mapView = MapView(frame: view.bounds, mapInitOptions: myMapInitOptions)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

self.view.addSubview(mapView)

mapView.mapboxMap.setCamera(to:
CameraOptions(center: self.center, zoom: 15.0))

mapView.mapboxMap.onNext(event: .styleLoaded) { _ in
let mapboxMap = self.mapView.mapboxMap!
self.addLineLayer(mapboxMap, center: self.center)
}
}
}
```

Note that I see the same thing if set linePattern after addImage.

```swift
class ViewController : UIViewController {
internal var mapView: MapView!

let center = LocationCoordinate2D(latitude: 43.610, longitude: -116.395)

func addLineLayer(_ map: MapboxMap, center: LocationCoordinate2D) {
var source = GeoJSONSource()
source.data = .geometry(Geometry.lineString(LineString([center, LocationCoordinate2D(latitude: center.latitude+0.2, longitude: center.longitude+0.2)])))

try! map.style.addSource(source, id: "line-source")
var layer = LineLayer(id: "line-with-pattern")
layer.source = "line-source"
layer.lineColor = .constant(StyleColor(.red))
layer.lineWidth = .constant(32.0)
try! map.style.addLayer(layer)

let imageUrl = "https://docs.mapbox.com/mapbox-gl-js/assets/colorado_flag.png"
URLSession.shared.dataTask(with: URL(string: imageUrl)!) { data,response,error in
guard let data = data else {
print("download failed: \(error) \(response)")
return
}

DispatchQueue.main.async {
let image = UIImage(data: data)!

try! map.style.addImage(image, id: imageUrl)
try! map.style.updateLayer(withId: "line-with-pattern", type: LineLayer.self) { lineLayer in
lineLayer.linePattern = Value.constant(.name(imageUrl))
}
}
}.resume()
}

override func viewDidLoad() {
super.viewDidLoad()

let accessToken = MY_ACCESS_TOKEN;

let mapUri = StyleURI.streets
let myResourceOptions = ResourceOptions(accessToken:accessToken)
let myMapInitOptions = MapInitOptions(resourceOptions: myResourceOptions, styleURI: mapUri)

mapView = MapView(frame: view.bounds, mapInitOptions: myMapInitOptions)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

self.view.addSubview(mapView)

mapView.mapboxMap.setCamera(to:
CameraOptions(center: self.center, zoom: 15.0))

mapView.mapboxMap.onNext(event: .styleLoaded) { _ in
let mapboxMap = self.mapView.mapboxMap!
self.addLineLayer(mapboxMap, center: self.center)
}
}
}
```

## Expected behavior

Update line layer on current zoom to render the linePattern

## Notes / preliminary analysis

## Additional links and references

https://github.com/rnmapbox/maps/issues/2408

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

Start with the addLineLayer reproduction in the issue and run it on iOS 16.1 with Maps SDK 10.10.0-rc.1. Compare setting linePattern before versus after map.style.addImage at zoom 15; done means the pattern appears immediately at the current zoom in both sequences.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, swift
Domain
computer-graphics, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.