user2208982 user2208982 - 1 month ago 9
jQuery Question

add more information on the info box, Maps with SVG and jQuery

In the tutor "Dynamic Geo Maps with SVG and jQuery", I want to add more information on the info box by using

<br>
, but then the info box disappears. Please see the example below.

http://codepen.io/SitePoint/pen/KDHfh

$(function() {

for(i = 0; i < regions.length; i++) {

$('#'+ regions[i].region_code)
.css({'fill': 'rgba(11, 104, 170,' + regions[i].population/highest_value +')'})
.data('region', regions[i]);
}

$('.map g').mouseover(function (e) {
var region_data=$(this).data('region');
$('<div class="info_panel">'+
region_data.region_name + '<br>' +
'Test: ' + region_data.test + '<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +
'</div>'
)
.appendTo('body');
})
.mouseleave(function () {
$('.info_panel').remove();
})
.mousemove(function(e) {
var mouseX = e.pageX, //X coordinates of mouse
mouseY = e.pageY; //Y coordinates of mouse

$('.info_panel').css({
top: mouseY-50,
left: mouseX - ($('.info_panel').width()/2)
});
});

});

Answer

I did minor modifications in js part

First of all added more data

    $('<div class="info_panel">' +
              region_data.region_name + '<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +'<br>' +
'Population: ' + region_data.population.toLocaleString("en-UK") +
              '</div>'
            )

And then modified this:

$('.info_panel').css({
        top: mouseY - $('.info_panel').height() - 20,
        left: mouseX - ($('.info_panel').width() / 2)
      });

And that seem to have solved the problem.

Check the modified codepen