jvectormap: How to implement HTML instead of simple string in the markers label/tooltip?

Question

I've just implemented the jQuery plugin jvectormap, for the use of a world map. Everything's working perfectly, except this maybe.. I added a few markers and have been trying to implement HTML to the markers label/tooltip. So instead of just "blabla" I want an image/html to show up, when hovering the marker.

How can I achieve this result?

Here's the initializing JS:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "<img src=\"img/logo.png\">"}
    ],
...(other code isn't important)...

The important part is name: "<img src=\"img/logo.png\">"

Thanks for the help!!

Spermic

Answer 1

If you want to customize the label/tooltip that is displayed when you mouse over the marker, you should provide a function for onMarkerLabelShow.

onMarkerLabelShow Function (Event e, Object label, String code) Will be called right before the marker label is going to be shown.

For example:

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "My marker name"}
    ],
    onMarkerLabelShow: function(event, label, code) {
     label.html("<img src=\"img/logo.png\"><br>"+ label.html());                
    }
});

Singlestick

Very nice, got it working for 1 label! :) So how can I differenciate between two labels in the "onMarkerLabelShow" function? – Spermic

code will return the name for that marker in the onMarkerLabelShow() function. Check out this example of how to display a country flag image when hovering over a region, same technique could be applied for markers: https://mcmap.net/q/907163/-highlight-country-flag-on-blank-world-map-when-hovered-on-specific-country – Singlestick

onMarkerLabelShow is deprecated for now, onMarkerTipShow function with same params is instead. – Politesse

Nice @MadsHansen. How to display database value in label ? when i click country? i trying last two weeks i cant get answer pls help me – Mallissa

@Mallissa Ideally try retrieving the database value via an AJAX call within the onMarkerLabelShow function. You need something like this: var dbValue; $.ajax({ url: "database.php", success: function(data) { dbValue = data; } }); – Spermic