GeoJSON

Een nieuw vector formaat voor web-based GIS Bart van den Eijnden OSGIS

Inhoud

JSON GeoJSON Performance: transport- en parseertijd Best practices in web-based GIS

OpenLayers GeoExt Proj4JS

Voorbeeld project: GEOZET

Over mezelf

1999 afgestudeerd Fysische Geografie Utrecht 5 jaar Geodan Sinds 2005 eenmanszaak OSGIS Gespecialiseerd in open standaarden en open source GIS Onderdeel van de OpenGeoGroep

Wat is JSON?

JSON = JavaScript Object Notation Tekst gebaseerd Leesbaar Lichtgewicht Ondersteuning in vrijwel elke programmeertaal Meer info op: http://www.json.org

JSON voorbeeld
{

"gemeentes": [
{"naam": "Deurne", "inwonertal": 30000}, {"naam": "Utrecht", "inwonertal": 300000} ] }

JSON in meer detail

Verkorte schrijfwijze voor nieuw object: {} Verkorte schrijfwijze voor nieuw array: [] Key value pairs (properties) Gebruik dubbele quote voor strings, escape middels \ dus \

GeoJSON

Hoe encodeer ik geografische gegevens in JSON?

Geometrie Feature Collectie van features

Opgesteld in 2008 door een aantal bedrijven (o.a. MetaCarta, OpenGeo, Cadcorp) Wordt gebruikt in meer dan 20 projecten waaronder FME en Twitter

GeoJSON: geometrie types

Point LineString Polygon MultiPoint MultiLineString MultiPolygon GeometryCollection

GeoJSON objecten

type property is verplicht en bevat het geometrie type danwel Feature of FeatureCollection crs property is optioneel en bevat info over het Coordinate Reference System. Volgorde x,y(,z) bbox property is optioneel Geometrie objecten behalve de GeometryCollection dienen een coordinates property te hebben

GeoJSON: Point
{ "type": "Point", "coordinates": [100.0, 0.0] }

GeoJSON: LineString
{ "type": "LineString", "coordinates": [ [100.0, 0.0], [101.0, 1.0] ] }

GeoJSON: Polygon
{ "type": "Polygon", "coordinates": [ [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ], [ [100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2] ] ] }

1e element: outerRing 2e en volgende elementen: innerRing

GeoJSON: GeometryCollection
{ "type": "GeometryCollection", "geometries": [ { "type": "Point", "coordinates": [100.0, 0.0] }, { "type": "LineString", "coordinates": [ [101.0, 0.0], [102.0, 1.0] ] } ] }

GeoJSON: real-life voorbeeld

http://osgis.nl/tmc/data/gemeentes.json

Alternatieve formaten

GML = Geography Markup Language = XML KML = Keyhole Markup Language = XML SVG = Scalable Vector Graphics = XML

Voordeel: vaak geen transformatie nodig in de browser (Internet Explorer vanaf 9, Firefox, Safari, Chrome)

EWKT = extended Well-Known Text EWKB = extended Well-Known Binary

Wat bepaalt de keuze?

Transport-tijd

Hoe groter het bestand, hoe langer het transport duurt naar de client. M.a.w. hoe kleiner de payload, hoe beter. Denk aan GZIP!

Parseertijd Tijd om te renderen in de browser (eventuele transformatie)

Rendering

Renderen van features in de browser is nu de bottleneck: paar 100 features maximaal. In 2010 komt 2D/3D hardware acceleratie in de browser:

Firefox 4 Internet Explorer 9 Google Chrome

Dit wordt een revolutie voor web-based GIS: native javascript gaat richting Flash!

Payload onderzoek
Bron:
http://www.tokumine.com/2010/09/20/gis-data-payload-sizes/

Op de x-as: payload in bytes. Hoe kleiner hoe beter!

Gemeten parseertijden

Gemeentekaart CBS Laat Geoserver output generen, plaats dit op een localhost Apache Gemiddelde van 5 runs Geen Internet Explorer want alleen in VMWare beschikbaar op Mac OSX, geen eerlijke vergelijking! Let op: OpenLayers gebruikt momenteel niet de native JSON parser van de browser, zie ook: http://trac.osgeo.org/openlayers/ticket/1807

Parseertijden Mac OSX (ms)

1800 1600

1400

1200

1000 JSON GML

800

600

400

200

0 Firefox 3.6.10 Safari 5.0.2 Chrome 6.04 Opera 10.62

Probeer het zelf

http://osgis.nl/tmc/tmc.html?format=GEOJSON http://osgis.nl/tmc/tmc.html?format=GML

Best practices

OpenLayers GeoExt Proj4JS All-in-one: OpenGeo Suite!

OpenLayers

De-facto standaard javascript bibliotheek voor webmapping Ondersteunt vele typen lagen zoals Google Maps, Bing Maps, OpenStreetMap, WMS, WMTS, TMS, WMS-C, WFS Zeer ruime OGC ondersteuning: WMS, WFS, WFS-T, WMTS, Web Map Context, OWSContext, SLD, SOS Ondersteunt vele formaten: GML, KML, GeoJSON, GeoRSS, GPX

OpenLayers

Beste manier om OpenLayers te leren is middels de vele examples: http://www.openlayers.org/dev/examples/

GeoExt

GeoExt koppelt OpenLayers aan Ext JS Ext JS is een dual-licensed (GPL v3 en commercieel) javascript (GUI) framework Een voorbeeld is een GeoExt.MapPanel welke een brug vormt tussen een Ext.Panel en een OpenLayers.Map GeoExt maakt de redelijk basische OpenLayers GUI tot een fancy GUI!

GeoExt

MapPanel LegendPanel ZoomSlider Layer trees (table of content) Toolbars Interactie met de MapFish print service (PDF output)

GeoExt voorbeeld: Styler

GeoExt voorbeeld: GeoExplorer

GeoExt voorbeeld: GeoEditor

Proj4JS

Javascript poort van Proj.4 (Frank Warmerdam) OpenLayers komt standaard met alleen transformaties tussen EPSG:4326 en de Google Web Mercator Bijna alle andere CRS-en zoals RD zijn beschikbaar via Proj4JS Je kan dus in je browser transformeren tussen CRS-en, maar het is natuurlijk efficinter om dit aan de serverkant te doen

Voorbeeld project: GEOZET

Geografische zoek- en toondienst Voor Geonovum in opdracht van ICTU (Binnenlandse zaken) Generieke viewer en geocoder interface, in eerste instantie bedoeld om bekendmakingen van o.a. gemeentes in beeld te brengen. Maakt gebruikt van jQuery, Ext JS, GeoExt en OpenLayers. Accessibility is erg belangrijk!

GEOZET

Server-side clustering op provincie, gemeente en wijk niveau (in PostGIS database) Client-side clustering voor individuele bekendmakingen wanneer deze te dicht op elkaar liggen

GEOZET

GEOZET

GEOZET

Samenvatting [1/2]

GeoJSON is een encoding van geografische objecten in JSON GeoJSON is geen standaard van het Open Geospatial Consortium Payload van GeoJSON is relatief groot, maar verschillen zijn klein

Samenvatting [2/2]

Parseertijd van JSON is normaal gesproken kleiner dan van XML, maar situatie verschilt per browser Vector rendering zou in de nieuwe generatie browsers veel sneller moeten gaan De OpenGeo Suite is een one-click installer voor een hele interessante Open Source GIS stack (PostGIS, GeoServer, GeoWebCache, OpenLayers, GeoExt)

Vragen?
bartvde@osgis.nl 06-42233115