How do I bind the collection of MapMarkers?

[Caleb]

I am working with the MAUI Maps and I want to bind the location of my map markers to an observable collection in my view model. I can't find any examples. It appears as though the `Markers` property supports a binding, but from there I can't see how to actually point to the Latitude and Longitude properties in my collection.

<map:MapShapeLayer x:Name="layer" DataSource="{Binding Locales}" Markers="{Binding Locales}">

[Eswaran Thirugnanasambandam]

Your requirement can be achieved using Markers property of the SfMaps control. The Markers property is of type ObservableCollection<MapMarker>, which allows you to bind a collection of MapMarker objects to the SfMaps control.

Here is an example of how you can bind a collection of MapMarkers to an SfMaps control.

[XAML]

<map:SfMaps Grid.Row="0">

    <map:SfMaps.Layer>

        <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"

                           Markers="{Binding MapMarkers}" ></map:MapShapeLayer>

    </map:SfMaps.Layer>

</map:SfMaps>

In the example above, the MapMarkers property of the view model is bound to the Markers property of the SfMaps control. In the MapMarker class where we can directly define the latitude and longitude value in the view model to show the markers where we want to display on the map.

Here is an example to define the MapMarkers collection in the ViewModel.

[C#]

MapMarkers = new ObservableCollection<MapMarker>

            {

                new MapMarker() { Latitude = 20.5595, Longitude = 22.9375, IconFill = new SolidColorBrush(Colors.Aqua), IconType = MapIconType.Circle, IconHeight = 15, IconWidth = 15 },

                new MapMarker() { Latitude = 21.7679, Longitude = 78.8718, IconFill = new SolidColorBrush(Colors.Aqua), IconType = MapIconType.Circle, IconHeight = 15, IconWidth = 15 },

                new MapMarker() { Latitude = 133.7751, Longitude = 25.2744, IconFill = new SolidColorBrush(Colors.Aqua), IconType = MapIconType.Circle, IconHeight = 15, IconWidth = 15 },

                new MapMarker() { Latitude = 60.2551, Longitude = 84.5260, IconFill = new SolidColorBrush(Colors.Aqua), IconType = MapIconType.Circle, IconHeight = 15, IconWidth = 15 },

                new MapMarker() { Latitude = 195.4915, Longitude = -50.7832, IconFill = new SolidColorBrush(Colors.Aqua), IconType = MapIconType.Circle, IconHeight = 15, IconWidth = 15 }

            };

We have prepared a sample to bind the collection of MapMarkers and please get it from below attachment.

Attachment: MapSample_f1c1db60.zip

[Caleb]

Thank you! Is there also a way to bind the click event on any given marker to an observable property?

[Eswaran Thirugnanasambandam]

Your requirement can be achieved using EventToCommandBehavior. We have prepared the sample to achieve your requirements, and please get it from the below attachment.

Attachment: MAUIMapSample_(1)_7ee1f0b6.zip

[Michael Marmah]

Thanks Eswaran.

Please how can I generate ObservableCollection markers using data from http JSON response.

From your example its more of hardcoded values.

Thank you

[Eswaran Thirugnanasambandam]

Currently, our development team is validating the reported query, and provide further details by tomorrow. We appreciate your patience until then.

[Eswaran Thirugnanasambandam]

Sorry for the inconvenience, our development team need some more time to achieve your requirement and we will update further details by tomorrow. We appreciate your patience until then.

[Eswaran Thirugnanasambandam]

You can use the opensource Newtonsoft.Json library to deserialize the JSON data into a format that can be bound to the SfMaps control. After deserializing the data, you can bind the data to the SfMaps control by setting the appropriate properties of the control. Here's an example of how you could deserialize JSON data and bind it to an SfMaps control.

[C#]

string jsonData = @"{'MapMarker': [{

      'Latitude': 20.5595,

      'Longitude': 22.9375

    },

    {

      'Latitude': 21.7679,

      'Longitude': 78.8718

    },

    {

      'Latitude': 133.7751,

      'Longitude': 25.2744

    },

    {

      'Latitude': 60.2551,

      'Longitude': 84.5260

    },

    {

      'Latitude': 195.4915,

      'Longitude': -50.7832

    }

  ]

}";

 

var jsonDataCollection = JsonConvert.DeserializeObject<ViewModel>(jsonData);

this.BindingContext = jsonDataCollection;

[XAML]

  <map:SfMaps Grid.Row="0">

      <map:SfMaps.Layer>

          <map:MapShapeLayer ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"

                             Markers="{Binding MapMarker}">

         </map:MapShapeLayer>

      </map:SfMaps.Layer>

  </map:SfMaps>

We have prepared the sample to achieve your requirement and please get it from below attachment.

Attachment: MAUIMapSample_27529499.zip