CURSO DE ELABORACION
DE BASE DE DATOS
“DESARROLLANDO UNA
APLICACIÓN WEB GIS”
Ms. Ing. Esteban Ortega Flores
Docente
Mayo 2021
“Hasta que no te valores a ti mismo no
valoraras tu tiempo. Y hasta que no
valores tu tiempo no harás nada de con él
Peter Drucker
APLICACIÓN WEB GIS
Instalando el ambiente de trabajo
Consta de un conjunto de aplicaciones Open Source
• WAMP, servidor web.
• Leaflet, librería de mapas interactivos.
• jEdit, editor de texto para programadores.
Instalando el ambiente de trabajo: WAMP
• Por las siglas Windows, Apache, MySQL y Php,
WAMP es un paquete de instalación rápida de
un servidor web
• Descargar del sitio www.wampserver.es
• Debe ser instalado en C:\wamp
• Su gestor de base de datos por defecto es
MySQL, pero podemos acceder a PostgreSQL
mediante Php.
Instalando el ambiente de trabajo: WAMP
• Ingrese al: www.wampserver.es
• Para la instalación se puede guiar del
siguiente video:
https://youtu.be/8AEtxBCEUpQ
Instalando el ambiente de trabajo: Leaflet
• Leaflet es una librería escrita en JavaScript para
encapsular la complejidad del uso de mapas
interactivos en dispositivos móviles.
• Descarga de www.leafletjs.com
• Descomprimir el contenido en
C:wamp\www\Leaflet
• No requiere instalación, se llama a nuestras
páginas a través de código.
Instalando el ambiente de trabajo: Leaflet
• Descarga de www.leafletjs.com
Instalando el ambiente de trabajo: jEdit
• jEdit es un editor de texto desarrollado en java
con funcionalidades para programadores,
tiene una gran cantidad de plugins
disponibles.
• Descargar de www.jedit.org
• Seguir las instrucciones de instalación por
defecto.
• Tiene reconocimiento de sintaxis de mas de
200 lenguajes.
Instalando el ambiente de trabajo: jEdit
• Descargar de www.jedit.com
• Seguir las instrucciones de
instalación por defecto.
Para actualizar el Java:
https://www.oracle.com/java/technologies/javase-jdk15-
downloads.html
Conexión a PostgreSQL desde Php
• Editar el archivo php.ini del servidor WAMP.
Remover el símbolo de ; de la línea ";extensión=php_pgsql.dll".
• Configurar el objeto de conexión.
$dbconnection = pg_connect("host=localhost dbname=Mundo_Real user=postgres
Password=7160882") or die ("couldn't connect!:" . pg_last_error());
• Consulta de prueba.
$query = 'SELECT id, tipo, nombre, ST_X(ST_Centroid(geom)),
ST_Y(ST_Centroid(geom)) from tbl_referencias';
$result = pg_query($query) or die('Query failed:' . Pg_last_error());
$line = pg_fetch_row($result); //Guardamos el primer resultado
$longitud = $line[3]; //Extraemos el valor de X
$latitud = $line[4]; //Extraemos el valor de Y
Echo "Longitud: " .$longitud."<br>";
Echo "Latitud: " .$latitud;
Conexión a PostgreSQL desde Php
• Editar el archivo php.ini del servidor WAMP.
Remover el símbolo de ; de la línea ";extensión=php_pgsql.dll".
Conexión a PostgreSQL desde Php
• Editar el archivo php.ini del servidor WAMP.
Remover el símbolo de ; de la línea ";extensión=php_pgsql.dll".
1. Edición
2. Buscar (escribimos pgsql)
3. Buscar siguiente
Conexión a PostgreSQL desde Php
• Editar el archivo php.ini del servidor WAMP.
Remover el símbolo de ; de la línea ";extensión=php_pgsql.dll".
1. Borramos ";"
2. Guardamos
3. Cerramos
Conexión a PostgreSQL desde Php
• Abrimos jEdit
1. Clic en guardar
2. Damos la ruta (creamos la
carpeta tutorial)
3. Damos como nombre
index.php
4. Save
Conexión a PostgreSQL desde Php
1. Escribimos la consulta
2. Guardamos
<?php
$dbconnection = pg_connect("host=localhost dbname=Mundo_real user=postgres
password=7160882") or die ("couldn't connect!:" . pg_last_error());
$query = 'SELECT id, tipo, nombre, ST_X(ST_Centroid(geom)),
ST_Y(ST_Centroid(geom)) from tbl_referencias';
$result = pg_query($query) or die('Query failed: ' . Pg_last_error());
$line = pg_fetch_row($result); //Guardamos el primer resultado
$longitud = $line[3]; //Extraemos el valor de X
$latitud = $line[4]; //Extraemos el valor de Y
echo "Longitud: ".$longitud."<br>";
echo "Latitud: ".$latitud;
?>
Conexión a PostgreSQL desde Php
1. Escribimos la consulta
2. Guardamos
Conexión a PostgreSQL desde Php
1. Activamos wampserver
2. Put Online
Conexión a PostgreSQL desde Php
1. Abrimos un explorador y
escribimos:
localhost/tutorial/index.php
Conexión a PostgreSQL desde Php
1. Abrimos un explorador y
escribimos:
localhost/tutorial/index.php
Copy libpq.dll from php folder (ex.:
C:\wamp\bin\php\php5.5.12) to apache bin folder (ex.:
C:\wamp\bin\apache\apache2.4.9\bin)
Guía rápida
¿qué es leaflet?
• Librería de Javascript para crear mapas
• Open-source
• HTML + CSS + Javascript
• Adaptada para móvil
Leaflet es una librería JavaScript opensource para crear mapas
interactivos en un entorno móvil.
Leaflet es la elección utilizada por Flickr, Wikimedia, foursquare,
OSM, CARTO, GIS Cloud, Washington Post, Wall Street Journal,
Geocaching.com, etc.
algunos ejemplos...
algunos ejemplos...
algunos ejemplos...
recursos javascript
fundamental...
El objetivo JavaScript para el mapa base. (1)
La estructura básica de HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style></style>
</head>
<body>
<div id="map"></div>
<script>
</script>
</body>
</html>
La cabecera
Vamos a crear un mapa con Leaflet, para ello incluiremos en la cabecera
<head> de nuestra página web la librería JavaScript leaflet.js (que contiene el
código de la librería) y la hoja de estilo leaflet.css (con la hoja de estilos de la
librería):
• <!DOCTYPE html>
• <html>
• <head>
• <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
• <link rel="stylesheet"
href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
Estilo del mapa (CSS)
Nos aseguramos que el contenedor de mapa tenga un tamaño definido,
dentro de la etiqueta <style> lo fijamos en CSS:
<style>
#map {
width: 100%;
height: 580px;
box-shadow: 5px 5px 5px #888;
}
</style>
El cuerpo
Dentro de la etiqueta <body> encontramos el marcado para el mapa, que
genera un único elemento de documento. También damos al contenedor un
atributo id para que podamos hacer referencia a él en nuestro código:
• <body>
• <div id="map"></div>
El script con el código JavaScript
Ahora añadimos el siguiente código dentro del <script>:
• <script>
• var map = L.map('map').
• setView([-18.024767, -70.249214],
• 15);
• </script>
L.map es la clase central de la API. Se usa para crear y manipular el mapa. En
el mapa establecemos unas coordeanas de la vista y un nivel de zoom.
Añadiendo las capas de OpenStreetMap
A continuación añadimos un mapa base como tile layer, en este caso las
imágenes de OSM. Crear un tile layer lleva implícito establecer la URL, el
texto con la atribución y el máximo nivel de zoom de la capa:
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a
href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a
href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,
Imagery © <a href="http://cloudmade.com">CloudMade</a>',
maxZoom: 18
}).addTo(map);
Añadiendo un control de escala
Por último añadiremos un control de escala:
L.control.scale().addTo(map);
Añadiendo un marcador
Y después un icono ¡que también se puede mover!
L.marker([-18.024767, -70.249214],{draggable: true}).addTo(map);
L.control.scale().addTo(map);
Solo falta cerrar el script, el cuerpo y el html:
• </script>
• </body>
• </html>
El objetivo JavaScript para el mapa base. (3)
<!DOCTYPE html><html>
<meta charset="utf-8" />
<head>
<script src="../leaflet/leaflet.js"></script>
<link rel="stylesheet" href="../leaflet/leaflet.css" />
<style>
#map {
widh: 100px;
height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
…
El objetivo JavaScript para el mapa base. (3)
…
var map = L.map('map').
setView([-18.024767, -70.249214],
19);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <ahref="http://osm.org/copyright"> OpenStreetMap</a> contributor'
}).addTo(map);
L.control.scale().addTo(map);
L.marker([-18.024767, -70.249214], {draggable: true}).addTo(map);
</script>
</body>
</html>
El objetivo JavaScript para el mapa base
El objetivo JavaScript para el mapa base
Los objetos JavaScript para los marcadores.
<?php
$dbconnection = pg_connect("host=localhost dbname=Mundo_real user=postgres
password=7160882") or die ("couldn't connect!:" . pg_last_error());
$query = "SELECT id, tipo, nombre, ST_X(ST_Centroid(geom)), ST_Y(ST_Centroid(geom)) from tbl_referencias WHERE tipo='university' limit 10";
$result = pg_query($query) or die('Query failed: ' . Pg_last_error());
$table = "\n<table><tr><th>Universidad</th><th>Latitud</th><th>Longitud</th>\n"; // Inicia el código de la tabla
While($line = pg_fetch_row($result))
{
$long = $line[3]; //
$lat = $line[4]; // Extrae los valores de una línea del resultado
$name = $line[2]; //
$table = $table."\n<tr><td>".$name."</td><td>".$lat."</td><td>".$long."</td></tr>"; // Agrega a tabla
echo "\nL.marker([".$lat.",".$long."]).addTo(map)"; //Crea marcador
echo "\n.bindPopup('<br>".$name."');"; //Agrega popup con el nombre
}
echo "</script>"; // Termina el script de marcadores
echo $table."</table\n"; // Inserta código de tabla al documento html
pg_free_result($result); // Libera la variable de resultados
pg_close($dbconnection); // Cierra la conexión
?>
Los objetos JavaScript para los marcadores.
Resultados de la consulta:
Unir todo el código en una Aplicación web GIS.
El documento final php consiste en:
• La estructura básica HTML.
• El encabezado modificado.
• El código en el cuerpo para el objeto mapa.
• Borrar la etiqueta de cierre de script </script> anterior al cierre del
cuerpo.
• El código Php en el cuerpo para los objetos de los marcadores y la
tabla.
RESUMEN
• Instalación básica de un servidor web con funcionalidades
GIS.
• Usar Php para conectarnos y recuperar datos de Postgre SQL.
• Desarrollar una aplicación web GIS desde un documento
php.
