Crear un JVectorMap con PHP y MySQL

 in PHP Stuffs by

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

Leave a comment