En ocasión te mostraré cómo crear un mapa interactivo usando los datos del covid-19 con JavaScript y PHP. Podrás visualizar los datos de los casos registrados, casos de personas recuperadas y personas fallecidas por el covid-19 por cada país. Todas las ubicaciones serán almacenadas previamente en una base de datos mysql.
Para este ejemplo haremos uso de la api: covid19api.com, para poder realizar una actualización de datos en nuestra base de datos mysql.
Vamos a crear un marcador en cada país, y mediante una ventana emergente nos traeremos los datos registrados previamente en la base de datos para mostrarlos.
Si eres nuevo en Mapbox GL JS, es posible que primero necesites leer la documentación sobre las aplicaciones web de Mapbox.
A continuación se muestra como quedará nuestra aplicación ya finalizada:
Empezando
Hay algunos recursos que necesitará antes de comenzar:
- Un token de acceso a tu cuenta. Utilizarás un token de acceso para asociar un mapa con tu cuenta. tu token de acceso puedes conseguirlo en tu cuenta de mapbox.
- Mapbox GL JS. La biblioteca JavaScript de Mapbox que usa WebGL para representar mapas interactivos usando los estilos de Mapbox GL.
- Un editor de texto. Después de todo, escribirás código PHP, HTML, CSS y JavaScript.
- Un servidor web local, recomiendo XAMPP, pero puedes usar el que tu consideres necesario.
- Un gestor de base datos MySQL. Durante el tutorial se ha recolectado los latitud y longitud de cada país para poder visualizar un marcador en el mapa.
Agregar estructura
En tu carpeta de proyecto, crea un archivo index.php. Configura el documento agregando Mapbox GL JS y CSS a su cabeza, el código de la estructura html del archivo se muestra a continuación.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Crea un mapa interactivo usando los datos del covid-19 en tiempo real con JavaScript y PHP</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.marker {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'TU_API_KEY_AQUI';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v10',
center: [-88.86767915737873, 13.724149743725818],
zoom: 2
});
function cargarDatos(){
//La API Fetch proporciona una interfaz JavaScript para
//acceder y manipular peticiones y respuestas HTTP.
var urlData="data.php";//URL que devuelve un objeto json
fetch(urlData)
.then(function(response) {
return response.json();
})
.then(function(datos) {
geojson = datos;
// Agregar marcadores al mapa
geojson.features.forEach(function(marker) {
// crear un elemento HTML para cada marcador
var el = document.createElement('div');//Creando un div
el.className = 'marker';//Nombre de la clase del div creado
var TotalConfirmeds = marker.properties.TotalConfirmed;
TotalConfirmed = TotalConfirmeds.replace(/,/g, '');
TotalConfirmed = parseInt(TotalConfirmed);
if (TotalConfirmed > 50000){
txtColor="red";
}else if (TotalConfirmed < 50000 && TotalConfirmed > 5000){
txtColor="orange";
} else if (TotalConfirmed < 5000 && TotalConfirmed > 0){
txtColor="yellow";
} else {
txtColor="green";
}
// Crear un marcador para cada entidad y agregarlo al mapa
new mapboxgl.Marker({color: txtColor})
.setLngLat(marker.geometry.coordinates)
.setPopup(
new mapboxgl.Popup({ offset: 25 }) // Añadiendo los popups
.setHTML(
'<h3>' +
marker.properties.title +
'</h3><p> Casos confirmados: ' +
marker.properties.TotalConfirmed + '<br>'+
'Total recuperados: '+marker.properties.TotalRecovered + '<br>'+
'Total muertes: '+marker.properties.TotalDeaths + '<br>'+
'</p>'
)
)
.addTo(map);
});
});
}
cargarDatos();
</script>
</body>
</html>
El archivo que hicimos en el paso anterior, contiene una serie de funciones avanzadas que se encarga de pintar los datos en el mapa, mostrar en el mapa el listado de países . El listado de países se obtiene haciendo una llamada ajax utilizando la API Fetch de JavaScript.
Creando nuestra base de datos.
Ahora vamos a abrir nuestro gestor de base de datos mysql y vamos a crear una base de datos en blanco, para este ejemplo la llamaremos test_countries, una vez se ha creado la base de datos debemos seleccionarla y ejecutar el código sql siguiente:
CREATE TABLE `countries` ( `country` varchar(10) NOT NULL, `latitude` varchar(20) NOT NULL, `longitude` varchar(20) NOT NULL, `name` varchar(40) NOT NULL, `TotalConfirmed` int(11) NOT NULL, `TotalDeaths` int(11) NOT NULL, `TotalRecovered` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- -- Volcado de datos para la tabla `countries` --
INSERT INTO `countries` (`country`, `latitude`, `longitude`, `name`, `TotalConfirmed`, `TotalDeaths`, `TotalRecovered`) VALUES ('AD', '42.546245', '1.601554', 'Andorra', 761, 49, 604), ('AE', '23.424076', '53.847818', 'United Arab Emirates', 21831, 210, 7328), ('AF', '33.93911', '67.709953', 'Afghanistan', 6053, 153, 745), ('AG', '17.060816', '-61.796428', 'Antigua and Barbuda', 25, 3, 19), ('AI', '18.220554', '-63.068615', 'Anguilla', 0, 0, 0), ('AL', '41.153332', '20.168331', 'Albania', 916, 31, 705), ('AM', '40.069099', '45.038189', 'Armenia', 4044, 52, 1666), ('AN', '12.226079', '-69.060087', 'Netherlands Antilles', 0, 0, 0), ('AO', '-11.202692', '17.873887', 'Angola', 48, 2, 17), ('AQ', '-75.250973', '-0.071389', 'Antarctica', 0, 0, 0), ('AR', '-38.416097', '-63.616672', 'Argentina', 7479, 356, 2497), ('AS', '-14.270972', '-170.132217', 'American Samoa', 0, 0, 0), ('AT', '47.516231', '14.550072', 'Austria', 16109, 628, 14471), ('AU', '-25.274398', '133.775136', 'Australia', 7035, 98, 6359), ('AW', '12.52111', '-69.968338', 'Aruba', 0, 0, 0), ('AZ', '40.143105', '47.576927', 'Azerbaijan', 2980, 36, 1886), ('BA', '43.915886', '17.679076', 'Bosnia and Herzegovina', 2236, 128, 1336), ('BB', '13.193887', '-59.543198', 'Barbados', 85, 7, 65), ('BD', '23.684994', '90.356331', 'Bangladesh', 20065, 298, 3882), ('BE', '50.503887', '4.469936', 'Belgium', 54644, 8959, 14301), ('BF', '12.238333', '-1.561593', 'Burkina Faso', 780, 51, 595), ('BG', '42.733883', '25.48583', 'Bulgaria', 2138, 102, 545), ('BH', '25.930414', '50.637772', 'Bahrain', 6583, 12, 2640), ('BI', '-3.373056', '29.918886', 'Burundi', 15, 1, 7), ('BJ', '9.30769', '2.315834', 'Benin', 339, 2, 83), ('BM', '32.321384', '-64.75737', 'Bermuda', 0, 0, 0), ('BN', '4.535277', '114.727669', 'Brunei', 141, 1, 135), ('BO', '-16.290154', '-63.588653', 'Bolivia', 3577, 164, 434), ('BR', '-14.235004', '-51.92528', 'Brazil', 220291, 14962, 84970), ('BS', '25.03428', '-77.39628', 'Bahamas', 96, 11, 41), ('BT', '27.514162', '90.433601', 'Bhutan', 21, 0, 5), ('BV', '-54.423199', '3.413194', 'Bouvet Island', 0, 0, 0), ('BW', '-22.328474', '24.684866', 'Botswana', 24, 1, 17), ('BY', '53.709807', '27.953389', 'Belarus', 27730, 156, 8807), ('BZ', '17.189877', '-88.49765', 'Belize', 18, 2, 16), ('CA', '56.130366', '-106.346771', 'Canada', 151916, 11356, 36908), ('CC', '-12.164165', '96.870956', 'Cocos [Keeling] Islands', 0, 0, 0), ('CD', '-4.038333', '21.758664', 'Congo [DRC]', 1298, 50, 212), ('CF', '6.611111', '20.939444', 'Central African Republic', 301, 0, 13), ('CG', '-0.228021', '15.827659', 'Congo [Republic]', 391, 15, 87), ('CH', '46.818188', '8.227512', 'Switzerland', 30514, 1878, 27100), ('CI', '7.539989', '-5.54708', 'Côte d\'Ivoire', 2017, 24, 942), ('CK', '-21.236736', '-159.777671', 'Cook Islands', 0, 0, 0), ('CL', '-35.675147', '-71.542969', 'Chile', 39542, 394, 16614), ('CM', '7.369722', '12.354722', 'Cameroon', 3105, 140, 1567), ('CN', '35.86166', '104.195397', 'China', 84038, 4637, 79281), ('CO', '4.570868', '-74.297333', 'Colombia', 14216, 546, 3460), ('CR', '9.748917', '-83.753428', 'Costa Rica', 843, 9, 542), ('CU', '21.521757', '-77.781167', 'Cuba', 1840, 79, 1425), ('CV', '16.002082', '-24.013197', 'Cape Verde', 326, 2, 67), ('CX', '-10.447525', '105.690449', 'Christmas Island', 0, 0, 0), ('CY', '35.126413', '33.429859', 'Cyprus', 910, 17, 481), ('CZ', '49.817492', '15.472962', 'Czech Republic', 8406, 295, 5381), ('DE', '51.165691', '10.451526', 'Germany', 175233, 7897, 151597), ('DJ', '11.825138', '42.590275', 'Djibouti', 1309, 4, 935), ('DK', '56.26392', '9.501785', 'Denmark', 10989, 537, 9157), ('DM', '15.414999', '-61.370976', 'Dominica', 16, 0, 15), ('DO', '18.735693', '-70.162651', 'Dominican Republic', 11739, 424, 3557), ('DZ', '28.033886', '1.659626', 'Algeria', 6629, 536, 3271), ('EC', '-1.831239', '-78.183406', 'Ecuador', 31467, 2594, 3433), ('EE', '58.595272', '25.013607', 'Estonia', 1766, 63, 923), ('EG', '26.820553', '30.802498', 'Egypt', 11228, 592, 2799), ('EH', '24.215527', '-12.885834', 'Western Sahara', 6, 0, 6), ('ER', '15.179384', '39.782334', 'Eritrea', 39, 0, 39), ('ES', '40.463667', '-3.74922', 'Spain', 230183, 27459, 144783), ('ET', '9.145', '40.489673', 'Ethiopia', 287, 5, 112), ('FI', '61.92411', '25.748151', 'Finland', 6228, 293, 5000), ('FJ', '-16.578193', '179.414413', 'Fiji', 18, 0, 15), ('FK', '-51.796253', '-59.523613', 'Falkland Islands [Islas Malvinas]', 0, 0, 0), ('FM', '7.425554', '150.550812', 'Micronesia', 0, 0, 0), ('FO', '61.892635', '-6.911806', 'Faroe Islands', 0, 0, 0), ('FR', '46.227638', '2.213749', 'France', 179630, 27532, 60562), ('GA', '-0.803689', '11.609444', 'Gabon', 1209, 10, 219), ('GB', '55.378051', '-3.435973', 'United Kingdom', 238004, 34078, 1047), ('GD', '12.262776', '-61.604171', 'Grenada', 22, 0, 14), ('GE', '42.315407', '43.356892', 'Georgia', 671, 12, 393), ('GF', '3.933889', '-53.125782', 'French Guiana', 0, 0, 0), ('GG', '49.465691', '-2.585278', 'Guernsey', 0, 0, 0), ('GH', '7.946527', '-1.023194', 'Ghana', 5638, 28, 1460), ('GI', '36.137741', '-5.345374', 'Gibraltar', 0, 0, 0), ('GL', '71.706936', '-42.604303', 'Greenland', 0, 0, 0), ('GM', '13.443182', '-15.310139', 'Gambia', 23, 1, 10), ('GN', '9.945587', '-9.696645', 'Guinea', 2473, 15, 895), ('GP', '16.995971', '-62.067641', 'Guadeloupe', 0, 0, 0), ('GQ', '1.650801', '10.267895', 'Equatorial Guinea', 594, 7, 22), ('GR', '39.074208', '21.824312', 'Greece', 2810, 160, 1374), ('GS', '-54.429579', '-36.587909', 'South Georgia and the South Sandwich Isl', 0, 0, 0), ('GT', '15.783471', '-90.230759', 'Guatemala', 1643, 30, 135), ('GU', '13.444304', '144.793731', 'Guam', 0, 0, 0), ('GW', '11.803749', '-15.180413', 'Guinea-Bissau', 913, 3, 26), ('GY', '4.860416', '-58.93018', 'Guyana', 116, 10, 43), ('GZ', '31.354676', '34.308825', 'Gaza Strip', 0, 0, 0), ('HK', '22.396428', '114.109497', 'Hong Kong', 0, 0, 0), ('HM', '-53.08181', '73.504158', 'Heard Island and McDonald Islands', 0, 0, 0), ('HN', '15.199999', '-86.241905', 'Honduras', 2460, 134, 264), ('HR', '45.1', '15.2', 'Croatia', 2222, 95, 1869), ('HT', '18.971187', '-72.285215', 'Haiti', 310, 20, 29), ('HU', '47.162494', '19.503304', 'Hungary', 3417, 442, 1287), ('ID', '-0.789275', '113.921327', 'Indonesia', 16496, 1076, 3803), ('IE', '53.41291', '-8.24389', 'Ireland', 23956, 1518, 19470), ('IL', '31.046051', '34.851612', 'Israel', 16589, 266, 12587), ('IM', '54.236107', '-4.548056', 'Isle of Man', 0, 0, 0), ('IN', '20.593684', '78.96288', 'India', 85784, 2753, 30258), ('IO', '-6.343194', '71.876519', 'British Indian Ocean Territory', 0, 0, 0), ('IQ', '33.223191', '43.679291', 'Iraq', 3193, 117, 2089), ('IR', '32.427908', '53.688046', 'Iran', 116635, 6902, 91836), ('IS', '64.963051', '-19.020835', 'Iceland', 1802, 10, 1782), ('IT', '41.87194', '12.56738', 'Italy', 223885, 31610, 120205), ('JE', '49.214439', '-2.13125', 'Jersey', 0, 0, 0), ('JM', '18.109581', '-77.297508', 'Jamaica', 511, 9, 121), ('JO', '30.585164', '36.238414', 'Jordan', 596, 9, 401), ('JP', '36.204824', '138.252924', 'Japan', 16203, 713, 10338), ('KE', '-0.023559', '37.906193', 'Kenya', 781, 45, 284), ('KG', '41.20438', '74.766098', 'Kyrgyzstan', 1111, 14, 745), ('KH', '12.565679', '104.990963', 'Cambodia', 122, 0, 122), ('KI', '-3.370417', '-168.734039', 'Kiribati', 0, 0, 0), ('KM', '-11.875001', '43.872219', 'Comoros', 11, 1, 3), ('KN', '17.357822', '-62.782998', 'Saint Kitts and Nevis', 15, 0, 14), ('KP', '40.339852', '127.510093', 'North Korea', 0, 0, 0), ('KR', '35.907757', '127.766922', 'South Korea', 11037, 262, 9851), ('KW', '29.31166', '47.481766', 'Kuwait', 12860, 96, 3640), ('KY', '19.513469', '-80.566956', 'Cayman Islands', 0, 0, 0), ('KZ', '48.019573', '66.923684', 'Kazakhstan', 5689, 34, 2707), ('LA', '19.85627', '102.495496', 'Laos', 19, 0, 14), ('LB', '33.854721', '35.862285', 'Lebanon', 891, 26, 246), ('LC', '13.909444', '-60.978893', 'Saint Lucia', 18, 0, 18), ('LI', '47.166', '9.555373', 'Liechtenstein', 82, 1, 55), ('LK', '7.873054', '80.771797', 'Sri Lanka', 935, 9, 477), ('LR', '6.428055', '-9.429499', 'Liberia', 219, 20, 108), ('LS', '-29.609988', '28.233608', 'Lesotho', 1, 0, 0), ('LT', '55.169438', '23.881275', 'Lithuania', 1523, 54, 965), ('LU', '49.815273', '6.129583', 'Luxembourg', 3923, 104, 3682), ('LV', '56.879635', '24.603189', 'Latvia', 970, 19, 662), ('LY', '26.3351', '17.228331', 'Libya', 64, 3, 28), ('MA', '31.791702', '-7.09262', 'Morocco', 6652, 190, 3400), ('MC', '43.750298', '7.412841', 'Monaco', 96, 4, 87), ('MD', '47.411631', '28.369885', 'Moldova', 5745, 202, 2228), ('ME', '42.708678', '19.37439', 'Montenegro', 324, 9, 311), ('MG', '-18.766947', '46.869107', 'Madagascar', 238, 0, 112), ('MH', '7.131474', '171.184478', 'Marshall Islands', 0, 0, 0), ('MK', '41.608635', '21.745275', 'Macedonia [FYROM]', 1740, 97, 1251), ('ML', '17.570692', '-3.996166', 'Mali', 806, 46, 455), ('MM', '21.913965', '95.956223', 'Myanmar [Burma]', 182, 6, 89), ('MN', '46.862496', '103.846656', 'Mongolia', 98, 0, 20), ('MO', '22.198745', '113.543873', 'Macau', 0, 0, 0), ('MP', '17.33083', '145.38469', 'Northern Mariana Islands', 0, 0, 0), ('MQ', '14.641528', '-61.024174', 'Martinique', 0, 0, 0), ('MR', '21.00789', '-10.940835', 'Mauritania', 29, 3, 7), ('MS', '16.742498', '-62.187366', 'Montserrat', 0, 0, 0), ('MT', '35.937496', '14.375416', 'Malta', 532, 6, 458), ('MU', '-20.348404', '57.552152', 'Mauritius', 332, 10, 322), ('MV', '3.202778', '73.22068', 'Maldives', 1031, 4, 49), ('MW', '-13.254308', '34.301525', 'Malawi', 63, 3, 24), ('MX', '23.634501', '-102.552784', 'Mexico', 45032, 4767, 30451), ('MY', '4.210484', '101.975766', 'Malaysia', 6855, 112, 5439), ('MZ', '-18.665695', '35.529562', 'Mozambique', 119, 0, 42), ('NA', '-22.95764', '18.49041', 'Namibia', 16, 0, 13), ('NC', '-20.904305', '165.618042', 'New Caledonia', 0, 0, 0), ('NE', '17.607789', '8.081666', 'Niger', 885, 51, 684), ('NF', '-29.040835', '167.954712', 'Norfolk Island', 0, 0, 0), ('NG', '9.081999', '8.675277', 'Nigeria', 5450, 171, 1320), ('NI', '12.865416', '-85.207229', 'Nicaragua', 25, 8, 7), ('NL', '52.132633', '5.291266', 'Netherlands', 43880, 5662, 159), ('NO', '60.472024', '8.468946', 'Norway', 8219, 232, 32), ('NP', '28.394857', '84.124008', 'Nepal', 267, 0, 36), ('NR', '-0.522778', '166.931503', 'Nauru', 0, 0, 0), ('NU', '-19.054445', '-169.867233', 'Niue', 0, 0, 0), ('NZ', '-40.900557', '174.885971', 'New Zealand', 1498, 21, 1428), ('OM', '21.512583', '55.923255', 'Oman', 4625, 20, 1350), ('PA', '8.537981', '-80.782127', 'Panama', 9268, 266, 6080), ('PE', '-9.189967', '-75.015152', 'Peru', 84495, 2392, 27147), ('PF', '-17.679742', '-149.406843', 'French Polynesia', 0, 0, 0), ('PG', '-6.314993', '143.95555', 'Papua New Guinea', 8, 0, 8), ('PH', '12.879721', '121.774017', 'Philippines', 12091, 806, 2460), ('PK', '30.375321', '69.345116', 'Pakistan', 38799, 834, 10880), ('PL', '51.919438', '19.145136', 'Poland', 18016, 907, 6918), ('PM', '46.941936', '-56.27111', 'Saint Pierre and Miquelon', 0, 0, 0), ('PN', '-24.703615', '-127.439308', 'Pitcairn Islands', 0, 0, 0), ('PR', '18.220833', '-66.590149', 'Puerto Rico', 0, 0, 0), ('PS', '31.952162', '35.233154', 'Palestinian Territories', 375, 2, 315), ('PT', '39.399872', '-8.224454', 'Portugal', 28583, 1190, 3328), ('PW', '7.51498', '134.58252', 'Palau', 0, 0, 0), ('PY', '-23.442503', '-58.443832', 'Paraguay', 759, 11, 193), ('QA', '25.354826', '51.183884', 'Qatar', 29425, 14, 3546), ('RE', '-21.115141', '55.536384', 'Réunion', 0, 0, 0), ('RO', '45.943161', '24.96676', 'Romania', 16437, 1070, 9370), ('RS', '44.016521', '21.005859', 'Serbia', 10438, 225, 4301), ('RU', '61.52401', '105.318756', 'Russia', 262843, 2418, 58226), ('RW', '-1.940278', '29.873888', 'Rwanda', 287, 0, 177), ('SA', '23.885942', '45.079162', 'Saudi Arabia', 49176, 292, 21869), ('SB', '-9.64571', '160.156194', 'Solomon Islands', 0, 0, 0), ('SC', '-4.679574', '55.491977', 'Seychelles', 11, 0, 10), ('SD', '12.862807', '30.217636', 'Sudan', 1964, 91, 205), ('SE', '60.128161', '18.643501', 'Sweden', 29207, 3646, 4971), ('SG', '1.352083', '103.819836', 'Singapore', 26891, 21, 7248), ('SH', '-24.143474', '-10.030696', 'Saint Helena', 0, 0, 0), ('SI', '46.151241', '14.995463', 'Slovenia', 1465, 103, 270), ('SJ', '77.553604', '23.670272', 'Svalbard and Jan Mayen', 0, 0, 0), ('SK', '48.669026', '19.699024', 'Slovakia', 1480, 27, 1131), ('SL', '8.460555', '-11.779889', 'Sierra Leone', 447, 27, 97), ('SM', '43.94236', '12.457777', 'San Marino', 652, 41, 189), ('SN', '14.497401', '-14.452362', 'Senegal', 2310, 25, 890), ('SO', '5.152149', '46.199616', 'Somalia', 1284, 53, 135), ('SR', '3.919305', '-56.027783', 'Suriname', 10, 1, 9), ('ST', '0.18636', '6.613081', 'São Tomé and Príncipe', 235, 7, 4), ('SV', '13.794185', '-88.89653', 'El Salvador', 1210, 25, 417), ('SY', '34.802075', '38.996815', 'Syria', 50, 3, 36), ('SZ', '-26.522503', '31.465866', 'Swaziland', 190, 2, 66), ('TC', '21.694025', '-71.797928', 'Turks and Caicos Islands', 0, 0, 0), ('TD', '15.454166', '18.732207', 'Chad', 428, 48, 88), ('TF', '-49.280366', '69.348557', 'French Southern Territories', 0, 0, 0), ('TG', '8.619543', '0.824782', 'Togo', 263, 11, 96), ('TH', '15.870032', '100.992541', 'Thailand', 3025, 56, 2854), ('TJ', '38.861034', '71.276093', 'Tajikistan', 1118, 33, 0), ('TK', '-8.967363', '-171.855881', 'Tokelau', 0, 0, 0), ('TL', '-8.874217', '125.727539', 'Timor-Leste', 24, 0, 24), ('TM', '38.969719', '59.556278', 'Turkmenistan', 0, 0, 0), ('TN', '33.886917', '9.537499', 'Tunisia', 1035, 45, 802), ('TO', '-21.178986', '-175.198242', 'Tonga', 0, 0, 0), ('TR', '38.963745', '35.243322', 'Turkey', 146457, 4055, 106133), ('TT', '10.691803', '-61.222503', 'Trinidad and Tobago', 116, 8, 107), ('TV', '-7.109535', '177.64933', 'Tuvalu', 0, 0, 0), ('TW', '23.69781', '120.960515', 'Taiwan', 440, 7, 387), ('TZ', '-6.369028', '34.888822', 'Tanzania', 509, 21, 183), ('UA', '48.379433', '31.16558', 'Ukraine', 17330, 476, 4473), ('UG', '1.373333', '32.290275', 'Uganda', 203, 0, 63), ('UM', '', '', 'U.S. Minor Outlying Islands', 0, 0, 0), ('US', '37.09024', '-95.712891', 'United States', 1442824, 87530, 250747), ('UY', '-32.522779', '-55.765835', 'Uruguay', 732, 19, 553), ('UZ', '41.377491', '64.585262', 'Uzbekistan', 2686, 11, 2158), ('VA', '41.902916', '12.453389', 'Vatican City', 12, 0, 2), ('VC', '12.984305', '-61.287228', 'Saint Vincent and the Grenadines', 17, 0, 14), ('VE', '6.42375', '-66.58973', 'Venezuela', 459, 10, 229), ('VG', '18.420695', '-64.639968', 'British Virgin Islands', 0, 0, 0), ('VI', '18.335765', '-64.896335', 'U.S. Virgin Islands', 0, 0, 0), ('VN', '14.058324', '108.277199', 'Vietnam', 314, 0, 260), ('VU', '-15.376706', '166.959158', 'Vanuatu', 0, 0, 0), ('WF', '-13.768752', '-177.156097', 'Wallis and Futuna', 0, 0, 0), ('WS', '-13.759029', '-172.104629', 'Samoa', 0, 0, 0), ('XK', '42.602636', '20.902977', 'Kosovo', 944, 29, 690), ('YE', '15.552727', '48.516388', 'Yemen', 106, 15, 1), ('YT', '-12.8275', '45.166244', 'Mayotte', 0, 0, 0), ('ZA', '-30.559482', '22.937506', 'South Africa', 13524, 247, 6083), ('ZM', '-13.133897', '27.849332', 'Zambia', 654, 7, 124), ('ZW', '-19.015438', '29.154857', 'Zimbabwe', 42, 4, 13);
-- -- Índices para tablas volcadas --
-- -- Indices de la tabla `countries` -- ALTER TABLE `countries` ADD PRIMARY KEY (`country`); COMMIT;
La consulta SQL se encarga de crear una tabla llamada countries y también le inserta los datos de prueba.
Creando nuestro archivo de conexión a la base de datos
Ahora vamos a crear un archivo llamado config.php, siempre en el directorio root del proyecto.
<?php
class Database{
//Credenciales de conexion a la base de datos
private $db_host="localhost";//Host de la base de datos
private $db_user="root";//Usuario de la base de datos
private $db_pass="";//Contraseña del usuario de la base de datos
private $db_name="test_countries";//Nombre de la base de datos
public function connect(){
$db = new mysqli($this->db_host, $this->db_user, $this->db_pass, $this->db_name);
$db->query("SET NAMES 'utf8'");
return $db;
}
}
$database = new Database;
$con= $database->connect();
El archivo anterior contiene una clase que se encarga de la conexión con la base de datos. Es muy importante que coloques los datos que corresponda a tu conexión de base de datos.
Agregar marcadores mediante PHP y MySQL
Crear un archivo en la carpeta root del proyecto y lo llamaremos data.php.
<?php
# conectare la base de datos
include("config.php");
$sql="select * from countries";
$query=$con->query($sql);
$features = [];
$i=0;
while($row=$query->fetch_array(MYSQLI_ASSOC)){
$lat=$row['latitude'];
$long=$row['longitude'];
$TotalConfirmed=number_format($row['TotalConfirmed'],0);
$TotalRecovered=number_format($row['TotalRecovered'],0);
$TotalDeaths=number_format($row['TotalDeaths'],0);
if ($row['TotalConfirmed'] >0 ){
@$muertes_porcentaje= number_format (($row['TotalDeaths'] / $row['TotalConfirmed']) * 100,1) ;
@$recuperados= number_format (($row['TotalRecovered'] / $row['TotalConfirmed']) * 100,1) ;
} else {
$muertes_porcentaje=0;
$recuperados=0;
}
$propiedades1=array ('title'=> $row['name'],'TotalRecovered'=> $TotalRecovered." ($recuperados%)",'TotalConfirmed'=>$TotalConfirmed,"TotalDeaths"=>$TotalDeaths. " ($muertes_porcentaje%)");
$arreglo_datos=array ('type' => 'Feature','properties' => $propiedades1,'geometry' => array ('type' => 'Point','coordinates' => array (0 => $long,1 => $lat)));
if ($row['TotalConfirmed'] >0 ){
$features += ["$i" =>$arreglo_datos ];
$i++;
}
}
$array_multi=$features;
$data=array ('type' => 'FeatureCollection','features' => $features);
echo json_encode($data);
Este archivo se encarga de devolver un objeto json al archivo index.php, que es de donde se llama mediante la API Fetch de JavaScript, para luego poder manipular los datos siempre usando JavaScript.
Actualizando los datos en la base de datos.
Finalmente vamos a crear un archivo llamado updateData.php, el cual se encargará de hacer una llamada a la api para poder traer los datos de casos registrados del covid-19. Copia y pega el código siguiente.
<?php
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => "https://api.covid19api.com/summary",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "GET",
CURLOPT_POSTFIELDS => "",
CURLOPT_HTTPHEADER => array(
"Postman-Token: 05e247da-23b8-4979-bb64-eb5e6a754865",
"cache-control: no-cache"
),
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);
if ($err) {
echo "cURL Error #:" . $err;
} else {
$decode=json_decode($response);
include("config.php");
foreach ($decode->Countries as $key => $val){
$CountryCode=$val->CountryCode;
$TotalConfirmed=$val->TotalConfirmed;
$TotalRecovered=$val->TotalRecovered;
$TotalDeaths=$val->TotalDeaths;
//Actualiza la información
$upt=$con->query("update countries set TotalConfirmed='$TotalConfirmed', TotalDeaths='$TotalDeaths', TotalRecovered='$TotalRecovered' where country='$CountryCode'");
}
}
Este archivo recién creado se debe ejecutar para poder actualizar los datos de la base de datos mysql, hace una llamada a la API y actualiza la data, lo he hecho de esta forma para no mandar a llamar a la api cada vez que se ejecuta el script.
Hemos creado un mapa interactivo usando los datos del covid-19 con JavaScript y PHP, para luego permitir el mostrar los datos utilizando marcadores interactivos con datos personalizados usando la librería Mapbox GL JS. No olvides que puedes descargar los archivos fuentes y hacer tus pruebas.
Comentarios