Météo Climat France
358 indexeerbare pagina's, een geanimeerde kaart over 72 tijdstappen — en geen enkele regel framework.
- Jaar
- 2026
- Ontwerp
- 6 weken
- Stack
- JavaScript · MapLibre · HTML/CSS · Vercel
- Informatiearchitectuur
- Interfacedesign
- Ontwikkeling
- Cartografie
- Programmatische SEO
- Wetenschappelijke teksten
Product van Kayzen Web, bereikbaar op een Vercel-previewadres in afwachting van het definitieve domein.
- indexeerbare pagina's180 gemeenten · 141 klimaatfiches · 16 uitlegpagina's · 12 kaarten
- 358
- geïnterpoleerde roosterpunten
- 247
- geanimeerde uurlijkse tijdstappen
- 72
- API-sleutels voor cartografieMapLibre en IGN-basiskaart zelf gehost
- 0
Wat er opgelost moest worden.
De context
Météo Climat France is een gratis nationale weerdienst, uitgegeven door Kayzen Web. De dienst bedient drie verschillende toepassingen met dezelfde database: het dagelijkse weer (uur per uur over 48 uur, trend over 10 dagen), de klimatologie (normalen en records per station) en het landbouwweer (bodemtemperatuur en -vochtigheid, ET0, waterbalans, graaddagen, spuitomstandigheden).
De beperking
Drie beperkingen stonden tegenover elkaar. De dienst moest een geanimeerde kaart van Frankrijk tonen over 72 uurlijkse tijdstappen — dus zwaar rekenwerk in de browser. Hij moest raadpleegbaar blijven op een telefoon aan de rand van een akker, vaak op 3G. En hij moest in Google bestaan op ultralokale zoekopdrachten zoals “météo Vénissieux 69200”, terrein dat bezet is door spelers die er al twintig jaar zitten.
Het antwoord
We hebben de reflex van het framework afgewezen. De website is geschreven in native JavaScript, opgedeeld in elf modules die op aanvraag worden geladen, met zelf gehoste MapLibre voor de cartografie. Het budget dat op de runtime werd bespaard, is geherinvesteerd waar het telt: de interpolatie van de 247 roosterpunten, de prerendering van de 358 pagina's en de zorg voor de agronomische woordenschat.
Elke keuze, en de reden erachter.
De kaart als homepage
Het eerste scherm is geen zoekformulier, maar de kaart van Frankrijk die al gerenderd is, op het huidige uur. De bezoeker ziet zijn antwoord voordat hij iets heeft gedaan. Zoeken op gemeente of postcode blijft direct eronder beschikbaar, en de toets “/” zet de focus er vanaf elke plek weer op.
Eén kleurenschaal per grootheid
Temperatuur, neerslag, wind, bewolking, luchtdruk, vochtigheid, onweer en uv hebben elk hun eigen schaal, begrensd en voorzien van een legenda. Geen enkele gebruikt alleen het rood-groene verloop: deuteranopie treft 6 % van de mannen, en een slecht gekozen weerkaart wordt voor hen onleesbaar.
Een tijdschuif die met het toetsenbord werkt
Pijltjes links/rechts om van uur te wisselen, Shift + pijltjes om van dag te wisselen, spatiebalk om de animatie te starten, Home om naar nu terug te keren. De sneltoetsen staan onder de schuif geschreven, niet verstopt in een helppagina.
Een beschrijving in woorden
Onder de kaart geeft een link “Beschrijving van de kaart in woorden” in tekst weer wat de kaart toont. Dat is onmisbaar voor een schermlezer, en bijkomend leesbaar voor zoekmachines — een canvaskaart is voor hen een lege afbeelding.
Eén lettertype, zelf gehost
Nunito als variable font, geserveerd vanaf het domein van de website. Geen enkel verzoek naar Google Fonts: een extern lettertype op een dienst die dagelijks wordt geraadpleegd, is een netwerkafhankelijkheid en een doorgifte van gegevens naar het buitenland zonder rechtsgrond.
Kleurenpalet van het project
Hemelsblauw
#2E7BB6
Structuur, links, headers
Leisteen
#1F2933
Hoofdtekst
Tarwe
#C9A227
Landbouwgedeelte
Alarm
#C6413B
Overschreden drempels, waarschuwingen
Typografisch systeem
Koppen
Nunito 700
Lopende tekst
Nunito 400
Eén variabele familie, zelf gehost. De cijfers staan in tabulaire breedte: anders doet een wisselende temperatuur de hele kolom van een uurtabel verspringen.
Wat er onder de motorkap zit.
- JavaScript
- MapLibre
- HTML/CSS
- Vercel
Native JavaScript, elf modules
menu, logique, couches, meteo-api, agro, app, climat, comprendre, glossaire, bandeau en de vendor MapLibre. Elke pagina laadt alleen wat ze nodig heeft: de klimatologische fiche van een station bevat noch de agronomische engine noch de radarspeler.
Zelf gehoste MapLibre in plaats van Mapbox
Geen API-sleutel, geen facturering per weergave, geen aanroep naar een derde bij elke paginalading. De basiskaart komt van het IGN — Franse open overheidsdata, passend bij een dienst die over gemeenten spreekt.
Interpolatie op een rooster van 247 punten
De openbare modellen leveren een raster; de interface heeft een continu veld nodig. Interpolatie en rendering gebeuren in de browser, in één doorgang per tijdstap, met caching van de 72 tijdstappen: de animatie blijft vloeiend zonder de API opnieuw aan te roepen.
De /api/-routes verboden voor robots
Het robots.txt-bestand sluit /api/ uit. Zonder dat zou elke verkenning door een crawler het Open-Meteo-quotum voor niets opmaken — en een uitgeput quotum betekent een dienst die voor echte bezoekers onbeschikbaar is.
Datafuncties aan serverzijde
De aanroepen naar de modellen lopen via serverfuncties die de antwoorden normaliseren, cachen en begrenzen. De browser spreekt nooit rechtstreeks met de leverancier: de dag dat de bron verandert, blijft de interface ongewijzigd.
Hoe de website vindbaar wordt.
358 URL's, vier sjablonen
180 gemeentefiches (/meteo/lyon-69001), 141 klimatologische fiches (/climat/…), 16 uitlegpagina's (/comprendre/…) en 12 pagina's met thematische kaarten (/cartes/radar…). Elk sjabloon beantwoordt een andere intentie; geen enkele pagina is een cosmetische variant van een andere.
Eigen inhoud voor elke gemeente
Programmatische SEO faalt wanneer hij dupliceert. Elke gemeentefiche bevat haar coördinaten, haar hoogte, de normalen van het bijbehorende station en de records — waarden die werkelijk van stad tot stad verschillen.
Drie blokken gestructureerde gegevens
WebApplication (categorie weer, gratis gedeclareerd), WebSite met een SearchAction die naar de echte interne zoekfunctie wijst, en FAQPage gevoed met de vragen die op de pagina werkelijk worden behandeld.
Interne links die zinvol zijn
De footer verbindt de zestien grootste steden; elke fiche verwijst naar haar klimatologische pagina, haar kaarten en haar woordenlijst. De interne links volgen het leespad, ze zijn geen linktapijt.
Sitemap en canonicals in overeenstemming
Eén enkele canonical per pagina, een sitemap die precies de 358 geserveerde URL's opsomt. Een URL die niet in de sitemap staat, wordt niet verkend; een URL in de sitemap zonder pagina is een soft-404 die het hele domein schaadt.
Bruikbaar voor iedereen.
Sinds juni 2025 verplicht de Europese toegankelijkheidsrichtlijn (European Accessibility Act) digitale toegankelijkheid voor een groot deel van de onlinediensten. Wij regelen dat in het ontwerp, niet achteraf.
Een kaart die zonder zicht bestaat
De tekstuele beschrijving van de kaart is geen alt-attribuut: het is gegenereerde inhoud, bijgewerkt naar de getoonde tijdstap, bereikbaar met het toetsenbord en leesbaar voor spraaksynthese.
Alles met het toetsenbord
Van laag, gemeente of tijdstap wisselen, de animatie afspelen: geen enkele interactie vereist de muis. De sneltoetsen worden op het scherm uitgelegd.
Kleurenschalen getest op afwijkend kleurenzien
Elke schaal is gesimuleerd voor protanopie, deuteranopie en tritanopie. De waarden blijven te onderscheiden, en de legenda vermeldt altijd de grenzen in cijfers.
Wat er is opgeleverd.
- Home — geanimeerde kaart en zoekfunctie
- /meteo/<gemeente>-<postcode> — 180 gemeentefiches
- /climat/<station> — 141 fiches met normalen en records
- /cartes/<laag> — radar, infrarood- en zichtbaar satellietbeeld, bliksem, uv…
- /meteo-agricole — bodem, ET0, waterbalans, spuiten
- /comprendre — 16 educatieve fiches en woordenlijst
- /lune, /contact, colofon, privacy, gebruiks- en verkoopvoorwaarden, toegankelijkheid
Het verloop van het project.
Datamodel
Keuze van de openbare bronnen (Open-Meteo, IGN), normalisatie van de grootheden, quota.
Cartografie
Rooster, interpolatie, kleurenschalen, tijdschuif.
Landbouwgedeelte
ET0 FAO-56, balans P − ET0, graaddagen, Delta T, drempel Beaufort 3.
Programmatische SEO
Vier sjablonen, generatie van de 358 pagina's, sitemap, interne links.
Compliance
Colofon, voorbehoud rond de gewasbeschermingsregelgeving, toegankelijkheid, GDPR.
Wat ons vaak gevraagd wordt.
Andere projecten
AVG/GDPR-compliance & SaaSKonsent by Kayzen
Een bannerleverancier die banners audit, is rechter en partij: onafhankelijkheid wás het product.
Offensieve cybersecurity & SaaSSentinel by Kayzen
Een securityproduct verkopen aan engineers: elke bewering moest aantoonbaar zijn.
Vakmanschap & BouwBTP EA Rénovation
Zes velden, geen enkel meer: het formulier is het product.
Hetzelfde niveau van zorg, voor uw website.
Gratis audit van uw huidige website, offerte binnen 24 uur en een schriftelijke onderbouwing — zoals die u net hebt gelezen. Betaling in drie termijnen zonder extra kosten; lokale subsidies gecontroleerd vóór ondertekening.