Connect Live Satellite Data
to Your App

Your current app shows a basemap. That is like having a telescope pointed at the ceiling. Today we point it at Earth, live.

Before configuring complex APIs, students can add beautiful, cloud-free global Sentinel-2 imagery to Leaflet in under 60 seconds. This uses public WMTS tiles served by EOxCloudless, a reliable service that requires zero authentication or API tokens.

// EOxCloudless Sentinel-2 Cloudless global composite
const s2cloudless = L.tileLayer(
    'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2023_3857/default/GoogleMapsCompatible/{z}/{y}/{x}.jpeg', 
    {
        attribution: 'Sentinel-2 cloudless by EOX IT Services GmbH (Contains modified Copernicus Sentinel data)',
        maxZoom: 14,
        minZoom: 1
    }
);

// Add it to your Leaflet map
s2cloudless.addTo(map);

Sentinel Hub (by Sinergise, now part of the Copernicus Data Space Ecosystem) provides a standard OGC WMS endpoint that serves pre-rendered satellite imagery tiles. Your Leaflet map can consume these tiles just like OpenStreetMap tiles.¹

Leaflet's built-in L.tileLayer.wms() method speaks the OGC Web Map Service protocol natively. All you need is the endpoint URL and the layer name.

// Your Sentinel Hub WMS endpoint
const SH_URL = 'https://sh.dataspace.copernicus.eu/ogc/wms/YOUR-INSTANCE-ID';

// Add a true-color Sentinel-2 layer
const trueColor = L.tileLayer.wms(SH_URL, {
    layers: 'TRUE-COLOR-S2-L2A',
    format: 'image/png',
    transparent: true,
    maxcc: 20,          // max cloud cover 20%
    time: '2026-06-01/2026-06-15',
    attribution: 'Sentinel-2 | Copernicus'
});

trueColor.addTo(map);

The maxcc parameter filters scenes by cloud cover percentage. The time parameter accepts ISO 8601 date ranges. Sentinel Hub automatically mosaics multiple scenes within your time window and returns the least-cloudy composite.

// ── Sentinel Hub WMS base URL ──
const SH_URL = 'https://sh.dataspace.copernicus.eu/ogc/wms/YOUR-INSTANCE-ID';

// ── Shared WMS options ──
const sharedOpts = {
    format:      'image/png',
    transparent: true,
    maxcc:       20,
    time:        '2026-06-01/2026-06-15',
    attribution: 'Sentinel-2 L2A | Copernicus'
};

// ── Define overlay layers ──
const layers = {
    'True Color':  L.tileLayer.wms(SH_URL, { ...sharedOpts, layers: 'TRUE-COLOR-S2-L2A' }),
    'NDVI':        L.tileLayer.wms(SH_URL, { ...sharedOpts, layers: 'NDVI' }),
    'False Color': L.tileLayer.wms(SH_URL, { ...sharedOpts, layers: 'FALSE-COLOR' })
};

// ── Add the layer control ──
L.control.layers(null, layers).addTo(map);

// ── Start with true color visible ──
layers['True Color'].addTo(map);

The first argument to L.control.layers() is for base layers (radio buttons); the second is for overlays (checkboxes). We pass null for base layers because we keep the OSM basemap separate. Users can toggle satellite overlays on and off independently.

Each "layer" in Sentinel Hub is really a server-side rendering script (called an evalscript) that selects specific bands, applies arithmetic, and maps the result to RGB values. WMS delivers the rendered output as standard image tiles.²

A static satellite layer is already useful, but the real power of EO comes from temporal comparison. Adding a date picker lets users scrub through time and observe change.

// ── Date picker for satellite imagery ──
const datePicker = document.getElementById('sat-date');

datePicker.addEventListener('change', (e) => {
    const selectedDate = e.target.value; // e.g. "2026-06-10"

    // Create a 5-day window around the selected date
    const d = new Date(selectedDate);
    const from = new Date(d - 5 * 86400000).toISOString().slice(0, 10);
    const to = selectedDate;

    // Update WMS time parameter on all layers
    Object.values(layers).forEach(layer => {
        layer.setParams({ time: `${from}/${to}` });
    });
});

// HTML: <input type="date" id="sat-date" value="2026-06-15" />

The setParams() method on a Leaflet WMS layer updates the query parameters and automatically reloads the tiles. The 5-day window ensures we find a cloud-free acquisition even in cloudy regions.

The Process API requires OAuth2 client credentials authentication. Unlike the WMS instance ID (which is embedded in the URL), OAuth2 uses a proper token exchange flow that is more secure and provides fine-grained access control.³

How OAuth2 Client Credentials Work

1. You register an OAuth client in the Copernicus dashboard (Settings > OAuth clients)
2. You receive a Client ID and Client Secret
3. Your backend exchanges these for a short-lived access token (valid ~10 minutes)
4. Every Process API request includes the token in its Authorization header

