aljaz/twentyone-world.github.io
1
0
Fork 0
mirror of https://github.com/aljazceru/twentyone-world.github.io.git synced 2025-12-23 13:44:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: color constants, fill map on success

Browse Source
This commit is contained in:
Gigi
2022-04-26 18:22:13 +02:00
parent 23b8b7e446
commit abe42e4b01
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@@ -15,6 +15,7 @@ qtip: '/js/jquery.qtip.min.js'
// Colors // Colors
const cOrange = '#F2A900'; const cOrange = '#F2A900';
const cGray = '#333'; const cGray = '#333';
const cDarkGray = '#222';
const cDarkOrange = '#735000'; const cDarkOrange = '#735000';
const cDarkWhite = '#BBB'; const cDarkWhite = '#BBB';
@@ -42,23 +43,6 @@ qtip: '/js/jquery.qtip.min.js'
} }
}); });
map.addLayer('countries', {
title: function (d) { return d.name },
styles: {
stroke: '#222',
fill: cGray
},
mouseenter: function (d, path) {
path.attr('fill', Math.random() < 0.5 ? cDarkOrange : cDarkWhite );
},
mouseleave: function (d, path) {
path.animate({ fill: pathColors[d.iso] }, 1000);
},
click: function (d, path) {
console.log(d.iso);
}
});
$.ajax({ $.ajax({
url: 'data/countries.json', url: 'data/countries.json',
dataType: 'json', dataType: 'json',
@@ -68,11 +52,33 @@ qtip: '/js/jquery.qtip.min.js'
var hasLink = c.link ? true : false; var hasLink = c.link ? true : false;
return hasLink; return hasLink;
}); });
map.getLayer('countries').style('fill', function (data) {
var orangeCountryCodes = orangeCountries.map(function(c) { var orangeCountryCodes = orangeCountries.map(function(c) {
return c.alpha3; return c.alpha3;
}); });
map.addLayer('countries', {
title: function (d) { return d.name },
styles: {
stroke: cDarkGray,
fill: cGray
},
mouseenter: function (d, path) {
path.attr('fill', Math.random() < 0.5 ? cDarkOrange : cDarkWhite );
},
mouseleave: function (d, path) {
path.animate({ fill: pathColors[d.iso] }, 1000);
},
click: function (d, path) {
let country = countries.find(c => c.alpha3 == d.iso);
if (country.link) {
window.open(country.link);
} else {
window.open('/add');
}
}
});
map.getLayer('countries').style('fill', function (data) {
var isOrangeCountry = orangeCountryCodes.includes(data.iso) var isOrangeCountry = orangeCountryCodes.includes(data.iso)
pathColors[data.iso] = isOrangeCountry ? cOrange : cGray; pathColors[data.iso] = isOrangeCountry ? cOrange : cGray;
return isOrangeCountry ? cOrange : cGray; return isOrangeCountry ? cOrange : cGray;