Fix map resizing bug
This commit is contained in:
parent
a3391f5ab6
commit
792173c904
@ -116,44 +116,47 @@ function getVisitorMapData(source) {
|
|||||||
return visitorMapDataset;
|
return visitorMapDataset;
|
||||||
}
|
}
|
||||||
|
|
||||||
var visitorMap;
|
var visitorMaps = [];
|
||||||
|
|
||||||
function showVisitorMap(data, scope, containerid) {
|
function showVisitorMap(data, scope, containerid) {
|
||||||
$("visitorMap").html("");
|
visitorMaps.push(
|
||||||
visitorMap = new Datamap({
|
new Datamap({
|
||||||
element: document.getElementById(containerid),
|
element: document.getElementById(containerid),
|
||||||
scope: scope,
|
scope: scope,
|
||||||
responsive: true,
|
responsive: true,
|
||||||
fills: {defaultFill: '#F5F5F5'},
|
fills: {defaultFill: '#F5F5F5'},
|
||||||
data: data,
|
data: data,
|
||||||
geographyConfig: {
|
geographyConfig: {
|
||||||
borderColor: '#DEDEDE',
|
borderColor: '#DEDEDE',
|
||||||
highlightBorderWidth: 2,
|
highlightBorderWidth: 2,
|
||||||
// don't change color on mouse hover
|
// don't change color on mouse hover
|
||||||
highlightFillColor: function (geo) {
|
highlightFillColor: function (geo) {
|
||||||
return geo['fillColor'] || '#E8F5E9';
|
return geo['fillColor'] || '#E8F5E9';
|
||||||
},
|
},
|
||||||
// only change border
|
// only change border
|
||||||
highlightBorderColor: '#00C853',
|
highlightBorderColor: '#00C853',
|
||||||
// show desired information in tooltip
|
// show desired information in tooltip
|
||||||
popupTemplate: function (geo, data) {
|
popupTemplate: function (geo, data) {
|
||||||
// don't show tooltip if country don't present in dataset
|
// don't show tooltip if country don't present in dataset
|
||||||
if (!data) {
|
if (!data) {
|
||||||
//return;
|
//return;
|
||||||
|
}
|
||||||
|
// tooltip content
|
||||||
|
return ['<div class="hoverinfo">',
|
||||||
|
'<strong>', geo.properties.name, '</strong>',
|
||||||
|
'<br>Visits: <strong>', data.numberOfThings, '</strong>',
|
||||||
|
'</div>'].join('');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// tooltip content
|
})
|
||||||
return ['<div class="hoverinfo">',
|
);
|
||||||
'<strong>', geo.properties.name, '</strong>',
|
|
||||||
'<br>Visits: <strong>', data.numberOfThings, '</strong>',
|
|
||||||
'</div>'].join('');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
showVisitorMap(getVisitorMapData(visitorMap_Countries), 'world', 'visitorMapWorld');
|
showVisitorMap(getVisitorMapData(visitorMap_Countries), 'world', 'visitorMapWorld');
|
||||||
showVisitorMap(getVisitorMapData(visitorMap_States), 'usa', 'visitorMapUSA');
|
showVisitorMap(getVisitorMapData(visitorMap_States), 'usa', 'visitorMapUSA');
|
||||||
|
|
||||||
$(window).on('resize', function () {
|
$(window).on('resize', function () {
|
||||||
visitorMap.resize();
|
visitorMaps.forEach(function (map) {
|
||||||
|
map.resize();
|
||||||
|
});
|
||||||
});
|
});
|
Loading…
x
Reference in New Issue
Block a user