Create and add a Lon/Lat grid layer

You can visualize a longitude-latitude grid by creating a LonLatGridLayerLonLatGridLayerLonLatGridLayer and adding it to the map.

Such a grid layer gives users a point of reference when they’re panning and moving the map. As they zoom in, the grid refines based on the new scale level.

Program: Adding a default Lon/Lat grid to the map.
auto lonLatGridLayer = LonLatGridLayer::newBuilder().build();
map->getLayerList()->add(lonLatGridLayer);
LonLatGridLayer lonLatGridLayer = LonLatGridLayer.NewBuilder().Build();
map.LayerList.Add(lonLatGridLayer);
LonLatGridLayer lonLatGridLayer = LonLatGridLayer.newBuilder().build();
map.getLayerList().add(lonLatGridLayer);
lonlat grid
Figure 1. Most samples have a Lon/Lat grid, such as the Editing sample.

Customizing a LonLatGrid

Using a regular Builder, you can customize the styling of the LonLatGridLonLatGridLonLatGrid to change how the map shows grid lines and grid labels.

Program: Customizing the style of the default grid.
auto labelStyle = TextStyle::newBuilder().fontSize(12).fontName("monospace").textColor(Color::white()).haloWidth(1.0).haloColor(Color::black()).build();
auto originLabelStyle = TextStyle::newBuilder().fontSize(14).fontName("monospace").textColor(Color::white()).haloWidth(1.0).haloColor(Color::red()).build();
auto lonLatGrid = LonLatGrid::newBuilder()
                      .lineStyle(LineStyle::newBuilder().color(Color::white()).width(1.0).build())
                      .originLineStyle(LineStyle::newBuilder().color(Color::red()).width(2.0).build())
                      .labelStyle(labelStyle)
                      .originLabelStyle(originLabelStyle)
                      .labelPosition(LonLatGridLabelPosition::AllSides)
                      .scaleMultiplier(1.5) // make the grid more coarse
                      .build();

auto lonLatGridLayer = LonLatGridLayer::newBuilder().grid(lonLatGrid).build();
map->getLayerList()->add(lonLatGridLayer);
var labelStyle = TextStyle.NewBuilder()
        .FontSize(12)
        .FontName("monospace")
        .TextColor(Color.White)
        .HaloWidth(1.0)
        .HaloColor(Color.Black)
        .Build();
var originLabelStyle = TextStyle.NewBuilder()
        .FontSize(14)
        .FontName("monospace")
        .TextColor(Color.White)
        .HaloWidth(1.0)
        .HaloColor(Color.Red)
        .Build();
var lonLatGrid = LonLatGrid.NewBuilder()
        .LineStyle(LineStyle.NewBuilder().Color(Color.White).Width(1.0).Build())
        .OriginLineStyle(LineStyle.NewBuilder().Color(Color.Red).Width(2.0).Build())
        .LabelStyle(labelStyle)
        .OriginLabelStyle(originLabelStyle)
        .LabelPosition(LonLatGridLabelPosition.AllSides)
        .ScaleMultiplier(1.5) // make the grid more coarse
        .Build();
LonLatGridLayer lonLatGridLayer = LonLatGridLayer.NewBuilder().Grid(lonLatGrid).Build();
map.LayerList.Add(lonLatGridLayer);
var labelStyle = TextStyle.newBuilder()
        .fontSize(12)
        .fontName("monospace")
        .textColor(Color.valueOf(Color.WHITE))
        .haloWidth(1.0)
        .haloColor(Color.valueOf(Color.BLACK))
        .build();
var originLabelStyle = TextStyle.newBuilder()
        .fontSize(14)
        .fontName("monospace")
        .textColor(Color.valueOf(Color.WHITE))
        .haloWidth(1.0)
        .haloColor(Color.valueOf(Color.RED))
        .build();
var lonLatGrid = LonLatGrid.newBuilder()
        .lineStyle(LineStyle.newBuilder().color(Color.valueOf(Color.WHITE)).width(1.0).build())
        .originLineStyle(LineStyle.newBuilder().color(Color.valueOf(Color.RED)).width(2.0).build())
        .labelStyle(labelStyle)
        .originLabelStyle(originLabelStyle)
        .labelPosition(LonLatGridLabelPosition.AllSides)
        .scaleMultiplier(1.5) // make the grid more coarse
        .build();
