Por último, vamos a la parte más interesante de todo el curso: mostrar resultados en un mapa web usando consultas espaciales con PostGIS.
Que necesitas para usar PostGIS en un visor web
Hasta ahora, hemos utilizado HTML, JS y CSS. Nada más. Si queremos incorporar consultas espaciales a nuestro visor, debemos realizar consultas a una base de datos, lo que implica utilizar más tecnologías. En este caso, vamos a crear un pequeño fichero dentro de nuestro visor con el lenguaje del lado de servidor PHP.
Creación de una consulta espacial
Vamos a crear un archivo llamado petición.php. Si has llegado hasta este punto, entiendo que ya sabes como crear una página web usando PHP. Si no es así, pásate por aquí para aprenderlo, pues lo vas a necesitar para continuar.
Aquí tenemos un ejemplo del código que estaría en nuestro archivo petición.php.
<?php
// Establece la conexión a la base de datos
$dbconn = pg_connect("host=localhost dbname=tu_basededatos user=tu_usuario password=tu_contraseña");
// Verifica si la conexión fue exitosa
if (!$dbconn) {
echo "Error de conexión.";
exit;
}
// Consulta espacial usando PostGIS
$query = "SELECT ST_AsGeoJSON(geom) as geometry FROM tiendas WHERE tipo like 'panaderia';
$result = pg_query($dbconn, $query);
// Verifica si la consulta fue exitosa
if (!$result) {
echo "Error de consulta.";
exit;
}
// Crea un array vacío para almacenar los resultados
$data = array();
// Itera sobre los resultados de la consulta y agrega cada fila al array
while ($row = pg_fetch_assoc($result)) {
$data[] = $row;
}
// Cierra la conexión a la base de datos
pg_close($dbconn);
// Configura las cabeceras para permitir solicitudes desde cualquier origen y especifica que la respuesta es de tipo JSON
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
// Convierte los datos a formato JSON y envía la respuesta al cliente
echo json_encode($data);
?>En este ejemplo, la parte que nos interesa es la siguiente:
"SELECT ST_AsGeoJSON(geom) as geometry FROM tiendas WHERE tipo like 'panaderia';Esta consulta nos va a devolver un objeto GeoJSON que luego interpretaremos con Leaflet para mostrar resultados en el mapa. En este otro curso profundizamos sobre PostGIS, y lo que podemos hacer con él.
Para este ejemplo, usaremos esta consulta que nos devuelve todas las tiendas de tipo «panadería» que tenemos en una supuesta tabla en Base de Datos.
Nos devolverá un resultado como este:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.09,51.511
]
},
"properties": {
"name": "Panadería 1"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.09,51.521
]
},
"properties": {
"name": "Panadería 1"
}
}
]
}Mostrar un GeoJSON en el mapa usando Leaflet
Vamos a añadir al ejemplo creado en el anterior capítulo el código necesario para mostrar nuestro GeoJSON.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa con Leaflet y GeoJSON</title>
<!-- Agrega el enlace al CSS de Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" crossorigin=""/>
<!-- Establece el estilo del contenedor del mapa -->
<style>
#mapid { height: 400px; }
</style>
</head>
<body>
<!-- Crea un div con un ID específico para mostrar el mapa -->
<div id="mapid"></div>
<!-- Agrega el enlace al script de Leaflet -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" crossorigin=""></script>
<script>
// Inicializa el mapa y establece la vista en una ubicación y zoom específicos
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// Agrega una capa base utilizando el proveedor de mapas de OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(mymap);
// Agrega un marcador al mapa en una ubicación específica
L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup('¡Hola! Este es un marcador de ejemplo.')
.openPopup();
// Agrega un GeoJSON al mapa
var geojsonFeature = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.1,51.511
]
},
"properties": {
"name": "Panadería 1"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.095,51.521
]
},
"properties": {
"name": "Panadería 1"
}
}
]
};
L.geoJSON(geojsonFeature).addTo(mymap);
</script>
</body>
</html>Al marcador que teníamos, le hemos añadido nuevos marcadores, que son los puntos obtenidos en la consulta espacial.
Si quieres saber que más puedes hacer con visores web, Leaflet y PostGIS, pásate por los demás cursos gratis.
