Dots on a map
Contents
The Mobile Maps SDK examples require that you first complete the initial project set-up.
Visualize data on top of the map. Data could vary from simple dots-on-a-map (the example below) to more complex pieces like 3D buildings, route paths, geofences, and more.
DotsOnMapLayer.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrimbleMaps.MapSDK.Sample.DotsOnMapLayer"
Title="DotsOnMapLayer" xmlns:TrimbleMaps="clr-namespace:TrimbleMaps.Controls.Forms;assembly=TrimbleMaps.MapsSDK">
<ContentPage.Content>
<TrimbleMaps:MapView
x:Name="Map"
ShowUserLocation="true"
UserLocationTracking="None"
ZoomMaxLevel="21"
CompassEnabled="True"
CompassFadeFacingNorth="False"
/>
</ContentPage.Content>
</ContentPage>
DotsOnMapLayer.xaml.cs
using TrimbleMaps.Controls.Forms;
using TrimbleMaps.MapsSDK.Layers;
using TrimbleMaps.MapsSDK.Sources;
namespace TrimbleMaps.MapSDK.Sample
{
public partial class DotsOnMapLayer : ContentPage
{
const string SOURCE_ID = "tristatepoints";
const string LAYER_ID = "tristatepoints";
public TrimbleMaps.MapsSDK.Sources.Source source { get; private set; }
public DotsOnMapLayer()
{
InitializeComponent();
Setup();
}
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);
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}");
}
}
}
}
Sample JSON (tristate.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"
}
}
]
}