LonLatGridLayer lonLatGridLayer = LonLatGridLayer.newBuilder().grid(lonLatGrid).build();
map.getLayerList().add(lonLatGridLayer);

Using an AdvancedBuilder, you can also vary the spacing between the grid lines based on the current scale of the map and style each of these scale levels differently.

Program: Customizing the style of the grid and increment size between lines at different scale levels.
// Styling with completely custom scale ranges and styles

auto lineStyle = LineStyle::newBuilder().color(Color::white()).width(1.0).build();
auto originLineStyle = LineStyle::newBuilder().color(Color::red()).width(1.0).build();
auto labelStyle = TextStyle::newBuilder().fontSize(12).fontName("monospace").textColor(Color::white()).haloColor(Color::black()).haloWidth(1).build();
auto originLabelStyle = TextStyle::newBuilder().fontSize(12).fontName("monospace").textColor(Color::white()).haloColor(Color::red()).haloWidth(1).build();

MapScale scale1 = MapScale::maxZoomedOut();
MapScale scale2 = MapScale::fromDenominator(50'000'000);
MapScale scale3 = MapScale::fromDenominator(20'000'000);
MapScale scale4 = MapScale::maxZoomedIn();

auto lonLatGrid = LonLatGrid::newAdvancedBuilder()
                      .originLon(-30) // optional custom origin location
                      .originLat(30)
                      .setting(LonLatGridSetting::newBuilder()
                                   .scaleRange(scale1, scale2)
                                   .deltaLon(45)
                                   .deltaLat(45)
                                   .lineStyle(lineStyle)
                                   .originLineStyle(originLineStyle)
                                   .labelStyle(labelStyle)
                                   .originLabelStyle(originLabelStyle)
                                   .labelPosition(LonLatGridLabelPosition::AllSides)
                                   .labelFormat("lon(+D), lat(+D)")
                                   .build())
                      .setting(LonLatGridSetting::newBuilder()
                                   .scaleRange(scale2, scale3)
                                   .deltaLon(22.5)
                                   .deltaLat(22.5)
                                   .lineStyle(lineStyle)
                                   .originLineStyle(originLineStyle)
                                   .labelStyle(labelStyle)
                                   .originLabelStyle(originLabelStyle)
                                   .labelPosition(LonLatGridLabelPosition::AllSides)
                                   .labelFormat("lon(+DM), lat(+DM)")
                                   .build())
                      .setting(LonLatGridSetting::newBuilder()
                                   .scaleRange(scale3, scale4)
                                   .deltaLon(11.25)
                                   .deltaLat(11.25)
                                   .lineStyle(lineStyle)
                                   .originLineStyle(originLineStyle)
                                   .labelStyle(labelStyle)
                                   .originLabelStyle(originLabelStyle)
                                   .labelPosition(LonLatGridLabelPosition::AllSides)
                                   .labelFormat("lon(+DMS), lat(+DMS)")
                                   .build())
                      .build();

auto lonLatGridLayer = LonLatGridLayer::newBuilder().grid(lonLatGrid).build();
map->getLayerList()->add(lonLatGridLayer);
// Styling with completely custom scale ranges and styles

var lineStyle = LineStyle.NewBuilder().Color(Color.White).Width(1.0).Build();
var originLineStyle = LineStyle.NewBuilder().Color(Color.Red).Width(1.0).Build();
var labelStyle = TextStyle.NewBuilder()
        .FontSize(12)
        .FontName("monospace")
        .TextColor(Color.White)
        .HaloColor(Color.Black)
        .HaloWidth(1)
        .Build();
var originLabelStyle = TextStyle.NewBuilder()
        .FontSize(12)
        .FontName("monospace")
        .TextColor(Color.White)
        .HaloColor(Color.Red)
        .HaloWidth(1)
        .Build();

MapScale scale1 = MapScale.MaxZoomedOut;
MapScale scale2 = MapScale.FromDenominator(50_000_000);
MapScale scale3 = MapScale.FromDenominator(20_000_000);
MapScale scale4 = MapScale.MaxZoomedIn;

