使用jVectorMap将标记标签更改为多行

Question

I am attempting to use jVectorMap's library to plot different markers that have labels next to them.

The problem I'm running into is with the render function under labels, where I try to loop over an array and add it to the name. Unfortunately, it is putting the parsed HTML into the label in text form, not HTML.

labels: {
      markers: {
        render: function(index) {
          var markerStr = "";
          markerStr += currentMarkers[index].name;
          $.each(currentMarkers[index].divisions, function(index, currentDivision) {
            markerStr += currentDivision + "<br>";
          });
          return $.parseHTML(markerStr);
        },
        offsets: function(index) {
          return currentMarkers[index].offsets || [0, 0];
        }
      }
    }

I have made a codepen example so that you can see what I'm talking about.

Different Variables:

  var allMarkers = [{
    latLng: [43.831997, 11.204543],
    name: 'Location A',
    country: 'IT',
    divisions: ["AAAAAAA", "BBBBBBBBB"]
  }, {
    latLng: [40.537014, -3.636961],
    name: 'Location B',
    country: 'ES',
    divisions: ["R & D", "BBBBBBBBBB", "AAAAAAAA"]
  }, {
    latLng: [53.409245, -2.990841],
    name: 'Location C',
    country: 'GB',
    divisions: ["BBBBBBBBB"]
  }, {
    latLng: [51.375644, -0.677483],
    name: 'Location D',
    country: 'GB',
    offsets: [-4, -8],
    divisions: ["CCCCCCCC"]
  }, {
    latLng: [51.266658, -1.093064],
    name: 'Location E',
    country: 'GB',
    offsets: [-100, 5],
    divisions: ["DDDDDDD"]
  }, {
    latLng: [51.196622, -0.393301],
    name: 'Location F',
    country: 'GB',
    divisions: ["CCCCCC"]
  }, {
    latLng: [50.226984, 8.615192],
    name: 'Location G',
    country: 'DE',
    divisions: ["DDDDDDDDD"]
  }, {
    latLng: [51.896741, -8.487941],
    name: 'Location H',
    country: 'IE',
    offsets: [-3, -10],
    divisions: ["FFFFFFFFFF", "EEEEEEEEEEE"]
  }, {
    latLng: [53.350129, -6.263215],
    name: 'Location I',
    country: 'IE',
    offsets: [-60, 0],
    divisions: ["EEEEEEEE"]
  }, {
    latLng: [51.706063, -8.522351],
    name: 'Location J',
    country: 'IE',
    offsets: [-66, 2],
    divisions: ["BBBBBBBBB"]
  }, {
    latLng: [48.884578, 2.269055],
    name: 'Location K',
    country: 'FR',
    offsets: [0, -3],
    divisions: ["GGGGGGGGG"]
  }, {
    latLng: [48.489941, 7.678864],
    name: 'Location L',
    country: 'FR',
    divisions: ["HHHHHHHHH"]
  }];
  var currentMarkers = allMarkers.slice();
  var highlightedCountries = ['GB', 'IT', 'ES', 'FR', 'DE', 'IE'];

CODE:

  var mapObj = new jvm.Map({
    container: $('#map'),
    map: 'europe_mill',
    focusOn: {
      x: 0.5,
      y: 0.6,
      scale: 2
    },
    markerStyle: {
      initial: {
        fill: '#fff',
        stroke: '#383f47'
      }
    },
    regionStyle: {
      hover: {
        "fill-opacity": .6,
      }
    },
    onRegionTipShow: function(e, el, code) {
      if (highlightedCountries.indexOf(code) > -1) {
        $('.jvectormap-tip').removeClass('hidden');
      } else {
        $('path[data-code="' + code + '"]').attr('fill-opacity', 1).attr('cursor', 'default');
        $('.jvectormap-tip').addClass('hidden');
      }
    },
    backgroundColor: '#d0e7f7',
    markers: currentMarkers,
    series: {
      regions: [{
        values: {
          GB: '#cecece',
          IT: '#cecece',
          ES: '#cecece',
          FR: '#cecece',
          DE: '#cecece',
          IE: '#cecece'
        }
      }]
    },
    labels: {
      markers: {
        render: function(index) {
          var markerStr = "";
          markerStr += currentMarkers[index].name;
          $.each(currentMarkers[index].divisions, function(index, currentDivision) {
            markerStr += currentDivision + "<br>";
          });
          return $.parseHTML(markerStr);
        },
        offsets: function(index) {
          return currentMarkers[index].offsets || [0, 0];
        }
      }
    },
    onMarkerTipShow: function(e, label, code) {
      var labelStr = "";
      $.each(currentMarkers[code].divisions, function(index, currentDivision) {
        labelStr += currentDivision + "<br>";
      });
      label.html(labelStr);
    },
    zoomOnScroll: false
  });

Answer 1

Ok, here's an answer, which allows you to add breaks in the labels using tspans, which are able to be included inside of svgs:

