Librería: Leaflet

Descripción: Se agrega una capa geojson desde PostGis mediante Geoserver. Si se actualiza la capa desde Qgis o PostGis, se actualiza automáticamente en el mapa por ser un servicio WFS.

image.png

Archivo CSS

#map {
    position: absolute;
    width: 100%;
    height: 100%;
}

Archivo HMTL:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Datos desde PostGIS</title>
  <link rel="stylesheet" href="<https://unpkg.com/leaflet/dist/leaflet.css>" />  
  <link rel="stylesheet" href="mapa.css" />
</head>

<body>
  <div id="map"></div>
  <script src="<https://unpkg.com/leaflet/dist/leaflet.js>"></script>
  <script src="<https://code.jquery.com/jquery-3.2.1.js>" ></script>
  <script src="mapa.js"></script>
</body>
</html>

Archivo JavaScript:

// Inicializar el mapa
const map = L.map('map').setView([3.42, -76.52], 13);

// Agregar mapa base de OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map);

// Configura tu url dependiendo del nombre creado en Geoserver local o en el host
var baseUrl = '<http://localhost:8080/geoserver/cali/ows>';

		var defaultParameters = {
			service: 'WFS',
			version: '1.0.0',
		  request: 'GetFeature',
			typeName: 'cali:Barrios_Cali',
			outputFormat: 'application/json',

		};
		var parameters = L.Util.extend(defaultParameters);

		var URL = baseUrl + L.Util.getParamString(parameters);
			
		$.ajax({
			url: URL,
			success: function (data) {
				var geojson = new L.geoJson(data, {
					style: {"color":"#063970","weight":1},
					onEachFeature: function(feature, layer){
						layer.bindPopup("El barrio seleccionado es " + feature.properties.nombre);
					}}
				).addTo(map);
			}
		});

Ver el paso a paso:

https://youtu.be/bMPmZYwN_xI