Shape Selection in .NET MAUI Maps

15 Jul 20268 minutes to read

You can select a shape to highlight that area on a map. You can use the event for performing any action during shape selection.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfMaps control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

Enable shape selection

You can enable shape selection on a map using the EnableSelection property. The selection allows you to select only one shape at a time. You can select a shape by tapping it. By default, the selection is disabled.

The ShapeSelected event is used to perform any action on the shape selected when the user selects it by tapping, clicking, or programmatically.

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name = "layer"
                         ShapesSource = "https://cdn.syncfusion.com/maps/map-data/australia.json"
                         SelectedShapeFill = "#6189ff"
                         ShapeSelected = "layer_ShapeSelected" 
                         ShapeStrokeThickness = "0"
                         EnableSelection = "True">
		
       </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>
public class MainPage
{
	public MainPage()
	{
		InitializeComponent();
		layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/australia.json"));
		layer.ShapeSelected += layer_ShapeSelected;
	}

	private void layer_ShapeSelected(object sender, ShapeSelectedEventArgs e)
	{
	    var dataItem = e.DataItem;
	}
}

Enable shape selection in .NET MAUI Maps

Appearance customization

You can customize the appearance of the selected shape using the following properties.

  • SelectedShapeFill - Change the background color of the selected shape using the SelectedShapeFill property. If the SelectedShapeFill is null, then the saturated color of the shape will be applied. If the SelectedShapeFill is Transparent, then the UI changes will not occur.
  • SelectedShapeStrokeThickness - Change the stroke width of the selected shape using the SelectedShapeStrokeThickness property.
  • SelectedShapeStroke - Change the stroke color of the selected shape using the SelectedShapeStroke property.
<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer ShapesSource = "https://cdn.syncfusion.com/maps/map-data/australia.json"
                         DataSource = "{Binding Data}" 
                         PrimaryValuePath = "Country"
                         ShapeDataField = "STATE_NAME" 
                         ShapeColorValuePath = "Color" 
                         SelectedShapeFill = "#1a35db"
                         SelectedShapeStroke = "DarkGrey" 
                         SelectedShapeStrokeThickness = "1" 
                         EnableSelection = "True">

       </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>
public MainPage()
    {
        InitializeComponent();
		
        ViewModel viewModel = new ViewModel();
        this.BindingContext = viewModel;

        MapShapeLayer layer = new MapShapeLayer();
        layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/australia.json"));
        layer.DataSource = viewModel.Data;
        layer.PrimaryValuePath = "Country";
        layer.ShapeDataField = "STATE_NAME";
        layer.SelectedShapeFill = new SolidColorBrush(Color.FromRgb(26, 53, 219));
        layer.SelectedShapeStroke = new SolidColorBrush(Colors.DarkGray);
        layer.SelectedShapeStrokeThickness = 1;
        layer.EnableSelection = true;
        layer.ShapeColorValuePath = "Color";

        SfMaps maps = new SfMaps();
        maps.Layer = layer;
        this.Content = maps;
    }
	
	public class ViewModel
	{
		public ObservableCollection<Model> Data { get; set; }
		
		public ViewModel()
		{
			Data = new ObservableCollection<Model>();
			Data.Add(new Model(
               "New South Wales",
               Color.FromRgb(97, 137, 255)));
            Data.Add(new Model(
                "Northern Territory",
                Color.FromRgb(97, 137, 255)));
            Data.Add(new Model(
                "Victoria",
                Color.FromRgb(97, 137, 255)));
            Data.Add(new Model(
                "Tasmania",
                Color.FromRgb(97, 137, 255)));
            Data.Add(new Model(
                "Queensland",
                Color.FromRgb(97, 137, 255)));
            Data.Add(new Model(
                "Western Australia",
                Color.FromRgb(97, 137, 255)));
            Data.Add(new Model(
                "South Australia",
                Color.FromRgb(97, 137, 255)));
        }
	}
    
	public class Model
	{
		public String Country { get; set; }
		public Color Color { get; set; }
		
		public Model(string country, Color color)
		{
			Country = country;
			Color = color;
		}
	}

Selection customization in .NET MAUI Maps

NOTE

You can refer to our .NET MAUI Maps feature tour page for its groundbreaking feature representations. You can also explore our .NET MAUI Maps Selection example that shows how to configure a Maps in .NET MAUI.