Visualizing data
Contents
Typically the Maps SDK will be used to visualize data on top of the map. Data could vary from simple dots-on-a-map to more complex pieces like 3D buildings, route paths, geofences, and more.
The recommended way to visualize custom data on top of the map is through the use of Sources and Layers.
Sources store the data you want to visualize. Layers, depending on the type set, will visualize that data on the map.
-
Sources and Layers are attached to the map’s style. Therefore if you change styles after setting those sources and layers, you will need to re-apply them.
-
Sources and Layers should not be added to a style until the
DidFinishLoadingStyleAsync()callback is fired.
Sources
Sources store and contain the data you wish to visualize on the map. A Layer will reference a source by its id, and pull from the source for rendering purposes. The two required parameters for a source are a unique String id and the type of data being stored. There are a variety of source types such as vector and raster, but the most commonly used is the GeoJson type. A simple GeoJsonSource example:
private void Setup()
{
Map.Center = new TrimbleMaps.MapsSDK.LatLng(41.36290180612575, -74.6946761628674);
Map.ZoomMinLevel = 13;
Map.MapStyle = MapStyle.MOBILE_NIGHT;
Map.DidFinishLoadingStyleCommand = new Command<MapStyle>(DidFinishLoadingStyleAsync);
}
private async void DidFinishLoadingStyleAsync(MapStyle style)
{
try
{
source = new GeoJsonSource(SOURCE_ID, "dots.json") { IsLocal = true };
Map.Functions.AddSource(source);
}
catch (Exception e)
{
Console.WriteLine($"Error loading GeoJSON: {e.Message}");
}
}
Sample JSON (dots.json)
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.68954, 41.369863]
},
"properties": {
"state": "NY"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.687882, 41.36892]
},
"properties": {
"state": "NY"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.687007, 41.349811]
},
"properties": {
"state": "NJ"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.68222, 41.36056]
},
"properties": {
"state": "NY"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.704292, 41.364475]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.710335, 41.360504]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.695556, 41.367119]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.694232, 41.354974]
},
"properties": {
"state": "NJ"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.698967, 41.370361]
},
"properties": {
"state": "PA"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.709572, 41.360474]
},
"properties": {
"state": "PA"
}
}
]
}
In the example above, once the DidFinishLoadingStyleAsync() callback is fired, two GeoJson points / features fetched from FeatureCollection geoJson local file. Finally, the source is added to the style.
You can include source internally inside Raw folder as MauiAsset and for internal file IsLocal=true.
<ItemGroup>
<MauiAsset Include="Resources\Raw\dots.json" />
</ItemGroup>