Create and add a Lon/Lat grid layer

You can visualize a longitude-latitude grid by creating a LonLatGridLayer 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);
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 LonLatGrid 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);

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);