Hoy vengo a compartir otra joya del software. Se trata del svgMap, una librería de JavaScript con la que se pueden hacer mapas vectoriales fácilmente con los datos que quieras.
Se pueden colorear, son responsive con lo que se adaptan al dispositivo, muestran los datos en un popover al pasar el ratón por encima. La documentación está de lujo. Y además es un proyecto con licencia MIT, con lo que se puede utilizar en cualquier tipo de proyecto.
Este post es un howto o codekata para generar un array de datos JavaScript en forma de objeto, y así empezar a usarlo cargándole muchos datos.
Al grano, creando una página de pruebas
Lo primero que todo será crear una estructura de web con HTML. Hay que añadir las tres siguientes librerías:
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v1.6.0/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v1.6.0/dist/svgMap.min.css" rel="stylesheet">..dos del mapa y jQuery. Todo junto con algo de estilo quedaría tal que así:
<html>
<head>
<title>Testing svgMap!</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v1.6.0/dist/svgMap.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/svgMap@v1.6.0/dist/svgMap.min.css" rel="stylesheet">
<style>
#svgMap {
width: 50%;
padding: 5px;
border: 1px solid #808080;
margin: auto;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
</body>
</html>El cuerpo de la página, el mapa
Lo siguiente es crear el DIV donde va a estar el mapa:
<div id="svgMap"></div>Necesitará entonces empezar a generar el contenido y cargarlo en este lugar. Entonces un listado de países para probar podría ser como el siguiente, ahora ya en JavaScript:
let countries = [
['AL', 'Albania'],
['DE', 'Alemania'],
['AD', 'Andorra'],
['AO', 'Angola'],
['AI', 'Anguila'],
['AQ', 'Antártida'],
['AG', 'Antigua y Barbuda'],
['SA', 'Arabia Saudí'],
['DZ', 'Argelia'],
['AR', 'Argentina'],
['AM', 'Armenia'],
['AW', 'Aruba'],
['AU', 'Australia'],
['AT', 'Austria'],
['AZ', 'Azerbaiyán'],
['BS', 'Bahamas'],
['BD', 'Bangladés'],
['BB', 'Barbados'],
['BH', 'Baréin'],
['BE', 'Bélgica'],
['BZ', 'Belice'],
['BJ', 'Benín'],
['BM', 'Bermudas'],
['BY', 'Bielorrusia'],
['BO', 'Bolivia'],
['BA', 'Bosnia y Herzegovina'],
['BW', 'Botsuana'],
['BR', 'Brasil'],
['BN', 'Brunéi'],
['BG', 'Bulgaria'],
['BF', 'Burkina Faso'],
['BI', 'Burundi'],
['BT', 'Bután'],
['CV', 'Cabo Verde'],
['KH', 'Camboya'],
['CM', 'Camerún'],
['CA', 'Canadá'],
['BQ', 'Caribe neerlandés'],
['QA', 'Catar'],
['TD', 'Chad'],
['CZ', 'Chequia'],
['CL', 'Chile'],
['CN', 'China'],
['CY', 'Chipre'],
['VA', 'Ciudad del Vaticano'],
['CO', 'Colombia'],
['KM', 'Comoras'],
['CG', 'Congo'],
['KP', 'Corea del Norte'],
['KR', 'Corea del Sur'],
['CR', 'Costa Rica'],
['CI', 'Côte d’Ivoire'],
['HR', 'Croacia'],
['CU', 'Cuba'],
['CW', 'Curazao'],
['DK', 'Dinamarca'],
['DM', 'Dominica'],
['EC', 'Ecuador'],
['EG', 'Egipto'],
['SV', 'El Salvador'],
['AE', 'Emiratos Árabes Unidos'],
['ER', 'Eritrea'],
['SK', 'Eslovaquia'],
['SI', 'Eslovenia'],
['ES', 'España'],
['US', 'Estados Unidos'],
['EE', 'Estonia'],
['SZ', 'Esuatini'],
['ET', 'Etiopía'],
['PH', 'Filipinas'],
['FI', 'Finlandia'],
['FJ', 'Fiyi'],
['FR', 'Francia'],
['GA', 'Gabón'],
['GM', 'Gambia'],
['GE', 'Georgia'],
['GH', 'Ghana'],
['GI', 'Gibraltar'],
['GD', 'Granada'],
['GR', 'Grecia'],
['GL', 'Groenlandia'],
['GP', 'Guadalupe'],
['GU', 'Guam'],
['GT', 'Guatemala'],
['GF', 'Guayana Francesa'],
['GG', 'Guernsey'],
['GN', 'Guinea'],
['GQ', 'Guinea Ecuatorial'],
['GW', 'Guinea-Bisáu'],
['GY', 'Guyana'],
['HT', 'Haití'],
['HN', 'Honduras'],
['HU', 'Hungría'],
['IN', 'India'],
['ID', 'Indonesia'],
['IQ', 'Irak'],
['IR', 'Irán'],
['IE', 'Irlanda'],
['BV', 'Isla Bouvet'],
['IM', 'Isla de Man'],
['CX', 'Isla de Navidad'],
['NF', 'Isla Norfolk'],
['IS', 'Islandia'],
['AX', 'Islas Åland'],
['KY', 'Islas Caimán'],
['CC', 'Islas Cocos'],
['CK', 'Islas Cook'],
['FO', 'Islas Feroe'],
['GS', 'Islas Georgia del Sur y Sandwich del Sur'],
['HM', 'Islas Heard y McDonald'],
['FK', 'Islas Malvinas'],
['MP', 'Islas Marianas del Norte'],
['MH', 'Islas Marshall'],
['UM', 'Islas menores alejadas de EE. UU.'],
['PN', 'Islas Pitcairn'],
['SB', 'Islas Salomón'],
['TC', 'Islas Turcas y Caicos'],
['VG', 'Islas Vírgenes Británicas'],
['VI', 'Islas Vírgenes de EE. UU.'],
['IL', 'Israel'],
['IT', 'Italia'],
['JM', 'Jamaica'],
['JP', 'Japón'],
['JE', 'Jersey'],
['JO', 'Jordania'],
['KZ', 'Kazajistán'],
['KE', 'Kenia'],
['KG', 'Kirguistán'],
['KI', 'Kiribati'],
['KW', 'Kuwait'],
['LA', 'Laos'],
['LS', 'Lesoto'],
['LV', 'Letonia'],
['LB', 'Líbano'],
['LR', 'Liberia'],
['LY', 'Libia'],
['LI', 'Liechtenstein'],
['LT', 'Lituania'],
['LU', 'Luxemburgo'],
['MK', 'Macedonia del Norte'],
['MG', 'Madagascar'],
['MY', 'Malasia'],
['MW', 'Malaui'],
['MV', 'Maldivas'],
['ML', 'Mali'],
['MT', 'Malta'],
['MA', 'Marruecos'],
['MQ', 'Martinica'],
['MU', 'Mauricio'],
['MR', 'Mauritania'],
['YT', 'Mayotte'],
['MX', 'México'],
['FM', 'Micronesia'],
['MD', 'Moldavia'],
['MC', 'Mónaco'],
['MN', 'Mongolia'],
['ME', 'Montenegro'],
['MS', 'Montserrat'],
['MZ', 'Mozambique'],
['MM', 'Myanmar (Birmania)'],
['NA', 'Namibia'],
['NR', 'Nauru'],
['NP', 'Nepal'],
['NI', 'Nicaragua'],
['NE', 'Níger'],
['NG', 'Nigeria'],
['NU', 'Niue'],
['NO', 'Noruega'],
['NC', 'Nueva Caledonia'],
['NZ', 'Nueva Zelanda'],
['OM', 'Omán'],
['NL', 'Países Bajos'],
['PK', 'Pakistán'],
['PW', 'Palaos'],
['PA', 'Panamá'],
['PG', 'Papúa Nueva Guinea'],
['PY', 'Paraguay'],
['PE', 'Perú'],
['PF', 'Polinesia Francesa'],
['PL', 'Polonia'],
['PT', 'Portugal'],
['PR', 'Puerto Rico'],
['HK', 'RAE de Hong Kong (China)'],
['MO', 'RAE de Macao (China)'],
['GB', 'Reino Unido'],
['CF', 'República Centroafricana'],
['CD', 'República Democrática del Congo'],
['DO', 'República Dominicana'],
['RE', 'Reunión'],
['RW', 'Ruanda'],
['RO', 'Rumanía'],
['RU', 'Rusia'],
['EH', 'Sáhara Occidental'],
['WS', 'Samoa'],
['AS', 'Samoa Americana'],
['BL', 'San Bartolomé'],
['KN', 'San Cristóbal y Nieves'],
['SM', 'San Marino'],
['MF', 'San Martín'],
['PM', 'San Pedro y Miquelón'],
['VC', 'San Vicente y las Granadinas'],
['SH', 'Santa Elena'],
['LC', 'Santa Lucía'],
['ST', 'Santo Tomé y Príncipe'],
['SN', 'Senegal'],
['RS', 'Serbia'],
['SC', 'Seychelles'],
['SL', 'Sierra Leona'],
['SG', 'Singapur'],
['SX', 'Sint Maarten'],
['SY', 'Siria'],
['SO', 'Somalia'],
['LK', 'Sri Lanka'],
['ZA', 'Sudáfrica'],
['SD', 'Sudán'],
['SS', 'Sudán del Sur'],
['SE', 'Suecia'],
['CH', 'Suiza'],
['SR', 'Surinam'],
['SJ', 'Svalbard y Jan Mayen'],
['TH', 'Tailandia'],
['TW', 'Taiwán'],
['TZ', 'Tanzania'],
['TJ', 'Tayikistán'],
['IO', 'Territorio Británico del Océano Índico'],
['TF', 'Territorios Australes Franceses'],
['PS', 'Territorios Palestinos'],
['TL', 'Timor-Leste'],
['TG', 'Togo'],
['TK', 'Tokelau'],
['TO', 'Tonga'],
['TT', 'Trinidad y Tobago'],
['TN', 'Túnez'],
['TM', 'Turkmenistán'],
['TR', 'Turquía'],
['TV', 'Tuvalu'],
['UA', 'Ucrania'],
['UG', 'Uganda'],
['UY', 'Uruguay'],
['UZ', 'Uzbekistán'],
['VU', 'Vanuatu'],
['VE', 'Venezuela'],
['VN', 'Vietnam'],
['WF', 'Wallis y Futuna'],
['YE', 'Yemen'],
['DJ', 'Yibuti'],
['ZM', 'Zambia'],
['ZW', 'Zimbabue']
];El siguiente bucle simplemente es un recorrido aleatorio del vector anterior para llenar otro vector con los valores que admitirá el mapa:
// Preparing random data..
let randomData = {};
let currentCountryCode = '';
for (let i = 0; i < 200; i++) {
randomNumber = Math.floor(Math.random() * countries.length);
console.log(randomNumber);
currentCountryCode = countries[randomNumber][0];
console.log(currentCountryCode);
randomData[currentCountryCode] = {
sampleData: Math.round(Math.random() * 50000 + 1)
};
}
console.log(randomData);He puesto unos console.log para ir viendo el progreso en la consola de JavaScript. Finalmente sólo quedará crear el objeto del mapa en el div anterior. Según reza la documentación sería con algo como lo siguiente:
new svgMap({
targetElementID: 'svgMap',
data: {
data: {
sampleData: {
name: 'Sample data for testing',
thousandSeparator: ',',
thresholdMax: 50000,
thresholdMin: 1
}
},
applyData: 'sampleData',
values: randomData
}
});Si todo ha ido bien, con este codekata completo y cargado en el navegador se tiene que ver algo como lo siguiente:
Terminando
Para terminar sólo me queda dejarte el enlace a la página web del proyecto:
https://github.com/StephanWagner/svgMap
