Tutorial: lijnen tekenen met Fusion Tables

Onlangs publiceerde Bart Vuijk van het Noordhollands Dagblad een artikel over de kosten van wegenonderhoud in Beverwijk. In het artikel is een Fusion Tables-kaartje opgenomen die de plekken in de stad aangeeft waar dringend onderhoud nodig is. De wegen worden in het kaartje aangeduid met de bekende markers (omgekeerde ‘druppeltjes’).

Een alternatief is om de wegen aan te duiden met lijnen, of een combinatie van lijnen en markers. Deze post doet geen poging om te beschrijven wat de beste manier is om de data te visualiseren. Echter, het genoemde artikel is voor mij een reden geweest om een tutorial te schrijven die uitlegt hoe je lijnen op een kaart kunt tekenen met behulp van Fusion Tables.

Principe

Voor degenen die al eerder contouren hebben gevisualiseerd met behulp van Fusion Tabels: het is niets nieuws. Als je niet bekend bent met het visualiseren van contouren verwijs ik je graag door naar een tutorial van Jerry Vermanen. Je kunt met KML niet alleen contouren beschrijven, maar ook lijnen. Dus het enige wat je nog moet weten is hoe je een lijn kunt beschrijven in KML.

De houtje-touwtje-methode

Bepaal de lijn die je wilt tekenen en achterhaal de geolocatie van de verschillende punten. Bijvoorbeeld, je kunt de Parallelweg in Beverwijk heel grof tekenen met behulp van 4 lijnstukken (zie de kleine blauwe blokjes die de begin- en eindpunten van de lijnstukken markeren):

Bovenstaand plaatje is een screenshot van een tekenprogramma waarmee ik een lijn heb getekend in een Google Maps-kaartje.

Vervolgens moet je achterhalen wat de geocoördinaten zijn van elk blauwe blokje. Daarvoor kun je de site www.getlatlon.com gebruiken. Met behulp van genoemde site kom ik tot de volgende begin- en eindpunten:

Latitude Longitude
Punt 1 52.4737364312088 4.656057357788086
Punt 2 52.47807559175877 4.659061431884766
Punt 3 52.48110752226849 4.6712493896484375
Punt 4 52.48319838709334 4.676485061645508
Punt 5 52.48779793992096 4.680690765380859

En nu moet je deze vijf punten coderen als een aaneengesloten lijn in KML.

De KML-formule voor een lijn, bestaande uit meerdere lijnstukken, is:

<LineString><coordinates>

(punt 1 - longitude), (punt 1 – latitude)
(punt 2 – longitude), (punt 2 – latitude)
(punt 3 – longitude), (punt 3 – latitude)

etc.

</coordinates></LineString>

Let op dat de longitude voor de latitude komt!

Door de verkregen geopunten in de formule te verwerken krijg ik:

<LineString><coordinates>
4.656057357788086, 52.4737364312088
4.659061431884766, 52.478075591758774
4.6712493896484375, 52.481107522268495
4.676485061645508, 52.48319838709334
4.680690765380859, 52.48779793992096
</coordinates></LineString>

Dat komt er als volgt uit te zien in Fusion Tables:

En na wat stijlen van de lijndikte en de tekstballon is dit het resultaat:



Uiteraard is het een arbeidsintensief proces om alle lijntjes punt voor punt in te voeren. Dat kan makkelijker door lijnen te tekenen met ArcGIS Explorer Desktop en het resultaat hiervan in Fusion Tables te laden.

ArcGIS Explorer Desktop is een gratis stuk gereedschap van Esri. Met ArcGIS Explorer kun je niet alleen verschillende layers bekijken, maar ook objecten aanmaken. Het is bijvoorbeeld heel eenvoudig om met de ‘Line’-tool een aaneengesloten lijn te tekenen die uit meerdere lijnstukken bestaat.

Hieronder zie je de Parallelweg in Beverwijk. De rode lijn heb ik getekend in ArcGIS Explorer. Het tekenen van een lijn gaat behoorlijk intuïtief als je vaker met tekenprogramma’s hebt gewerkt. De popup verschijnt zodra je klaar bent met tekenen (dubbelklikken) en dit geeft je de mogelijkheid om een naam te geven aan de lijn.

