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.
74 official river gauges from Germany to the Iron Gates, coloured by how far each one sits inside its own 30-day range. Click any circle.
Click a circle
const adat = await (await fetch('/vizmeter/data.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, Tisza and Rába as GeoJSON, extracted from our own vector tiles — 15,950 points, simplified for the browser.
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.
Distance and route between two points, isochrones ("how far can I get in 20 minutes"), and address search. Self-hosted on the same server, so the queries never leave the EU. This section will fill in with live demos as soon as the services are built.