Different Colored Markers with JvectorMaps

Question

With JVectorMap, How can I add two sets of markers that are different colors? There's been one other question asked about it and the solution didn't work on JSFiddle. Right now I have markers like and I can attribute types, but I don't know the code that would change the colors of specific types. Any help?

<div id="map"></div>
<script>
  $(function(){
    $('#map').vectorMap({
    map: 'us_aea_en',
    zoomOnScroll: true,
    hoverOpacity: 0.7,
    markerStyle: {
      initial: {
        fill: '#800000',
        stroke: '#383f47'
      }
    },
    markers: [
      {latLng: [41.50, -87.37], name: 'Test1 - 2010', type : "chicago"},
      {latLng: [39.16, -84.46], name: 'Test2 - 2010'},
      {latLng: [39.25, -84.46], name: 'Test3 - 2010'}
    ] 


    });
   });
</script>

Quietude

Answer 1

In the documentation of the plugin it is said:

Each marker is represented by latLng (array of two numeric values), name (string which will be show on marker's tip) and any marker styles.

So what we do is the following.

$('#world-map').vectorMap({
    markers: [
        { latLng: [38.90, -98.45], name: 'John Doe', style: {r: 8, fill:'yellow'}},
        { latLng: [46.90, -65], name: 'Label name', style: {r: 12, fill:'black'}},
        { latLng: [46.90, -65], name: 'Label name', style: {r: 4, fill:'red'}}
    ]
});

This way for every marker you create there will be different styles assigned to it.

Pandit

Answer 2

You may use style for different colors:

{latLng: [41.50, -87.37], name: 'Test1 - 2010', style: {fill: 'rgba(0,0,255,0.1)', r:20}},

Tincher

Answer 3

try scales:

    markers: [
       {latLng: [41.50, -87.37], name: 'Test1 - 2010', type : "chicago"},
       {latLng: [39.16, -84.46], name: 'Test2 - 2010'},
       {latLng: [39.25, -84.46], name: 'Test3 - 2010'}
    ],
    scales: {
        markers:[{
           attributes: 'fill',
           scale: ['#000000/*color1*/', '/*color2*/'....],
           values: [0, 1, 2]
       }]
    }               

Routine