Search code examples
javascriptjqueryjvectormap

How to add markers with series with jvectormap?


I am trying to add markers to a map. The markers have values, so each one have different values. I expect that the circles will have different radius depending on these values. This is what I do:

geochart.removeAllMarkers();
for (var i=0; i<selected_locations.length; i++) {
  loc = selected_locations[i];
  geochart.addMarker(i, locations_data[loc], addedSeries[i] || {}) ;
}

addedSeries is an Array, like [12,0,0,610]

selected_locations is an Array, like ["11", "12", "5", "2"]

locations_data is an Array, like

{
 ...
 "11": {"latLng": [37.89,-4.78], "name": "Location A"},
 "12": {"latLng": [37.18,-3.59], "name": "Location B"},
 ...
}

geochart is a jvm.Map instance.

The current behavior I get is that the markers are being created, but the radius are always the same.

Any clue ?


Solution

  • It was easy if you browse the code, but a little tricky. It seems I need to add a list of values, one for each marker type declared on series section of the map. This is my map:

    var geochart = new jvm.Map({
      container: $('.spain-map'),
      map: 'es_mill_en',
      markers: markers,
      series: {
        markers: [{
          attribute: 'r',
          scale: [5, 20],
          values: [...]
        },{
          attribute: 'fill',
          scale: ['#00CC00', '#CC0000'],
          values: [...]
        }]
      }
    });
    

    So this is how I resolve it:

    geochart.addMarker(i, 
                       locations_data[loc], 
                       [ addedSeries[i], addedSeries[i] ] || {}
                       );