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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
<!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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?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.