Basic marker customization

You can customize the appearance of markers by configuring the PinStyle object. The PinStyle type provides options for changing the background and border colors, glyph text and color, altitude , image to be used, and more options for additional customization.

The following code sample shows how to create a new marker and style it using some of the available customization options:

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

This page shows you how to customize markers in the following ways:

• Scale the marker
• Change the background color
• Change the border color
• Add text to a glyph

Scale the marker

To scale a marker, use the scale option:

Map(mode: .hybrid) {
  Marker3D(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

Change the background color

Use the PinElement.background option to change the background color of a marker:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

Change the border color

Use the markerOptions.borderColor option to change the border color of a marker:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

Add text to a glyph

Use the markerOptions.glyph method to replace the default glyph with a text character. The text glyph of the marker scales with the marker:

Map(mode: .hybrid){
  Marker3D(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green)) {
        Text("D") // Adds text inside the marker glyph
    }
  )
}