Mire használható

Minden példa lentebb élő — valódi csempe, valódi adat, ugyanarról a szerverről, amelyik a te térképeidet is kiszolgálja. Semmi nem hív ki Google-höz, Mapboxhoz vagy bármilyen EU-n kívüli szolgáltatáshoz. Nézd meg az oldal forrását, és megvan a teljes recept.

English · Kódpéldák

1 · Élő adat a térkép fölött

Átlátszó PNG-csempék élő nyílt adatból, Európára. Válassz réteget — az alaptérkép marad a tiéd.

L.tileLayer('https://tilezza.eu/raster/grayscale/{z}/{x}/{y}.png?key=YOUR_KEY').addTo(map); L.tileLayer('https://tilezza.eu/overlay/aszaly/{z}/{x}/{y}.png', { maxZoom: 11, maxNativeZoom: 7, opacity: .75 }).addTo(map);

2 · Élő szenzorhálózat

74 hivatalos vízmérce Németországtól a Vaskapuig, aszerint színezve, hogy melyik hol áll a saját 30 napos sávjában. Kattints bármelyik körre.

Kattints egy körre
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 · Saját geometria a térképen

A Duna, a Tisza és a Rába GeoJSON-ként, a saját vektorcsempéinkből kinyerve — 15 950 pont, böngészőre egyszerűsítve.

const folyok = await (await fetch('/vizmeter/rivers.geojson')).json(); L.geoJSON(folyok, { style: { color: '#0284C7', weight: 2, opacity: .85 } }).addTo(map);

4 · Lejátszható idősor

Előrejelzett csapadék 136 rácscellán, 30 órára előre. Nyomd meg a lejátszást — a csempék közben nem mozdulnak, csak az adatréteg változik: pont ezért marad ez olcsó.

// 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 · Egy éles oldal, ami erre épül

Nem makett: éles oldal, ezeken a csempéken.

A vizallasradar.hu valós időben követi a Duna-vízgyűjtőt — 74 mérce, erőművek, aszály- és esőrétegek, 15 percenként frissülve. Az alaptérkép, a vektorcsempék, a glyph-ek és a betűtípusok mind erről a szerverről jönnek.

vizallasradar.hu megnyitása →

6 · Útvonaltervezés és geocoding — hamarosan

Távolság és útvonal két pont között, izokrón („meddig jutok 20 perc alatt"), és címkeresés. Ugyanezen a szerveren, saját hosztolással — a lekérdezések nem hagyják el az EU-t. Ez a szakasz élő demókkal bővül, amint a szolgáltatások felépülnek.

Kezdj bele

Az ingyenes kulcs két perc, és nem kell hozzá bankkártya.

Ingyenes API-kulcs →