Custom layers
Contents
Once a source is set and has data, a layer can reference it. Layers are used to visualize the data from a source. There are a variety of layer types including: Circle, Line, Fill and Symbol.
CircleLayer
A CircleLayer uses single coordinates from a source to display and render a circle at a location on a map. Circles can be styled with size options, coloring, opacity etc.
private async void DidFinishLoadingStyleAsync(MapStyle style)
{
try
{
source = new GeoJsonSource(SOURCE_ID, "dots.json") { IsLocal = true };
Map.Functions.AddSource(source);
CircleLayer circleLayer = new CircleLayer(SOURCE_ID, LAYER_ID);
circleLayer.CircleRadius = 4;
circleLayer.CircleStrokeColor = Color.FromRgb(255, 0, 0);
circleLayer.CircleStrokeWidth = 5;
circleLayer.CircleColor = Color.FromRgb(255, 255, 255);
// Add the CircleLayer to the map
Map.Functions.AddLayer(circleLayer);
}
catch (Exception e)
{
Console.WriteLine($"Error loading GeoJSON: {e.Message}");
}
}
A more detailed example of the CircleLayer in action can be found in the Dots on a Map code example.
LineLayer
The LineLayer is used to visualize a series of coordinates as a line on the map. A line is drawn between each coordinate provided in the LineString geometry in the source.
private async void DidFinishLoadingStyleAsync(MapStyle style)
{
try
{
source = new GeoJsonSource(SOURCE_ID, "lines.json") { IsLocal = true };
Map.Functions.AddSource(source);
LineLayer lineLayer = new LineLayer(SOURCE_ID, LAYER_ID);
lineLayer.LineColor = Color.FromRgb(255, 0, 0);
lineLayer.LineWidth = 4;
Map.Functions.AddLayer(lineLayer);
}
catch (Exception e)
{
Console.WriteLine($"Error loading GeoJSON: {e.Message}");
}
}
Sample JSON (lines.json)
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-119.091796875, 44.08758502824516],
[-108.80859375, 44.213709909702054],
[-114.2578125, 44.213709909702054],
[-113.90625, 36.31512514748051]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-111.09374999999999, 36.94989178681327],
[-111.357421875, 42.5530802889558],
[-107.138671875, 41.83682786072714],
[-108.10546875, 39.36827914916014],
[-111.005859375, 39.30029918615029],
[-108.017578125, 36.80928470205937]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-105.64453124999999, 42.22851735620852],
[-100.1953125, 42.35854391749705],
[-102.919921875, 42.22851735620852],
[-103.0078125, 36.94989178681327],
[-105.908203125, 37.020098201368114],
[-99.931640625, 36.94989178681327]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-98.349609375, 36.87962060502676],
[-98.173828125, 42.48830197960227],
[-95.80078125, 39.33429742980725],
[-94.0869140625, 42.5530802889558],
[-94.04296874999999, 37.055177106660814]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-92.548828125, 42.48830197960227],
[-92.548828125, 36.73888412439431],
[-89.1650390625, 37.26530995561875],
[-89.4287109375, 39.50404070558415],
[-92.021484375, 39.842286020743394],
[-89.384765625, 40.51379915504413],
[-89.384765625, 42.391008609205045],
[-92.493896484375, 42.49640294093705]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-87.4072265625, 42.35854391749705],
[-87.9345703125, 37.23032838760387],
[-83.583984375, 37.19533058280065]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-78.837890625, 37.33522435930639],
[-82.4853515625, 37.3002752813443],
[-82.44140625, 39.774769485295465],
[-79.27734374999999, 39.70718665682654],
[-82.44140625, 40.01078714046552],
[-82.3974609375, 41.705728515237524],
[-79.1455078125, 41.672911819602085]
]
}
}
]
}
FillLayer
A FillLayer makes use of the Polygon geometry from the linked source. A shape is drawn enclosed on the map and the shape is filled in.
private async void DidFinishLoadingStyleAsync(MapStyle style)
{
try
{
source = new GeoJsonSource(SOURCE_ID, "fill.json") { IsLocal = true };
Map.Functions.AddSource(source);
FillLayer lineLayer = new FillLayer(SOURCE_ID, LAYER_ID);
lineLayer.FillColor = Color.FromRgb(255, 0, 0);
lineLayer.FillOpacity = 4;
Map.Functions.AddLayer(lineLayer);
}
catch (Exception e)
{
Console.WriteLine($"Error loading GeoJSON: {e.Message}");
}
}
SymbolLayer
The SymbolLayer is used for displaying text or icons on the map. The locations for rendering are pulled from the coordinates in the source’s data. The example below shows how you can use your own custom icon on the map:
public void DidFinishLoadingStyle(MapStyle style)
{
Map.Functions.AddStyleImage(new IconImageSource()
{
Id = HAZARD_ICON,
Source = ImageSource.FromResource("MapSDK.Sample.Resources.Images.hazard.png")
});
var symbol = GetSymbol(new TrimbleMaps.MapsSDK.LatLng(40.7135, -74.0066));
Map.Annotations = new[] { symbol };
}
private void DidTapOnMarker(string id)
{
var symbol = Map.Annotations.FirstOrDefault(x => x.Id == id) as SymbolAnnotation;
if (symbol == null) return;
var coords = symbol.Coordinates;
var position = new CameraPosition
{
Target = symbol.Coordinates,
Zoom = 19.0
};
Map.Functions.AnimateCamera(position, 300);
}
private SymbolAnnotation GetSymbol(TrimbleMaps.MapsSDK.LatLng point)
{
return new SymbolAnnotation
{
Coordinates = point,
IconImage = HAZARD_ICON,
IconSize = 0.6f,
TextField = "Hazard",
TextOffset = new[] { 0f, -1.6f },
TextColor = Color.FromRgb(255, 0, 0),
TextAnchor = "Bottom",
TextSize = 16f,
Id = Guid.NewGuid().ToString()
};
}
A more detailed example of the SymbolLayer in action can be found in the Icons on a Map code example.
Other layers
A variety of other layers are also available for use, such as the HeatmapLayer and the FillExtrusionLayer.