Interactieve webkaarten vereisen specifieke optimalisatiestappen om de zogenaamde Time to Glass (de tijd die voorbijgaat tot een webpagina op het scherm verschijnt) te verminderen. Of het nu gaat om de overheidswebsite of een nieuwssite, bezoekers willen de informatie snel tot zich nemen, ook onderweg op hun smartphone of tabletcomputer.
De diversiteit aan technieken die de NOS, Nu.nl, NRC en Volkskrant gebruikten voor de verkiezingskaarten vormde de aanleiding voor dit artikel:
- een JavaScript-bibliotheek voor interactieve kaarten
- referentiekaart samengesteld uit kaarttegels
- thematische kaart als vectorafbeelding
Deze blog gaat voor iedere techniek in op een methode om de kaartapplicatie te optimaliseren.
OpenLayers
Maak altijd je eigen, aangepaste versie van de OpenLayers JavaScript-bibliotheek voor interactieve kaarten en verwijs nooit naar het standaard API (Application Programming Interface)-bestand op de website van OpenLayers!
De compactheid van de Leaflet JavaScript-bibliotheek wordt als een van de vele redenen genoemd voor de brede toepassing en snelle opmars van Leaflet. De vergelijking van de kaart met gemiddelde WOZ-waarde op de NOS-site met Leaflet gerealiseerd (122.3 KB) met de kaart over de college-onderhandelingen van NRC op basis van OpenLayers 2 (957.6 KB) lijkt dit beeld te bevestigen.
De download van OpenLayers 2 bevat niet alleen het OpenLayers bestand van 957.6 KB, maar ook het build.py Python-script om op basis van een configuratiebestand en met behulp van Google’s Closure Compiler je eigen, aangepaste versie van OpenLayers te maken. Het configuratiebestand zorgt ervoor, dat de aangepaste versie van OpenLayers alleen die functionaliteit biedt, die nodig is voor jouw applicatie. Een handige tool om een configuratiebestand te maken is OpenLayers Instrumenter. Closure Compiler zorgt ervoor, dat de resterende functionaliteit in de aangepaste versie van Openlayers zo compact mogelijk wordt weggeschreven. Zo is de aangepaste versie van OpenLayers op deze website teruggebracht tot slechts 133.3 KB. Op een vergelijkbare manier kan je ook een eigen, aangepaste versie maken van OpenLayer 3.
Een extra stap is om niet het standaard style.css bestand uit de download van OpenLayers 2 te gebruiken, maar de specifiek voor OpenLayers benodigde CSS-regels toe te voegen aan het CSS-bestand voor je web-applicatie. Hiertoe moet in de applicatie een nieuwe kaart worden aangemaakt met `theme: null`:
var map = new OpenLayers.Map('map-canvas', { |
Kaarttegels: subdomeinen
Haal de kaarttegels voor je referentiekaart indien mogelijk van verschillende subdomeinen op om het kaartbeeld zo snel mogelijk in de browser op te bouwen. Serveer je je eigen kaarttegels? Bied deze dan via meerdere subdomeinen aan.
Browsers halen meer kaarttegels sneller op van verschillende subdomeinen geserveerd, dan van een enkel (sub-) domein. Volgens de HTTP 1.1 specificatie uit 1999 mag een browser maximaal 2 verbindingen opzetten. Inmiddels hebben browsers dit aantal verhoogd tot 6-8 verbindingen. Hierdoor kunnen browsers nu meerdere bestanden tegelijkertijd ophalen van 1 domein.
Een kaartbeeld bestaat al snel uit zo’n 24 kaarttegels. Als je ervan uitgaat, dat een gemiddelde browser tegenwoordig 6 verbindingen mag maken, dan kan je deze 24 kaarttegels in de kortst mogelijke tijd tonen door deze tegelijkertijd van verschillende subdomeinen op te halen. Dit wordt domain sharding genoemd. Let op: met meer dan 4 subdomeinen ontstaat er juist weer een vertraging.
In OpenLayers en Leaflet kan je meerdere subdomeinen opgeven, die JavaScript gebruikt om automatisch hyperlinks te maken naar de kaarttegels. Deze beperking van het aantal verbindingen is per domeinnaam, niet per IP-adres. Op de webserver maak je voor hetzelfde IP-adres dus simpelweg meerdere subdomeinen aan.
Vectorkaarten: coördinaten
Beperk bij het tekenen van een geografisch gebied op een vectorkaart niet alleen het aantal coördinaten (met een generalisatie-algoritme), maar ook de nauwkeurigheid van de coördinaten. Zijn je coördinaten geprojecteerd in RD, dan volstaan gehele getallen. Gebruik je geografische coördinaten in WGS-84, dan volstaan 6 decimalen.
De interactieve webkaart Gemiddelde WOZ-waarde in 2014 van de NOS haalt de informatie om de gemeenten te tekenen uit een apart GeoJSON-bestand. College-onderhandelingen in kaart van NRC gebruikt hiervoor een KML-bestand. De coördinaten staan hierin soms tot op 15 decimalen nauwkeurig. Die hoeveelheid decimalen suggereert niet alleen een nauwkeurigheid tot op de tiende nanometer, maar leidt ook tot onnodig grotere bestanden.
LocalFocus heeft een pragmatische invalshoek en rondt de RD-coördinaten af op honderdtallen om de bestandsgrootte te beperken. Zie bijvoorbeeld Noord- en Zuid-Holland grootste aantal alcoholsloten op Nu.nl, dat met het LocalFocus-platform is gemaakt. Let er bij het optimaliseren van coördinaten wel op, dat er geen kieren ontstaan tussen aangrenzende gebieden en dat gebieden niet onherkenbaar vervormen.
Door ten slotte het bestandsformaat TopoJSON te gebruiken worden geografische gebieden zeer compact beschreven. Bij het maken van een TopoJSON bestand kan je namelijk de nauwkeurigheid van coördinaten bepalen, de geometriën generaliseren en dubbele informatie van gedeelde grenslijnen tussen geografische gebieden worden in TopoJSON achterwege gelaten.