Jvector Map how to add and get link from marker

Question

I am trying to get data from the marker array and call it back on the onmarkerclick function so I can go to a URL once a marker is clicked, everything I try seems to fail. I wish to add a URL in to the marker array and return this into the onmarkerclick. Thanks for your help in advanced:

 $(function(){
    $('#map1').vectorMap({
                  map: 'world_mill_en',
                  scale: ['#C8EEFF', '#0071A4'],
                  normalizeFunction: 'polynomial',
                  hoverOpacity: 0.7,
                  hoverColor: false,
                  markerStyle: {
                    initial: {
                          fill: '#F8E23B',
                          stroke: '#383f47'
                    }
                  },
                  backgroundColor: '#383f47',
                  markers: [{latLng: [48.921537, -66.829834], name: "something", weburl : "/blah/foo"

            },{latLng: [45.995944, -64.171143], name: "something else", weburl : "/blah/foo"

            },],
                  onMarkerClick: function(events, label, index, weburl) {
                    alert (1+weburl);                
                   }
            });
});

Ferrand

Answer 1

So much coincidence, I faced the same problem yesterday only..:)

The solution I found was to create an array outside, and access it by the index in the click-function..

var markers = [
    {latLng: [48.921537, -66.829834], name: "something", weburl : "/blah/foo"},
    {latLng: [45.995944, -64.171143], name: "something else", weburl : "/blah/foo-else"}
];

$(function(){
    $('#map1').vectorMap({
                  ...
                  markers: markers,
                  onMarkerClick: function(event, index) {
                      // alter the weburl
                      alert(markers[index].weburl);
                  }
            });
});

Dictation

Thanks, you are an absolute legend. I have spent hours and days on this trying to figure it out.!!!! – Ferrand

Answer 2

Just because I just solved this sort of problem a different way, and I'm feeling very clever for having done so, I will post my answer.

You can store arbitrary data using jQuery.data or javascript dom dataSets. Unless you have other SVG on your page with <circle> elements, you can iterate over all <circle> elements and give them data from an array. The indexes will match, but you can use data-index as a safeguard.

Pretty cool. Even though this is way old, maybe this alternative will help someone.

Unarmed

onMarkerClick event suddenly stopped working for me, this was very helpful. Thanks – Worcester

Answer 3

Using the solutions from Rajat and Oldenborg I managed to get the marker name using the default jVectorMap setup

onMarkerClick: function(event, index) {

        console.log(map.markers[index].config.name);
    }

Sodamide