Create and add a Lon/Lat grid layer
You can visualize a longitude-latitude grid by creating a LonLatGridLayer
LonLatGridLayer
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.
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);
Customizing a LonLatGrid
Using a regular Builder
, you can customize the styling of the LonLatGrid
LonLatGrid
LonLatGrid
to change how the map shows grid lines and grid labels.
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.
// 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);