Crear un JVectorMap con PHP y MySQL
Ahora vamos a crear un JVectorMap usando PHP y MySQL, los datos de los países estarán en una base de datos y usaremos PHP para hacer la conexión y lectura de datos.
En el articulo anterior sobre jvectormap les explique a descargar el plugin, también vimos como crear un mapa, este articulo es la continuación, si quieren saber mas, les invito a leer la Introduccion a JVectorMap.
Vídeo explicación
En el siguiente vídeo les explico paso a paso como crear la base de datos y el código para hacer funcionar el ejemplo.
También explico otras cosas por ejemplo a modificar la consulta sql.
Les invito a suscribirse a mi canal https://www.youtube.com/user/evilnapsis
Base de datos
La base de datos es sencilla, consta de solamente una tabla donde colocaremos los datos de prefijo de país y valores.
create database jvm2;
use jvm2;
create table data(
id int not null auto_increment primary key,
country varchar(255),
val double
);
insert into data (country,val) value ("MX", 100);
insert into data (country,val) value ("PE", 200);
insert into data (country,val) value ("CO", 300);
insert into data (country,val) value ("AR", 400);
insert into data (country,val) value ("BR", 500);
insert into data (country,val) value ("JP", 600);
insert into data (country,val) value ("ES", 700);
insert into data (country,val) value ("BR", 700);
insert into data (country,val) value ("BR", 500);
insert into data (country,val) value ("MX", 100);
Los prefijos de países los encontraran en la pagina de jvectormap en la sección de mapas.
Código
Ahora el código fuente partiendo del ejemplo del articulo anterior.
<?php
$con = new mysqli("localhost","root","","jvm2");
//print_r($con);
$sql = "select sum(val) as sumx, country from data group by country";
$data = array();
$query = $con->query($sql);
if($query){
while($r = $query->fetch_object()){
$data[] = $r;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Prueba JVector Map</title>
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-jvectormap-2.0.5.css">
<script type="text/javascript" src="jquery-jvectormap-2.0.5.min.js"></script>
<script type="text/javascript" src="jquery-jvectormap-world-mill.js"></script>
</head>
<body>
<h1 style="font-size: 80px;padding: 0;margin:0; color: red;">Crear un mapa del mundo con el plugin JVectorMap y jQuery</h1>
<div id="my-map" style="width: 1280px; height: 720px"></div>
<script>
var data = {
<?php foreach($data as $d):?>
"<?php echo $d->country; ?>": <?php echo $d->sumx; ?>, // estados unidos
<?php endforeach; ?>
};
$('#my-map').vectorMap({
map: 'world_mill', // el mapa del mundo
series: {
regions: [{
values: data, // los valores
scale: ['#55FF55', '#555555'], // el rango de colores
normalizeFunction: 'polynomial' // la formula de normalizacion de datos
}]
},
onRegionTipShow: function(e, el, code){ // al seleccionar una region se muestra el valor que tengan en el array
el.html(el.html()+' (Poblacion: '+data[code]+')');
}
});
</script>
</body>
</html>Recuerden guardar el archivo con extensión .php para que pueda funcionar.
Descargar
Les dejo un link de descarga para que obtengan el código fuente del ejemplo, el plugin jvectormap y la base de datos.
Link: https://drive.google.com/file/d/1UKqRmZXg5gZVqkUWEfSc6O-Kz01Mxvhu/view
No se olviden de comentar, compartir y suscribirse… Saludos