Custom Map Style displayed in low resolution

[JanTG1]

Environment

• Xcode version: 14.3
• iOS version: 16.4
• Devices affected: All
• Maps SDK Version: 10.10.1

Observed behavior and steps to reproduce

After adding a custom Map Style created using the Mapbox Studio MapStyle maker, maps and layers on the map are low-resolution. It is hard to demonstrate, but see this screenshot (zoomed in): You can see a clear, high res line in dark gray, which is a ui element in my app. Below that is my custom map including a LineLayer with a width of 3. As can be clearly seen, the line is very low resolution. The Map is too, but it is harder to see in this light map style.

Expected behavior

The map should be just as sharp as the standard map design. All Layers should also be sharp.

Notes / preliminary analysis

Additional links and references

[baleboy]

Could you share the code that you use to show the map?

[JanTG1]

@baleboy Sure, here it is:

 //Check if there are known coordinates to center the map. If there are, load them up in variable. If not, return default values
        let centerCoordinate: CLLocationCoordinate2D = Utilities.returnLastLocationIfAvailable()
        //Setup Mapview
        let camera = CameraOptions(center: centerCoordinate, padding: UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5), zoom: 14)
        var options: MapInitOptions
        //Set Map options depending on Light or Dark Mode
        if self.traitCollection.userInterfaceStyle == .dark {
            // User Interface is Dark
            options = MapInitOptions(cameraOptions: camera, styleURI: StyleURI(rawValue: mapboxMapStyles.standardDarkMap.rawValue))
        }else {
            // User Interface is Light
            options = MapInitOptions(cameraOptions: camera, styleURI: StyleURI(rawValue: mapboxMapStyles.standardLightMap.rawValue))
        }
        mapView = MapView(frame: view.bounds, mapInitOptions: options)
        try? mapView.mapboxMap.setCameraBounds(with: CameraBoundsOptions(minZoom: 2.0, maxPitch: 60.0))
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.layer.zPosition = 1
        mapView.location.options.puckType = .puck2D()
        view.addSubview(mapView)
        
        // Add a gesture recognizer to the map view
        let longPress = UILongPressGestureRecognizer(target: self, action: #selector(didLongPress(_:)))
        mapView.addGestureRecognizer(longPress)
        
        mapView.gestures.delegate = self
        
        annotationManager = mapView.annotations.makePointAnnotationManager()
        annotationManager?.delegate = self

Note that the missing sharpness started appearing after I implemented custom Map styles for dark and Light mode. Before that I used the standard map style and it was all perfectly sharp. Sorry for that Code snippet, I can't seem to make it align correctly.

[JanTG1]

@baleboy any news on this issue? Am I doing something wrong or does it look like a bug to you?

[OdNairy]

@JanTG1 I don't think that it is an issue on the Maps SDK side. Did you reproduce the issue with standard styles? Can you provide a complete sample to reproduce the issue on our side?

[JanTG1]

@OdNairy no, this only happens with the custom Map Styles. The standard Style is sharp and all layers are, too.

[OdNairy]

Do debug the issue further we need a public issue to the style. Can you generate one, please?

[JanTG1]

@OdNairy sure! I will E-Mail you my Style URL just in case posting it publicly would be a bad idea. It happends to two of my custom styles (the only ones I made), which are pretty much the basic dark and light monochrome styles you provide, with a few little changes. Note that the Route Layer has nothing to do with the map Style from Mapbox Studio, but it also gets blurry when added to that custom map style. Be sure to check your inbox for a E-Mail with the Subject "Issue #1945".

[OdNairy]

@JanTG1 Could you kindly provide the precise camera state parameters and the corresponding affected line geometry? It would greatly assist us in pinpointing the issue more accurately. If possible, creating a sample project that replicates the problem would be ideal. Since your styles are already public, there's no need to include your token in any conversations.

Additionally, we suggest trying to disable Terrain for your style as a potential workaround.

[augustin-grv]

I have the same problem, any news on this issue ?

[JanTG1]

@augustin-grv sadly, no. I have just disabled any custom map styles since the bug occurred since no fix has been released so far.

@OdNairy The issue appears with any camera state, no matter the zoom and pitch. The line just doesn't appear as blurry when looking at it from far away, so to make it clearer I zoomed in a lot in the provided screenshot. Also, it's not just the line geometry that is blurry, but also the map itself. It's not visible in the screenshot, especially compared to the blue blurry line, but I can see that it is way less sharp than the default map style, which works.

[augustin-grv]

Disabling 3D terrain in Mapbox Studio fixed the issue for me

[JanTG1]

@augustin-grv can't do that workaround since the 3d terrain is an essential part of the custom map style, but maybe that helps Mapbox pinpoint the issue...