$(document).ready(function() {

Variables:

  var allMarkers = [{
    latLng: [43.831997, 11.204543],
    name: 'Location A',
    country: 'IT',
    divisions: ["AAAAAAA", "BBBBBBBBB"]
  }, {
    latLng: [40.537014, -3.636961],
    name: 'Location B',
    country: 'ES',
    divisions: ["R & D", "BBBBBBBBBB", "AAAAAAAA"]
  }, {
    latLng: [53.409245, -2.990841],
    name: 'Location C',
    country: 'GB',
    divisions: ["BBBBBBBBB"]
  }, {
    latLng: [51.375644, -0.677483],
    name: 'Location D',
    country: 'GB',
    offsets: [-4, -8],
    divisions: ["CCCCCCCC"]
  }, {
    latLng: [51.266658, -1.093064],
    name: 'Location E',
    country: 'GB',
    offsets: [-100, 5],
    divisions: ["DDDDDDD"]
  }, {
    latLng: [51.196622, -0.393301],
    name: 'Location F',
    country: 'GB',
    divisions: ["CCCCCC"]
  }, {
    latLng: [50.226984, 8.615192],
    name: 'Location G',
    country: 'DE',
    divisions: ["DDDDDDDDD"]
  }, {
    latLng: [51.896741, -8.487941],
    name: 'Location H',
    country: 'IE',
    offsets: [-3, -10],
    divisions: ["FFFFFFFFFF", "EEEEEEEEEEE"]
  }, {
    latLng: [53.350129, -6.263215],
    name: 'Location I',
    country: 'IE',
    offsets: [-60, 0],
    divisions: ["EEEEEEEE"]
  }, {
    latLng: [51.706063, -8.522351],
    name: 'Location J',
    country: 'IE',
    offsets: [-66, 2],
    divisions: ["BBBBBBBBB"]
  }, {
    latLng: [48.884578, 2.269055],
    name: 'Location K',
    country: 'FR',
    offsets: [0, -3],
    divisions: ["GGGGGGGGG"]
  }, {
    latLng: [48.489941, 7.678864],
    name: 'Location L',
    country: 'FR',
    divisions: ["HHHHHHHHH"]
  }];
  var currentMarkers = allMarkers.slice();
  var highlightedCountries = ['GB', 'IT', 'ES', 'FR', 'DE', 'IE'];

CODE

  var mapObj = new jvm.Map({
    container: $('#map'),
    map: 'europe_mill',
    focusOn: {
      x: 0.5,
      y: 0.6,
      scale: 2
    },
    markerStyle: {
      initial: {
        fill: '#fff',
        stroke: '#383f47'
      }
    },
    regionStyle: {
      hover: {
        "fill-opacity": .6,
      }
    },
    onRegionTipShow: function(e, el, code) {
      if (highlightedCountries.indexOf(code) > -1) {
        $('.jvectormap-tip').removeClass('hidden');
      } else {
        $('path[data-code="' + code + '"]').attr('fill-opacity', 1).attr('cursor', 'default');
        $('.jvectormap-tip').addClass('hidden');
      }
    },
    backgroundColor: '#d0e7f7',
    markers: currentMarkers,
    series: {
      regions: [{
        values: {
          GB: '#cecece',
          IT: '#cecece',
          ES: '#cecece',
          FR: '#cecece',
          DE: '#cecece',
          IE: '#cecece'
        }
      }]
    },
    labels: {
      markers: {
        render: function(index) {
          var markerStr = "";
          markerStr += '<tspan dy="0em">' + currentMarkers[index].name + "</tspan>";
          $.each(currentMarkers[index].divisions, function(index, currentDivision) {
            markerStr += '<tspan style="font-weight:100;font-style:italic;" dy="1.2em">' + currentDivision + "</tspan>";
          });
          nextTick(fixMarkers);
          return markerStr;
        },
        offsets: function(index) {
          return currentMarkers[index].offsets || [0, 0];
        }
      }
    },
    zoomOnScroll: false
  });

  $('#map').on('click', function(event) {
    mapObj.removeAllMarkers();
    currentMarkers = [];
    resetCountryColors(highlightedCountries);
    var countryCode = $(event.target).attr('data-code');
    if (highlightedCountries.indexOf(countryCode) > -1) {
      $(event.target).css('fill', '#d52b1e');
      for (var i = 0; i < allMarkers.length; i++) {
        if (countryCode == allMarkers[i].country) {
          currentMarkers.push(allMarkers[i]);
        }
      }
      mapObj.addMarkers(currentMarkers, []);
    }

    mapObj.updateSize();
  });
  $(window).resize(function() {
    mapObj.updateSize();
    fixMarkers();
  });
  $('.jvectormap-container').mousemove(fixMarkers).swipe({
    swipeStatus: fixMarkers
  });

});

function resetCountryColors(chosenCountries) {
  $.each(chosenCountries, function(index, currentCountry) {
    $('.jvectormap-element[data-code="' + currentCountry + '"]').css('fill', '#cecece');
  });
}

function fixMarkers() {
  $('text.jvectormap-marker').each(function() {
    var $this = $(this);
    var text = $this.text();
    if (text.indexOf('</tspan>') !== -1) {
      $this.html(text);
    }
    $this.find('tspan').each(function() {
      $(this).attr('x', $this.attr('x'));
    });
  });
}

function nextTick(cb) {
  if (typeof window.Promise === 'function') {
    Promise.resolve().then(cb);
  } else if (typeof window.setImmediate === 'function') {
    setImmediate(cb);
  } else {
    setTimeout(cb, 0);
  }
}

Note especially the following code, which places tspans into the code

      markerStr += '<tspan dy="0em">' + currentMarkers[index].name + "</tspan>";
      $.each(currentMarkers[index].divisions, function(index, currentDivision) {
        markerStr += '<tspan style="font-weight:100;font-style:italic;" dy="1.2em">' + currentDivision + "</tspan>";
      });
      nextTick(fixMarkers);
      return markerStr;

and the the fixMarkers function, which converts the tspans into HTML.

HERE IS A WORKING EXAMPLE

Answer 2

Found an easy way:

onMarkerLabelShow: function(event, label, code) {
    var mySplitResult = label.html().split("\r\n");
    label.html("");
    for(i = 0; i < mySplitResult.length; i++){
        if (i == mySplitResult.length-1){label.html( label.html()  + mySplitResult[i]); }   else{label.html( label.html()  + mySplitResult[i] + "<br />"); }                 
    }         
}