Marker icons

Following example demostrates using of icons instead of plain circles to represent markers. Also note static labels rendered next to each marker.

Full code of an example:

$(function(){
  var plants = [
    {name: 'VAK', coords: [50.0091294, 9.0371812], status: 'closed', offsets: [0, 2]},
    {name: 'MZFR', coords: [49.0543102, 8.4825862], status: 'closed', offsets: [0, 2]},
    {name: 'AVR', coords: [50.9030599, 6.4213693], status: 'closed'},
    {name: 'KKR', coords: [53.1472465, 12.9903674], status: 'closed'},
    {name: 'KRB', coords: [48.513264, 10.4020357], status: 'activeUntil2018'},
    {name: 'KWO', coords: [49.364503, 9.076252], status: 'closed'},
    {name: 'KWL', coords: [52.5331853, 7.2505223], status: 'closed', offsets: [0, -2]},
    {name: 'HDR', coords: [50.1051446, 8.9348691], status: 'closed', offsets: [0, -2]},
    {name: 'KKS', coords: [53.6200685, 9.5306289], status: 'closed'},
    {name: 'KKN', coords: [48.6558015, 12.2500848], status: 'closed', offsets: [0, -2]},
    {name: 'KGR', coords: [54.1417497, 13.6583877], status: 'closed'},
    {name: 'KWB', coords: [49.709331, 8.415865], status: 'closed'},
    {name: 'KWW', coords: [51.6396481, 9.3915617], status: 'closed'},
    {name: 'GKN', coords: [49.0401151, 9.1721088], status: 'activeUntil2022'},
    {name: 'KKB', coords: [53.8913533, 9.2005777], status: 'closed', offsets: [0, -5]},
    {name: 'KKI', coords: [48.5544748, 12.3472095], status: 'activeUntil2022', offsets: [0, 2]},
    {name: 'KKU', coords: [53.4293465, 8.4774649], status: 'closed'},
    {name: 'KNK', coords: [49.1473279, 8.3827739], status: 'closed'},
    {name: 'KKP', coords: [49.2513078, 8.4356761], status: 'activeUntil2022', offsets: [0, -2]},
    {name: 'KKG', coords: [49.9841308, 10.1846373], status: 'activeUntil2018'},
    {name: 'KKK', coords: [53.4104656, 10.4091597], status: 'closed'},
    {name: 'KWG', coords: [52.0348748, 9.4097793], status: 'activeUntil2022'},
    {name: 'KBR', coords: [53.850666, 9.3457603], status: 'closed', offsets: [0, 5]},
    {name: 'KMK', coords: [50.408791, 7.4861956], status: 'closed'},
    {name: 'THTR', coords: [51.6786228, 7.9700232], status: 'closed'},
    {name: 'KKE', coords: [52.4216974, 7.3706389], status: 'activeUntil2022', offsets: [0, 2]}
  ];

  new jvm.Map({
    container: $('#map'),
    map: 'de_merc',
    markers: plants.map(function(h){ return {name: h.name, latLng: h.coords} }),
    labels: {
        markers: {
          render: function(index){
            return plants[index].name;
          },
          offsets: function(index){
            var offset = plants[index]['offsets'] || [0, 0];

            return [offset[0] - 7, offset[1] + 3];
          }
        }
    },
    series: {
      markers: [{
        attribute: 'image',
        scale: {
          'closed': '/img/icon-np-3.png',
          'activeUntil2018': '/img/icon-np-2.png',
          'activeUntil2022': '/img/icon-np-1.png'
        },
        values: plants.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
        legend: {
          horizontal: true,
          title: 'Nuclear power station status',
          labelRender: function(v){
            return {
              closed: 'Closed',
              activeUntil2018: 'Scheduled for shut down<br> before 2018',
              activeUntil2022: 'Scheduled for shut down<br> before 2022'
            }[v];
          }
        }
      }]
    }
  });
});

Additional CSS for the legend:

.jvectormap-legend-inner {
  margin-bottom: 3px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick {
  width: auto;
  margin-right: 10px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick-text {
  display: inline-block;
  vertical-align: middle;
  line-height: 13px;
}

.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
  width: 32px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
}