Every example below is live — real tiles, real data, running on the same server that serves your maps. Nothing here calls out to Google, Mapbox or any non-EU service. View source on this page and you have the whole recipe.
A dozen demo gauges along the Danube, coloured by how far each one sits inside its own 30-day range — your own sensor feed plugs in the same way. Click any circle.
Click a circle
const adat = await (await fetch('/your-stations.json')).json();
for (const s of adat.stations) {
const arany = (s.cm - s.min30) / (s.max30 - s.min30); // hol áll a sávjában
L.circleMarker([s.lat, s.lon], {
radius: 6, color: '#fff', weight: 1.5, fillOpacity: .9,
fillColor: arany < .25 ? '#E0603A' : arany > .75 ? '#3EC3E8' : '#8AA6BF',
}).addTo(map).on('click', () => mutat(s));
}
3 · Your own geometry on the map
The Danube and Tisza as simplified GeoJSON — any linework you own draws the same way.
Two ways to draw the same geometry. The second is what a water-focused map wants: a bright channel with an animated dash running downstream — no extra data, just styling.
Forecast rain over 136 grid cells, 30 hours ahead. Press play — the same tiles stay put while only the data layer changes, which is exactly why this stays cheap.
—
// radar.p[cella][idolepes] — 136 cella, 30 óra
const cellak = adat.grid.map(([lon, lat]) =>
L.rectangle([[lat, lon], [lat + 1, lon + 1]], { stroke: false, fillOpacity: 0 }).addTo(map));
function kepkocka(t) { // csak a stílust frissítjük, nem rajzolunk újra
cellak.forEach((r, i) => {
const mm = adat.radar.p[i][t];
r.setStyle({ fillOpacity: mm > 0 ? Math.min(.85, .15 + mm / 4) : 0,
fillColor: mm > 2 ? '#1D4ED8' : '#38BDF8' });
});
}
5 · A real site built on this
Not a mock-up: a production site running on these tiles.
vizallasradar.hu tracks the Danube basin in real time — 74 gauges, power plants, drought and rain overlays, updated every 15 minutes. Base map, vector tiles, glyphs and fonts all come from this server.
These shipped: turn-by-turn routing for cars, bikes and walking, a typo-tolerant
geocoder with house-number precision, and a nearby-places API with Wikimedia photos —
all self-hosted on the same EU server, so the queries never leave the EU. Try them live: