GeoServer WMS/WFS Integration with Angular

GeoServer Overview

GeoServer is an open-source Java server that serves OGC-compliant WMS, WFS, and WCS services. It's the backbone of many government GIS platforms.

WMS Layer in OpenLayers

const wmsLayer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: 'https://gis.example.com/geoserver/wms',
        params: {
            LAYERS: 'workspace:roads',
            TILED: true,
            CQL_FILTER: "status='active'"
        },
        serverType: 'geoserver'
    })
});

WFS Feature Query

const wfsUrl = 'https://gis.example.com/geoserver/wfs?' +
    new URLSearchParams({
        service: 'WFS', version: '2.0.0',
        request: 'GetFeature',
        typeName: 'workspace:hospitals',
        outputFormat: 'application/json',
        CQL_FILTER: "district='Mumbai'"
    });
const response = await fetch(wfsUrl);
const geojson = await response.json();

Secured GeoServer with .NET Proxy

Never expose GeoServer credentials to the browser. Build a .NET proxy that adds Basic Auth headers server-side.