GEOZET: Printen is voor browsers

Printen en kaartviewers, het is vaak een lastige combinatie. Lastig voor de gebruiker en/of lastig voor de ontwikkelaar. Vaak zien we oplossingen voor aparte printfuncties, die een PDF of aparte webpagina genereren bijvoorbeeld. Dit kan mooie prints opleveren. De gebruiker moet de aparte printknop dan wel weten te vinden en accepteren dat er meestal een tussenstapje nodig is. En als bouwer moet je zo’n printservice inrichten, die de PDF of aparte webpagina genereert. Hiervoor zijn er tegenwoordig gelukkig standaard open source componenten beschikbaar, zoals Mapfish of ingebouwd in GeoServer, of in viewer toolboxen. Dus de ontwikkeltijd hoeft niet al te groot te zijn.

We zien zo’n aparte printfunctie in het echt bijvoorbeeld op //ruimtelijkeplannen.nl/web-roo/. Als je op de printknop drukt, krijg je een extra scherm (tussenstap) met daarop een kleine afbeelding van hoe de print eruit komt te zien. Bij printen levert dat een mooie weergave van de kaart op. Met wat context. Die functie zelf werkt prima. Zie deze PDF maar eens als voorbeeld.

Ai, maar dan via de browser…

Voorbeeld print RuimtelijkePlannen.nl via de standaad browser printfunctieMaar wat als je als gebruiker direct print via je browser? Dat kan normaal toch ook, dus waarom nu niet? En je kan altijd die knop over het hoofd zien. Wat krijg je dan? Zie hiernaast. Die print is niet bepaald een weergave van de webpagina die je net voor je had. Vervelend als je dat gelijk geprint hebt.

Google Maps lost dit op door bij een printje dat direct via de browser gaat, een tip te geven dat je de knop Afdrukken moet gebruiken. Als je het al geprint hebt. Op zich werkt dat, wel een tikje frustrerend. Helemaal als je voor je printje eerst een trap op of af moet lopen.

Dus: waarom niet direct uit de browser?

Printen kan ook simpeler. Laten we er eens vanuit gaan dat een gebruiker een webpagina voor zich heeft, bijvoorbeeld met een kaart erop, en de inhoud van die pagina (waar het om gaat) wil printen. Veel gebruikers neigen er dan naar om de print functie van de browser te gebruiken.

Print GEOZET via de browser Zou toch mooi zijn als dat direct een mooie print oplevert? Met titel (tip: de pagina-titel misschien?) en al erbij. Zou dat niet kunnen?

Dat is precies wat je met GEOZET kan doen. Dankzij goed HTML en CSS werk, kan de GEOZET kaart met puntobjecten erop en het geopende object gelijk geprint worden. Krijg je ook de teksten erbij die bij de kaart horen.

Zo simpel is het. Geen aparte printknop, geen aparte printservice nodig. Scheelt weer software inrichten, beheren en hosten. En voor de gebruiker wel zo simpel.

Technieken: CSS en HTML.

Om dit eenvoudige printen mogelijk te maken via standaard browser functionaliteit, moet de webpagina daarvoor wel goed opgemaakt worden. GEOZET gebruikt hiervoor standaard HTML elementen en CSS, dat is alles. Deze CSS zorgt ervoor dat ook bij printen de objecten op de goede plek staan op de kaart, overbodige elementen niet geprint worden en zet de teksten (en popup informatie!) erbij. Dit vraagt om een beetje (nog geen 30 regels!) specifieke CSS voor printen. Een A4tje heeft immers een andere indeling dan een scherm en sommige afbeeldingen zijn overbodig om te printen. Als je in de broncode kijkt, zie je hiervoor een stylesheet import met media=”print” staan. Browsers kunnen hiermee overweg.

Het plaatsen van de objecten op de kaart, ook goed bij printen, is wel even een uitdaging geweest. OpenLayers, een component van de kaart van GEOZET, werkt prachtig voor het afbeelden van vectorobjecten op een interactieve kaart. Alleen als je standaard OpenLayers functionaliteit van vectorobjecten gebruikt loopt dat niet altijd helemaal vanzelf, in alle browsers. GEOZET gebruikt een andere techniek om punten te tonen op de kaart: niet met SVG, VML of wat voor vector-techniek dan ook, maar met gewone HTML elementen. En dat is juist weer prima te positioneren en verwerken tot een mooie print met CSS.

Uitproberen?

Je kan ook zelf eens kijken op //nieuwsinkaart.nl/geozetnijmegen/. Print maar eens, uit je eigen browser.