jvectormap markers label image
Asked Answered
U

1

4

does anyone know how to add two different images to two different marker's labels?

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

this displays the same image on both markers

Underthecounter answered 4/12, 2013 at 18:23 Comment(0)
P
3

You can add an extra property image for each marker that you can retrieve when hovering a marker.

var markers = [
    { latLng: [46.90, 8.45], name: "Italy", image: 'italy.png' },
    { latLng: [26.02, 50.55], name: 'Bahrain', image: 'bahrain.png' },
];

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: markers,
    onMarkerLabelShow: function(event, label, index) {
     label.html('<img src="img/' + markers[index].image + '"><br />' + label.html());                
    }
});
Paresthesia answered 6/12, 2013 at 19:11 Comment(1)
excuse me I want to ask you to look at this article also if it's possible .Appreciate #38672704Rochellerochemont

© 2022 - 2024 — McMap. All rights reserved.