Objecten die je zelf aanmaakt kun je vervolgens exporteren:



Je kunt uit verschillende exportmogelijkheden kiezen. Voor ons is het gewenste formaat KMZ. Omdat KMZ een gezipte versie is van een KML-bestand kun je eenvoudig je KML-gegevens hieruit peuteren. Maar afhankelijk van je unzip-programma moet je wellicht eerst de .kmz extensie veranderen in .zip. Via unzippen verkrijg je het bestand doc.kml. Zoek vervolgens in dit bestand naar de tekst ‘<LineString>’ en kopieer de benodigde gegevens naar je Fusion Table.

In het blauw de objectnaam en in het rood de geocoördinaten.

In het blauw de objectnaam en in het rood de geocoördinaten. Klik op het plaatje voor de volledige afbeelding.

Je ziet in bovenstaand plaatje dat posities met drie getallen worden weergegeven, waarvan de derde steeds de waarde 0 heeft. Dit is de z-coordinaat, oftewel de hoogte. Het lijkt erop dat Fusion Tables vereist dat je alle posities altijd met twee of altijd met drie coördinaten specificeert, maar niet met een combinatie van beide.

Zie hieronder een schermafbeelding van twee via Fusion Tables gevisualiseerde straten, de Plesmanweg en Parallelweg in Beverwijk:

De Plesmanweg en Parallelweg in Beverwijk

Ten slotte kun je met KML verschillende objecten combineren. We kunnen met één regel in Fusion Tables zowel de straat visualiseren (met een lijn) als de exacte positie in de straat waar onderhoud nodig is (met een marker). Dit doe je door gebruik te maken van de tag ‘MultiGeometry':



In bovenstaand voorbeeld zie je hoe je een marker kunt specificeren via de <Point>-tag en een lijn via de <LineString>-tag. Je hoeft je met MultiGeometry overigens niet te beperken tot één lijn en één marker.

Voor de Plesmanweg wordt dit:

Het resultaat van twee regels in een Fusion Table zie je hier:



Je kunt lijnen kleuren op basis van een kolomwaarde, net zoals dat met contouren kan. Je zou dus bijvoorbeeld de straten kunnen kleuren op basis van de benodigde onderhoudskosten.

Nu is het natuurlijk nog steeds bewerkelijk om met ArcGIS Explorer alle straten met de hand te tekenen. Een volgende stap is wellicht om straatinformatie uit bijvoorbeeld OpenStreetMap te halen. Maar dit is iets wat ik zelf nog nooit heb gedaan.

Deze tutorial verscheen eerder op het weblog van Eugène Tjoa.

Eugène Tjoa –

Eugène Tjoa ontwerpt en ontwikkelt interactieve grafische applicaties. Sinds 2009 houdt hij zich bezig met datavisualisaties en heeft hij opdrachten uitgevoerd voor onder andere het CBS, de NOS en de gemeente Eindhoven. Met enige regelmaat geeft hij presentaties en cursussen over dit onderwerp en blogt hij zijn cursusmateriaal bij elkaar. Ook is hij betrokken bij het organiseren van evenementen op gebieden zoals datavisualisatie en open data.

Alle artikelen van Eugène Tjoa op De Nieuwe Reporter.

  • Miriam

    Ik gebruik de gratis webdienst Scribble Maps

    http://scribblemaps.com

    Je kunt de informatie als KML-bestand opslaan en downloaden of je kunt het kaartje als JavaScript-widget in een blog opnemen. Best handig.

    Wel eerst de taal op Engels instellen (of op NL laten staan als je wilt lachen/huilen) en misschien niet met Chrome werken, want dat geeft bij mij problemen bij het invoeren van teksten.

  • Eugene Tjoa

    @Miriam:
    Goeie tip! Ik heb net even wat met Scribble Maps gespeeld en dat ziet er veelbelovend uit.