City names on shape

[Mert7126]

Hello grandsir, thank you for your project. There's something I want to ask. I ask you to help if possible.

I want to write the name of that city on each city, but from pathData in the code ;

x = (pathData.boundingBox?.origin.x ?? 0)
y = (pathData.boundingBox?.origin.y ?? 0)

I get the coordinates this way, it doesn't show them right in the middle of the city, how can I do this?

InteractiveMap(svgName: "tr") { pathData in
InteractiveShape(pathData)
.initWithAttributes()
.overlay(content: {

                        ZStack(alignment: .center) {
                            
                            Text("\(pathData.id)")
                                .font(.system(size: 10))
                            
                        }
                        .position(x: pathData.boundingBox?.origin.x ?? 0, y: pathData.boundingBox?.origin.y ?? 0)
                   
                    })
                
                    .shadow(color: clickedPath == pathData ? Color("app_white") : .clear, radius: 2)

                    }
                    .scaleEffect(clickedPath == pathData ? 1.02 : 1)
                    .animation(.easeInOut(duration: 0.2), value: clickedPath)
                    .zIndex(clickedPath == pathData ? 2 : 1)
                
            }