jQuery kendoUI: Map drawing rectangles not working

Question

Kendo UI v2019.1.220 for jQuery

trying to show a world map with rectangles with different opacity values to make a density distribution map.

What I tried doing is this

    var data = {
        minLat: 0,
        minLong: -95.98861,
        stepX: 1.12570589,
        stepY: 0.50980665,
        values: {
            '6:99': {v: 66.09}, 
            '8:89': {v: 30},
            '6:99': {v: 66.09},
            '8:89': {v: 30},
            '10:89': {v: 15.5},
            '11:81': {v: 3},
            '11:82': {v: 4},
            '11:86': {v: 2.4},
            '11:89': {v: 3},
            '12:80': {v: 18},
            '12:83': {v: 18},
            '12:84': {v: 21.9},
            '14:79': {v: 220.75},
            '14:80': {v: 86.8},
        }
    };
    
    
    
    $("div#whatever").kendoMap({
        zoom: 11,
        layers: [
            {
                type: "shape"
            },
            {
                type: "tile",
                urlTemplate: "http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
                subdomains: ["a", "b", "c"],
                attribution: "© OpenStreetMap"
            },
    
        ],
        reset: function(e){
            let map = $("div#whatever").data('kendoMap');
            _drawRects( map, data );
        }
    });
    
    var color = "red";
    
    var _drawRects = function( map, info ){
        let maxAvg = Math.max( ...Object.keys(info.values).map(k => info.values[k]) );
        for( let i in info.values ){
            if( info.values.hasOwnProperty(i) ){
                let coor = i.split(':');
                let dim = new kendo.dataviz.geometry.Rect(
                    new kendo.dataviz.geometry.Point( info.stepY*coor[1], info.stepX*coor[0] ),
                    new kendo.dataviz.geometry.Size( info.stepX, info.stepY )
                );
                let square = new kendo.dataviz.drawing.Rect(
                    dim,
                    {
                        fill: {
                            color: color,
                            opacity: 1 - info.values[i].v / maxAvg
                        },
                        stroke: {
                            color: color,
                        }
                    }
                );
                map.layers.find(l=>l.options.type==='shape').surface.draw(square);
            }
        }
    };

No error, the rectangles just don't appear

The coordinates seem to be valid, because if I use them to place markers they work

what's wrong with the above code?

Answer 1

Fix the maxAvg computation to deal with .v

Change

let maxAvg = Math.max( ...Object.keys(info.values).map(k => info.values[k]) );

to

let maxAvg = Math.max( ...Object.keys(info.values).map(k => info.values[k].v) );

And move the .kendoMap creation to the bottom of the script, after where _drawRects function is assigned.