var lonLatGrid = LonLatGrid.NewAdvancedBuilder()
        .OriginLon(-30) // optional custom origin location
        .OriginLat(30)
        .Setting(LonLatGridSetting.NewBuilder()
                .ScaleRange(scale1, scale2)
                .DeltaLon(45)
                .DeltaLat(45)
                .LineStyle(lineStyle)
                .OriginLineStyle(originLineStyle)
                .LabelStyle(labelStyle)
                .OriginLabelStyle(originLabelStyle)
                .LabelPosition(LonLatGridLabelPosition.AllSides)
                .LabelFormat("lon(+D), lat(+D)")
                .Build())
        .Setting(LonLatGridSetting.NewBuilder()
                .ScaleRange(scale2, scale3)
                .DeltaLon(22.5)
                .DeltaLat(22.5)
                .LineStyle(lineStyle)
                .OriginLineStyle(originLineStyle)
                .LabelStyle(labelStyle)
                .OriginLabelStyle(originLabelStyle)
                .LabelPosition(LonLatGridLabelPosition.AllSides)
                .LabelFormat("lon(+DM), lat(+DM)")
                .Build())
        .Setting(LonLatGridSetting.NewBuilder()
                .ScaleRange(scale3, scale4)
                .DeltaLon(11.25)
                .DeltaLat(11.25)
                .LineStyle(lineStyle)
                .OriginLineStyle(originLineStyle)
                .LabelStyle(labelStyle)
                .OriginLabelStyle(originLabelStyle)
                .LabelPosition(LonLatGridLabelPosition.AllSides)
                .LabelFormat("lon(+DMS), lat(+DMS)")
                .Build())
        .Build();

LonLatGridLayer lonLatGridLayer = LonLatGridLayer.NewBuilder().Grid(lonLatGrid).Build();
map.LayerList.Add(lonLatGridLayer);
// Styling with completely custom scale ranges and styles

var lineStyle = LineStyle.newBuilder().color(Color.valueOf(Color.WHITE)).width(1.0).build();
var originLineStyle = LineStyle.newBuilder().color(Color.valueOf(Color.RED)).width(1.0).build();
var labelStyle = TextStyle.newBuilder() //
        .fontSize(12)
        .fontName("monospace")
        .textColor(Color.valueOf(Color.WHITE))
        .haloColor(Color.valueOf(Color.BLACK))
        .haloWidth(1)
        .build();
var originLabelStyle = TextStyle.newBuilder()
        .fontSize(12)
        .fontName("monospace")
        .textColor(Color.valueOf(Color.WHITE))
        .haloColor(Color.valueOf(Color.RED))
        .haloWidth(1)
        .build();

MapScale scale1 = MapScale.MaxZoomedOut;
MapScale scale2 = MapScale.fromDenominator(50_000_000);
MapScale scale3 = MapScale.fromDenominator(20_000_000);
MapScale scale4 = MapScale.MaxZoomedIn;

var lonLatGrid = LonLatGrid.newAdvancedBuilder()
        .originLon(-30) // optional custom origin location
        .originLat(30)
        .setting(LonLatGridSetting.newBuilder()
                .scaleRange(scale1, scale2)
                .deltaLon(45)
                .deltaLat(45)
                .lineStyle(lineStyle)
                .originLineStyle(originLineStyle)
                .labelStyle(labelStyle)
                .originLabelStyle(originLabelStyle)
                .labelPosition(LonLatGridLabelPosition.AllSides)
                .labelFormat("lon(+D), lat(+D)")
                .build())
        .setting(LonLatGridSetting.newBuilder()
                .scaleRange(scale2, scale3)
                .deltaLon(22.5)
                .deltaLat(22.5)
                .lineStyle(lineStyle)
                .originLineStyle(originLineStyle)
                .labelStyle(labelStyle)
                .originLabelStyle(originLabelStyle)
                .labelPosition(LonLatGridLabelPosition.AllSides)
                .labelFormat("lon(+DM), lat(+DM)")
                .build())
        .setting(LonLatGridSetting.newBuilder()
                .scaleRange(scale3, scale4)
                .deltaLon(11.25)
                .deltaLat(11.25)
                .lineStyle(lineStyle)
                .originLineStyle(originLineStyle)
                .labelStyle(labelStyle)
                .originLabelStyle(originLabelStyle)
                .labelPosition(LonLatGridLabelPosition.AllSides)
                .labelFormat("lon(+DMS), lat(+DMS)")
                .build())
        .build();

LonLatGridLayer lonLatGridLayer = LonLatGridLayer.newBuilder().grid(lonLatGrid).build();
map.getLayerList().add(lonLatGridLayer);