mirror of
https://github.com/aljazceru/twentyone-world.github.io.git
synced 2025-12-19 15:54:23 +01:00
refactor: getColor function
This commit is contained in:
15
index.html
15
index.html
@@ -15,12 +15,11 @@ qtip: '/js/jquery.qtip.min.js'
|
|||||||
// Colors
|
// Colors
|
||||||
const cOrange = '#F79621';
|
const cOrange = '#F79621';
|
||||||
const cGray = '#333';
|
const cGray = '#333';
|
||||||
|
const cWhite = '#FFF';
|
||||||
const cDarkGray = '#222';
|
const cDarkGray = '#222';
|
||||||
const cDarkOrange = '#735000';
|
const cDarkOrange = '#735000';
|
||||||
const cDarkWhite = '#BBB';
|
const cDarkWhite = '#BBB';
|
||||||
|
|
||||||
var pathColors = [];
|
|
||||||
|
|
||||||
// initialize tooltips
|
// initialize tooltips
|
||||||
$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
|
$.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
|
||||||
$.fn.qtip.defaults.style.def = false;
|
$.fn.qtip.defaults.style.def = false;
|
||||||
@@ -58,6 +57,13 @@ qtip: '/js/jquery.qtip.min.js'
|
|||||||
function isOrange(iso) {
|
function isOrange(iso) {
|
||||||
return orangeCountryCodes.includes(iso);
|
return orangeCountryCodes.includes(iso);
|
||||||
}
|
}
|
||||||
|
function getColor(iso) {
|
||||||
|
let country = countries.find(c => c.alpha3 == iso);
|
||||||
|
if (country && country.link) {
|
||||||
|
return country.external ? cWhite : cOrange;
|
||||||
|
}
|
||||||
|
return cGray;
|
||||||
|
}
|
||||||
|
|
||||||
map.addLayer('countries', {
|
map.addLayer('countries', {
|
||||||
title: function (d) { return d.name },
|
title: function (d) { return d.name },
|
||||||
@@ -73,7 +79,7 @@ qtip: '/js/jquery.qtip.min.js'
|
|||||||
},
|
},
|
||||||
mouseleave: function (d, path) {
|
mouseleave: function (d, path) {
|
||||||
if (!isOrange(d.iso)) {
|
if (!isOrange(d.iso)) {
|
||||||
path.animate({ fill: pathColors[d.iso] }, 1000);
|
path.animate({ fill: getColor(d.iso) }, 1000);
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
},
|
},
|
||||||
@@ -88,8 +94,7 @@ qtip: '/js/jquery.qtip.min.js'
|
|||||||
});
|
});
|
||||||
|
|
||||||
map.getLayer('countries').style('fill', function (data) {
|
map.getLayer('countries').style('fill', function (data) {
|
||||||
pathColors[data.iso] = isOrange(data.iso) ? cOrange : cGray;
|
return getColor(data.iso);
|
||||||
return pathColors[data.iso];
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user