Various color markers with JvectorMaps

Question

With JVectorMap, how can I add two sets of markers of different colors? Another question was asked and the solution did not work on JSFiddle. Right now I have markers 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> 

Answer 1

You can use the style for different colors:

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

Answer 2

The plugin documentation says:

Each marker is represented by latLng (an array of two numeric values), a name (a string that will be displayed at the tip of the marker), and any marker styles .

So, we do 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'}} ] }); 

Thus, for each marker you create, different styles will be assigned.

Answer 3

try the 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] }] }