airTEXT WMS Integration Demonstration

This demonstration illustrates how local authorities and health applications can embed high-resolution air quality forecasts directly into web maps using Web Map Service (WMS) standards.

Code example

This javascript adds a leaflet map to the page, adds background mapping and the airTEXT WMS layer.

// Define the leaflet map, centred on London
const map = L.map('map').setView([51.505, -0.09], 10);

// Add OpenStreetMap as the background map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

// Get the current date
const today = new Date().toISOString().split('T')[0];

  // Add airTEXT WMS layer
const airtextWMS = L.tileLayer.wms('https://api.airtext.info/geoserver/london/wms', {
  layers: 'Total',
  format: 'image/png',
  transparent: true,
  version: '1.3.0',
  opacity: 0.75,
  time: today + 'T00:00:00Z',
  attribution: '&copy; airTEXT'
}).addTo(map);

Leaflet map

This map is the result of the javascript above.