Would anyone know how to conditionally change a symbol color for example to be representative of the Azure Maps JS SDK symbol layer?

I am already utilizing the CustomJSProperties of ASPXGridview and on grid's init i'm creating a datasource & symbol layer for a map..

the datasource has an id property (guid) from the grid, I was wondering if anyone had any quick tips on dynamically changing the Pin marker's color for example based on the ever changing FocusedRowIndex?

possibly utilizing the iconOptions in the datasource? like this example?

https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Symbol Layer/Styled Symbol Layer/Styled Symbol Layer.html

CodePudding user response：

The dynamically change of the pin marker's color can be done using kendo UI

Sample code:

    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
<div id="mapping"></div>
<script>
    $("#mapping").kendoMap({
        markers: [{
            shape: "pinTarget",
            location: [42, 28],
            colorField: "green"
        },{
            shape: "pinTarget",
            location: [42, 35],
            colorField: "red"
        },{
            shape: "pinTarget",
            location: [42, 41],
            colorField: "#333999"
        }],
        markerActivate: function(e) {
          $(e.marker.element.context).css("color", e.marker.options.colorField)
        }
    }); </script>

Sample Maps pin

CodePudding user response：

You can use a data driven style expression and add a flag property to your shape. Here are some samples that show how to do this:

https://samples.azuremaps.com/?sample=symbol-image-selection-state

https://samples.azuremaps.com/?sample=data-driven-symbol-icons