moosetraveller/leaflet-map-wfs-airports.html

## leaflet-map-wfs-airports.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map using WFS and GeoServer</title>

    <script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>

    <link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

    <style>
        #map {
            height: 500px;
        }
    </style>

    <script>

        const MAX_FEATURE_COUNT = 1000;
        const MAP_CRS = 'EPSG:4326';
        const GEOSERVER_URL = 'http://openmaps.gov.bc.ca/geo/pub/wfs';

        class Map {

            map;
            featureLayer;

            constructor() {
                this.initMap();
            }

            initMap() {

                this.map = L.map('map', {
                    center: [50, -123],
                    zoom: 7,
                });

                const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(this.map);

                tiles.addTo(this.map);

                this.fetchFeatures();

                const subject = new rxjs.Subject();
                subject.asObservable()
                    .pipe(
                        rxjs.sampleTime(250)
                    )
                    .subscribe(_ => this.fetchFeatures());

                for (const eventName of ['resize', 'viewreset', 'zoomend', 'moveend']) {
                    this.map.on(eventName, event => {
                        subject.next(event);
                    });
                }

            }

            async fetchFeatures() {

                const params = new URLSearchParams({
                    service: 'WFS',
                    version: '2.0.0',
                    request: 'GetFeature',
                    typeName: 'pub:WHSE_IMAGERY_AND_BASE_MAPS.GSR_AIRPORTS_SVW',
                    srsName: MAP_CRS,
                    count: `${MAX_FEATURE_COUNT}`,  // note: maxFeatures with WFS 1.1 and earlier
                    outputFormat: 'application/json',
                    bbox: `${this.map.getBounds().toBBoxString()},${MAP_CRS}`,
                });

                const response = await fetch(`${GEOSERVER_URL}?${params}`);
                const features = await response.json();

                if (!!this.featureLayer) {
                    this.map.removeLayer(this.featureLayer);
                }

                this.featureLayer = L.geoJSON(features, {
                    pointToLayer: (_, point) => L.circleMarker(point, {
                        radius: 3,
                        color: '#cc3355',
                        fillColor: '#cc3355',
                        fillOpacity: 1,
                    }),
                    onEachFeature: (feature, layer) => {
                        layer.bindPopup(feature.properties['AIRPORT_NAME']);
                    },
                }).addTo(this.map);

            }

        }

        document.addEventListener("DOMContentLoaded", () => new Map());

    </script>

</head>
<body>
    <h1>BC Airports</h1>
    <div id="map"></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Leaflet Map using WFS and GeoServer</title>

	<script src="https://unpkg.com/rxjs@^7/dist/bundles/rxjs.umd.min.js"></script>

	<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

	<style>
	#map {
	height: 500px;
	}
	</style>

	<script>

	const MAX_FEATURE_COUNT = 1000;
	const MAP_CRS = 'EPSG:4326';
	const GEOSERVER_URL = 'http://openmaps.gov.bc.ca/geo/pub/wfs';

	class Map {

	map;
	featureLayer;

	constructor() {
	this.initMap();
	}

	initMap() {

	this.map = L.map('map', {
	center: [50, -123],
	zoom: 7,
	});

	const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(this.map);

	tiles.addTo(this.map);

	this.fetchFeatures();

	const subject = new rxjs.Subject();
	subject.asObservable()
	.pipe(
	rxjs.sampleTime(250)
	)
	.subscribe(_ => this.fetchFeatures());

	for (const eventName of ['resize', 'viewreset', 'zoomend', 'moveend']) {
	this.map.on(eventName, event => {
	subject.next(event);
	});
	}

	}

	async fetchFeatures() {

	const params = new URLSearchParams({
	service: 'WFS',
	version: '2.0.0',
	request: 'GetFeature',
	typeName: 'pub:WHSE_IMAGERY_AND_BASE_MAPS.GSR_AIRPORTS_SVW',
	srsName: MAP_CRS,
	count: `${MAX_FEATURE_COUNT}`, // note: maxFeatures with WFS 1.1 and earlier
	outputFormat: 'application/json',
	bbox: `${this.map.getBounds().toBBoxString()},${MAP_CRS}`,
	});

	const response = await fetch(`${GEOSERVER_URL}?${params}`);
	const features = await response.json();

	if (!!this.featureLayer) {
	this.map.removeLayer(this.featureLayer);
	}

	this.featureLayer = L.geoJSON(features, {
	pointToLayer: (_, point) => L.circleMarker(point, {
	radius: 3,
	color: '#cc3355',
	fillColor: '#cc3355',
	fillOpacity: 1,
	}),
	onEachFeature: (feature, layer) => {
	layer.bindPopup(feature.properties['AIRPORT_NAME']);
	},
	}).addTo(this.map);

	}

	}

	document.addEventListener("DOMContentLoaded", () => new Map());

	</script>

	</head>
	<body>
	<h1>BC Airports</h1>
	<div id="map"></div>
	</body>
	</html>