jQuery mapael dynamic plots

Question

I searched the site but did not find'm looking for. I am taking the data via google analytics. I'm trying to create a dynamic plots. Where am I doing wrong? Thank you very much for the helpers.

The coordinates of the json data are correct.

The code I created for this map:

function initMap(arr) {
  var $map = $('#map'),
    state;
  $map.mapael({
    map: {
      name: "turkey",
      defaultArea: {
        attrs: {
          fill: '#242424',
          stroke: Sing.colors['body-bg'],
        },
        attrsHover: {
          fill: '#e9ebf6',
          animDuration: 100
        },
        tooltip: {
          content: function() {
            return '<strong>' + state + '</strong>';
          }
        },
        eventHandlers: {
          mouseover: function(e, id) {
            state = id;
          }
        }
      },
      defaultPlot: {
        size: 17,
        attrs: {
          fill: Sing.colors['brand-warning'],
          stroke: Sing.colors['white'],
          "stroke-width": 0,
          "stroke-linejoin": "round"
        },
        attrsHover: {
          "stroke-width": 1,
          animDuration: 100
        }
      },
      zoom: {
        enabled: true,
        step: 0.75
      }
    },
    plots: {
      arr
    }
  });

  console.log(arr);

  //ie svg height fix
  function _fixMapHeight() {
    $map.find('svg').css('height', function() {
      return $(this).attr('height') + 'px';
    });
  }

  _fixMapHeight();
  SingApp.onResize(function() {
    setTimeout(function() {
      _fixMapHeight();
    }, 100)
  });
}

This is the json data I sent :

"e0" : {latitude:39.9334, longitude: 32.8597, tooltip: { content : "Ankara"} },"e1" : {latitude:41.0082, longitude: 28.9784, tooltip: { content : "Istanbul"} },"e2" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e3" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e4" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e5" : {latitude:38.4237, longitude: 27.1428, tooltip: { content : "Izmir"} },"e6" : {latitude:54.3081, longitude: 9.6607, tooltip: { content : "Rendsburg"} }

I do not have any problems when I use this example.

'paris' : {
    latitude : 48.86, 
    longitude: 2.3444
},
'lyon' : {
    type: "circle",
    size:50,
    latitude :45.758888888889, 
    longitude: 4.8413888888889, 
    value : 700000, 
    href : "http://fr.wikipedia.org/wiki/Lyon",
    tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Lyon"},
    text : {content : "Lyon"}
},
'rennes' : {
    type :"square",
    size :20,
    latitude : 48.114166666667, 
    longitude: -1.6808333333333, 
    tooltip: {content : "<span style=\"font-weight:bold;\">City :</span> Rennes"},
    text : {content : "Rennes"},
    href : "http://fr.wikipedia.org/wiki/Rennes"
}

Answer 1

I solved my problem in this way.

var updatedOptions = {'areas' : {}, 'plots' : {}};
        
eval('var newPlots={' + data.slice(0, -1) + '}');
        
$(".mapael").trigger('update', [updatedOptions, newPlots]);