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 efficiënter 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