async function getAccessToken() {
    const response = await fetch(
        'https://identity.dataspace.copernicus.eu/auth/realms/CDSE/protocol/openid-connect/token',
        {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({
                grant_type:    'client_credentials',
                client_id:     process.env.SH_CLIENT_ID,
                client_secret: process.env.SH_CLIENT_SECRET
            })
        }
    );
    const data = await response.json();
    return data.access_token; // valid for ~600 seconds
}

The Process API is a single POST endpoint that accepts a JSON body with three main sections: input (what data and where), evalscript (what computation to run), and output (what format to return).⁴

{
  "input": {
    "bounds": {
      "bbox": [7.74, 48.57, 7.78, 48.59],  // Strasbourg area
      "properties": { "crs": "http://www.opengis.net/def/crs/EPSG/0/4326" }
    },
    "data": [{
      "type": "sentinel-2-l2a",
      "dataFilter": {
        "timeRange": { "from": "2026-06-01T00:00:00Z", "to": "2026-06-15T00:00:00Z" },
        "maxCloudCoverage": 30
      }
    }]
  },
  "evalscript": "// ... your custom script (next slide)",
  "output": {
    "width": 512,
    "height": 512,
    "responses": [{ "identifier": "default", "format": { "type": "image/png" } }]
  }
}

Key Parameters

• bbox: Bounding box in [west, south, east, north] order (WGS84)
• timeRange: ISO 8601 date range; Sentinel Hub selects the best scene(s)
• maxCloudCoverage: Percentage filter (0 to 100)
• width/height: Output image dimensions in pixels (max 2500x2500)

An evalscript is a small JavaScript program that runs on Sentinel Hub's servers for each pixel. It receives raw band values and returns RGB (or any custom output). This means all computation happens in the cloud; your app receives only the rendered result.

//VERSION=3
function setup() {
    return {
        input:  ["B04", "B08", "dataMask"],
        output: { bands: 4 }  // RGBA
    };
}

function evaluatePixel(sample) {
    let ndvi = (sample.B08 - sample.B04) / (sample.B08 + sample.B04);

    // Color ramp: brown (-1 to 0) -> yellow (0 to 0.3) -> green (0.3 to 1)
    if (ndvi < 0)    return [0.5, 0.2, 0.1, sample.dataMask];
    if (ndvi < 0.1)  return [0.75, 0.6, 0.2, sample.dataMask];
    if (ndvi < 0.3)  return [0.9, 0.9, 0.2, sample.dataMask];
    if (ndvi < 0.5)  return [0.4, 0.8, 0.2, sample.dataMask];
    return [0.1, 0.6, 0.1, sample.dataMask];  // deep green
}

How It Works

• The setup() function declares which bands to request and the output format
• evaluatePixel() runs for every pixel; sample.B08 is the NIR reflectance value (0 to 1)
• The dataMask band is 0 for no-data pixels (outside the scene footprint) and 1 for valid pixels
• Return values are [R, G, B, Alpha] in the range 0 to 1

A single NDVI image is a snapshot. A time series reveals the story: seasonal growth cycles, drought onset, harvest dates, or urban expansion eating into farmland. The Sentinel Hub Statistical API provides aggregated values over an area across multiple dates.⁵

What You Can Extract

The Statistical API Approach

Instead of downloading a full image for each date (expensive), the Statistical API computes aggregate statistics (mean, median, std, percentiles) server-side and returns only the numbers. For a 6-month time series with biweekly sampling, that is 12 small JSON responses instead of 12 high-resolution images.

In Day 5, you gave your Gemini assistant tools like panMap() and addMarker(). Now we add a new category of tools: satellite data retrieval. When a user asks "How green is this area?", the AI can autonomously call a function to fetch NDVI data, receive numeric values, and respond with a natural-language interpretation.⁶

The Concept: AI as an EO Analyst

What Makes This Powerful

• No EO expertise needed by the user: they ask in natural language; the AI handles band math and API calls
• Grounded responses: the AI's answer is backed by real, timestamped satellite measurements (not training data)
• Composable: the AI can chain satellite tools with map tools (fetch NDVI, then highlight low-NDVI zones on the map)

Multimodal Enhancement

For even richer analysis, you can capture a screenshot of the map view (using html2canvas or the Leaflet image export plugin) and send it to Gemini Vision alongside the NDVI values. The AI can then describe spatial patterns it observes in the imagery: "The northern section of the park shows higher NDVI than the southern section near Columbus Circle."

External Resources

• Sentinel Hub EO Browser (interactive evalscript testing)
• Sentinel Hub Custom Scripts Repository (community evalscripts)
• Copernicus Data Space Ecosystem (account registration and dashboard)
• Google Earth Engine (GEE platform and documentation)
• Leaflet WMS TileLayer Reference

Interact with the live map below to explore live satellite overlays over Strasbourg.