JSON-FG Example

Introduction

This is an example of how JSON-FG data can be shown in an Openlayers map. It shows the shape of Dutch municipality borders over time.
The website is built as vanilla javascript, without a compilation step. This makes it easier for beginner programmers to get it running.

Repository:
github.com/Geonovum/json-fg-examples

Notes:

Openlayers has Geojson support but that is not enough for the time and coordinate system additions of JSON-FG. To make this possible a custom JSON-FG format is included that partially implements JSON-FG.
The format only supports time.interval from JSON-FG. If the data in the JSON-FG editor on the right uses time.date or time.timestamp, the timeslider does not function.

GDAL docs on the JSON-FG standard:
https://gdal.org/drivers/vector/jsonfg.html.

Create JSON-FG

Run the following GDAL command to convert your GML to JSON-FG. This requires GDAL >3.8

ogr2ogr -f "JSONFG" output.jsonfg input.gml

For me it looked like this:


          "C:\Program Files\QGIS 3.34.3\bin\ogr2ogr.exe" -f "JSONFG"
          ./bgt_kunstwerkdeel.jsonfg
          https://raw.githubusercontent.com/Geonovum-labs/test-ogc-json-fg/main/testdata/bgt/citygml/bgt_kunstwerkdeel.gml

It is also possible to use another input format, for example GeoPackage.

JSON-FG editor

Edit your JSON-FG here, the layer is automatically updated.

Transformation editor

Add the transformation string for the coordinate system of your JSON.

CRS:

You can find these here: epsg.io

By default openlayers knows how to convert coordinates between: EPSG:4326 (WGS84) and EPSG:3857 (Web Mercator). More info: ol.proj.Projection.

More specifically, OpenLayers uses the Proj4.js library to do the transformations. For all other coordinate systems proj4 will need a transformation string. These are maintained by the EPSG. They have a page per coordinate system with details and more relevant for us, the transformation strings.

The tranformation is added like this:

proj4.defs("EPSG:28992", "+proj=sterea +lat_0=52.1561605555556
          +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000
          +ellps=bessel
          +towgs84=565.4171,50.3319,465.5524,1.9342,-1.6677,9.1019,4.0725
          +units=m +no_defs +type=crs");