jvectormap add marker with different radius

Question

I'm trying to create a jvectormap and populate it with markers received via ajax. I'm now able to put the markers in the map but I'd love to change the radius of them based on another value received via ajax.

$.ajax({
            url: "/map",
            type: 'post',
            dataType: 'json',
            data: {
                _csrf : 'token'
            },
            success: function (data) {
                var mapObj = new jvm.Map({
                    container: $('#todaymap'),
                    map: 'it_merc_en',
                    normalizeFunction: 'polynomial',        
                    markerStyle: {
                        initial: {
                            fill: '#F8E23B',
                            stroke: '#383f47',
                            r: 3,
                        },
                        hover: {
                            fill: '#383f47',
                            stroke: '#383f47'
                        }
                    },
                    backgroundColor: '#383f47',
                    markers: [],
                    series: {
                        markers: [{
                            attribute: 'r',
                            scale: [3,10]
                        }],
                    }
                });
                $('#todaymap div:first-child').hide();

                var mapMarkers = [];
                var mapMarkersValues = [];
                mapMarkers.length = 0;
                mapMarkersValues.length = 0;
                for (var i = 0, l= data.length; i < l; i++) {
                    coords= Array();
                    coords[0]= data[i].lat;
                    coords[1]= data[i].lng;

                    console.log(data[i].count);
                    mapMarkers.push({name: data[i].name, latLng: coords});
                }
                mapObj.addMarkers(mapMarkers, []);  
            }
        }); 

the field I want to use is data[i].count which has a value from 0 to 6 based on a count of the occurrences. I didn't find anything useful on the net. Anyone has an idea on how to do it?

Answer 1

A similar approach I've just tested on my own implementation of the map works, however my version is set to alter the markers that have already been set upon creation of the map using, it uses:

mapObj.markers[markerNumber].element.config.style.initial.r = scaleValue;
mapObj.applyTransform();

So for this to work you would have to add this after the mapObj.addMarkers line using another loop over the data, and then use applyTransform() to redraw/refresh the map with the changed marker information after this secondary loop, something like this should work I would imagine:

for (var i = 0, l= data.length; i < l; i++) {
    mapObj.markers[i].element.config.style.initial.r = data[i].count;
}
mapObj.applyTransform();

Edit: After looking at your code again and trying something out on mine with the initial marker creation, I think you could do it actually just adding the information to the mapMarkers array like so:

mapMarkers.push({name: data[i].name, latLng: coords, r:data[i].count});