Marker Colors Based on Datasource

[B]

I'm trying to dynamically set the marker color based on a value from a datasource.  I can't find any examples of this and can't find an event that fires that would allow me to do this dynamically.  Can you point me in the right direction, please.  Below is the simple map control that I'm using:

 

@(Html.Kendo().Map()
    .Name("map")
    .Center(new double[] { Model.Latitude, Model.Longitude })
    .Zoom(17)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Tile)
            .UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
            .Subdomains("a", "b", "c");
        layers.Add()
            .Type(MapLayerType.Marker)
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("SelectBillingLocationsCoordinates", "Details", new { Id = @Model.Id }))
                )
                .LocationField("LatLng")
            .TitleField("Name");
    })
    )

 

[B]

I sorted this out.  In case anyone else needs this functionality, here's what I did (note:  I couldn't get the markerActivate event to fire from MVC that's why this is jquery).  I followed an example on Telerik that was outdated, but it got me going in the right direction.

 

function createMap() {
    var markerData = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/details/SelectBillingLocationsCoordinates/@Model.Id",
                dataType: "json"
            }
        }
    });

    $("#map").kendoMap({
        center: [@Model.Latitude, @Model.Longitude],
        zoom: 15,
        layers: [{
            type: "tile",
            urlTemplate: "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            subdomains: ["a", "b", "c"]
        }, {
            type: "marker",
            dataSource: markerData,
                locationField: "LatLng",
            titleField: "Name"
        }],
        markerActivate: function (e) {
            $(e.marker.element[0]).css("color", e.marker.dataItem.ColorField);
        }
    });
}


$(document).ready(createMap);

[Eyup]

Hi,

 

Thank you for sharing your solution with our community.

I hope it would prove helpful to other developers as well.

 

Regards,
Eyup
Progress Telerik