mapbox / mapbox/mapbox-maps-ios
Adding linePattern image after render doesn't shows on initial zoom level
Nobody has claimed this yet.
- 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
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
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