How to set Mapbox line layer width in miles in SwiftUI?

Question

Using .constant(20.0) gives the line a fixed width of 20 pixels on the screen.

I'm building a mapping application in SwiftUI using the Mapbox Maps SDK where I draw various paths on the map.

For each path, I use two LineLayers to improve visibility and interaction:

A thin foreground line for the main visual. A thicker, semi-transparent background line to serve as a larger tappable area. Currently, I am setting the width of this background line to a constant screen-pixel value. Here is a simplified example of my code:

// This function is inside my MapView's Coordinator
func updateLines(paths: [PathData], on mapView: MapboxMaps.MapView) {
    for path in paths {
        let sourceId = "\(path.styleIdentifier)_\(path.id)_source"
        let backgroundLayerId = "\(path.styleIdentifier)_\(path.id)_bg_layer"
        
        // ... (Code for creating the GeoJSONSource and feature is here)
        
        // --- BACKGROUND LAYER SETUP ---
        var backgroundLayer = LineLayer(id: backgroundLayerId, source: sourceId)
        
        // getStyleColor is just a helper function to get a color for the style.
        let color = getStyleColor(for: path.styleIdentifier).withAlphaComponent(0.5)
        backgroundLayer.lineColor = .constant(StyleColor(color))
        
        // I am currently setting a constant pixel width like this:
        backgroundLayer.lineWidth = .constant(20.0) // 20 pixels
        
        backgroundLayer.lineCap = .constant(.round)
        backgroundLayer.lineJoin = .constant(.round)
        try? mapView.mapboxMap.addLayer(backgroundLayer)
        
        // ... (Foreground layer is added after this)
    }
}

My Goal:

Instead of a fixed pixel width, I want the line's width to represent a constant real-world distance, for example, 20 miles. The line's pixel width should adjust automatically as the map's zoom level changes to always represent that same 20-mile distance on the ground.

yo1995 · Accepted Answer · 2025-07-02 21:35:20Z

0

A polyline with a constant real-world width is actually… you name it - a polygon. 😉

Your goal is to make the line width a constant in the map's coordinate space, not the screen's coordinate space, thus the lineWidth won't achieve the goal.

Ideally, you can buffer the line to make it a polygon, but MapBox doesn't support that. A workaround could be using some other library to buffer the polyline to a polygon and export a GeoJSON, then add the new polygon from GeoJSON as a FillLayer.

answered Jul 2 at 21:35

yo1995

6855 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to set Mapbox line layer width in miles in SwiftUI?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related