Een simpele HTML lijst of tabel op de kaart. In no-time.

Stel, je hebt op de website van je organisatie een eenvoudige lijst of tabel staan met de verschillende kantoorlocaties. Of een lijst met de laatste opdrachtgevers, goede schaatslocaties of wat dan ook. Kortom: een lijst met gegevens, die ook een locatie hebben.

Laten we eens een lijst opstellen, voor het idee, van enkele ministeries:

  • Ministerie van Algemene Zaken
    Binnenhof 19
    Postbus 20001
    2500 EA Den Haag
  • Ministerie van Buitenlandse Zaken
    Bezuidenhoutseweg 67
    2594 AC Den Haag
  • Ministerie van BZK
    Turfmarkt 147
    2511 DP DEN HAAG
  • Ministerie van Defensie
    Plein 4
    2511 CR  Den Haag

“Prachtig zo’n lijst, maar ik wil een kaart.” hoor je dan wel eens. Hoe kan ik dat eenvoudig doen, met wat standaard webtechnieken? Dus zonder allerlei zware tools, als GIS viewers met toeters en bellen of geo-databases. En het liefst de HTML wel houden, want wat als iets (zoekmachine) of iemand niets met die kaart kan en toch de informatie wil lezen (denk aan de toegankelijkheid ­čÖé ).

W3C vocabulary, RDFa voor de co├Ârdinaten en een paar regels script

Voor dergelijke toepassingen, waarbij je “alleen maar een eenvoudig kaartje wilt”, kan je gebruik maken van wat toevoegingen aan de HTML code van de lijst en een paar handige JavaScript bibliotheken. Hieronder de uitwerking ervan. Als je gelijk de demo wilt zien, kan je op //nieuwsinkaart.nl/leaflet/ kijken, ook voor de broncode.

De HTML code van de lijst hierboven ziet er ongeveer zo uit:

<ul>
<li>
Ministerie van Algemene Zaken<br />
Binnenhof 19<br />
Postbus 20001<br />
2500 EA Den Haag</li>

We kunnen hieraan de coordinaten (in latitude en logitude, zoals bekend van GPS bijvoorbeeld) aan toevoegen. Bijvoorbeeld door gebruik te maken van een W3C vocabulary en zogenaamde RDFa informatie aan de HTML code toevoegen. Die vocabulary declareren we in de eerste HTML tag van de lijst en vervolgens per list-item voeg je de latitude en longitude toe. Toegeven, die moet je eerst opzoeken, maar daar gaat het nu even niet om.

<ul xmlns:geo=”//www.w3.org/2003/01/geo/wgs84_pos#”>
<li┬á property=”geo:lat_long” content=”52.079312,4.315917″>
Ministerie van Algemene Zaken<br />
Binnenhof 19<br />
Postbus 20001<br />
2500 EA Den Haag</li>

Van zichzelf doen deze co├Ârdinaten weinig. Maar wat wel kan: nu de HTML afbeelden op een kaart. Met een paar regels Javascript, de import van LeafletJS en jQuery is dat zo gepiept.

Progressive enhancement

Met die JavaScript code wordt de HTML “uitgelezen” en afgebeeld op een kaartje. Dat kaartje krijg je alleen te zien, als je browser de mogelijkheden daarvoor heeft. Progressive enhancement heet dat. Een van de zaken die toegankelijkheid kan verbeteren.

Demo

Op de demoserver //nieuwsinkaart.nl/leaflet/ het bewijs. Met de lijst automatisch verborgen als je javascript aan hebt staan (en de kaart dus kan zien) en getoond als je javascript uitzet.

(Let op: voor demo-doeleinden heb de rest van de HTML gelaten voor wat mijn CMSje daarvan maakt.)