Interactieve Leaflet kaarten met FME

leafletvectormap

FME is uitermate geschikt voor het omvormen van data. FME is alleen geen tool om de data mee te presenteren voor eindgebruikers. Daar heb je andere applicaties voor nodig. Afhankelijk van het formaat heb je hiervoor ontelbare mogelijkheden, maar één formaat was daar nog geen onderdeel van: interactieve WebGIS-kaarten, gebaseerd op de open source kaartmotor Leaflet.

Daar is sinds kort verandering in gekomen door de nieuwe LeafletVectorMap transformer. Deze transformer, die vrij beschikbaar is via de FME Hub, vormt vectordata automatisch om naar een webpagina.

FME Hub

Eerst wat meer informatie over de FME Hub. Deze hub bevat allerlei functies die door FME-gebruikers zelf zijn gemaakt. Daarmee worden ze vrij toegankelijk voor iedereen die ze wil gebruiken. Dit kunnen custom transformers zijn, zoals de LeafletVectorMap, maar bijvoorbeeld ook workspace-templates of custom formats. Custom transformers kun je op dezelfde manier gebruiken als normale transformers; ze zijn direct toegankelijk vanuit FME-workbench. Sinds begin dit jaar heb ik nog een paar transformers meer in de FME Hub geplaatst, namelijk de BGT-downloader en de InlineGeoJSON transformer. Die laatste transformer is overigens ook onderdeel van de LeafletVectorMap transformer.

LeafletVectorMap

Dan de transformer zelf. Deze heeft een flink aantal parameters. Daarmee kun je de uiteindelijke kaartjes precies vormgeven zoals jij het wilt, zonder een regel code te typen. Zo kun je een eigen ondergrond kiezen, de styling van de punten/lijnen/vlakken, maar ook de informatie die je in de popup wilt tonen.

Eindresultaat

Uiteindelijk kun je de meest uiteenlopende kaartjes maken. Zo kan de transformer alle data groeperen op één kaart, of opsplitsen naar een aparte pagina per object. Hieronder een paar snelle screenshots van een paar tests. Over het algemeen is de webpagina voor mijn projecten ook weer een tussenstap. Met nog een andere custom transformer HTML2PDFConvertor vorm ik de HTML-pagina om tot een volwaardige PDF. Het grote voordeel is dat ik op deze manier de vrijheid heb die Leaflet met HTML me geeft, in combinatie met de rapportage-mogelijkheden van een PDF.

Voorbeeld met random punten en vlakken gecombineerd met een custom tooltip
Voorbeeld van een kaartje met een simpel vlak, zonder popup of tooltip ingeschakeld

Feedback

Ik ben er van overtuigd dat de transformer nog op diverse punten kan worden verbeterd. Ondertussen is de transformer al een aantal keer gedownload door andere gebruikers. Ik ben erg benieuwd naar de feedback!

Share on facebook
Share on twitter
Share on linkedin