Can you talk to OGC Web Services in JSON instead of XML? You can - with Jsonix, a powerful JavaScript tool for XML <-> JSON conversion.

1. Talking to OGC Web Services
in JSON
Or How I Learned to Stop Worrying
and Love XML Processing in JavaScript
1

2. Hi, my name is …
Alexey Valikov
http://xing.to/va
https://github.com/highsource
@orless
2

3. … and I’m (also) into GIS and Web Mapping
GIS 2go
Internal apps for the Deutsche Bahn
3

4. Web Mapping means JavaScript
4

5. JavaScript speaks JSON
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
[ˈdʒeɪsən]
5

6. GIS-Services are based on OGC Standards
6

7. … specified by XML Schemas
More than 50 Schemas
More than 100 individual versions
Over 8MB and 800 individual XSD files
7

8. OGC Web Services speak XML
GetCapabilities
<wfs:WFS_Capabilities …
/>
GetFeature
<wfs:FeatureCollection …
/>
Client WFS Server
8

9. JS Apps have a communication problem
JS App WFS Server
{”JS”:”ON”} ???
XSD
9
<x:ml/>

10. Jsonix provides a solution
Mapping
10
WFS Server
{”JS”:”ON”}
Jsonix
XSD
<x:ml/>
JS App

11. What is Jsonix?
Jsonix is a powerful Open-Source JavaScript library
for XML↔JS conversion
https://github.com/highsource/jsonix
Bidirectional, type-safe, strongly-structured
Driven by declarative XML↔JS mappings…
… which can be generated from XML schemas
automatically
11

12. Further Jsonix features
Works in browsers
Works in Node.js
Works with AMD, CommonJS and without (globals)
Namespace-aware
Supports almost all of the XML Schema simple types
(including binary types and QNames)
Supports xsi:type
And much more
12

13. Jsonix Example
Parse WMS Capabilities
JSFiddle:
http://bit.do/jsonix-001
13

14. Parsing with Jsonix - Code Walk-Through
var getCapabilitiesUrl = …;
// First we create a context for XLink and WMS mappings
var context = new Jsonix.Context([XLink_1_0, WMS_1_3_0], …);
// Then we create an unmarshaller (parser)
var unmarshaller = context.createUnmarshaller();
// And finally use this unmarshaller
// to parse an XML document from the given URL
unmarshaller.unmarshalURL(getCapabilitiesUrl, function(result) {
// We’ll get results in a callback function
$('#json').html(JSON.stringify(result, null, 2));
});
14

15. Jsonix creates pretty JSON
<WMS_Capabilities …
version="1.3.0"
updateSequence="163">
<Service> … </Service>
<Capability>
<Request> … </Request>
<Exception> … </Exception>
<Layer>
…
<Layer queryable="1">…</Layer>
<Layer queryable="1" opaque="0">…</Layer>
…
</Layer>
</Capability>
</WMS_Capabilities>
{
"WMS_Capabilities": {
"version": "1.3.0",
"updateSequence": "163",
"service": { … },
"capability": {
"request": { … },
"exception": { … },
"layer": { … ,
"layer": [ … ]
}
}
}
}
15

16. … and can serialize this JSON back to XML
// Create (or reuse) the Jsonix Context
var context = new Jsonix.Context([XLink_1_0, WMS_1_3_0], …);
// Create a marshaller (serializer)
var marshaller = context.createMarshaller();
// Serialize JSON as XML string or DOM node
$('#xml').text(marshaller.marshalString(result));
16

17. The same thing without Jsonix?
OpenLayers 3: ol.format.
WMSCapabilities
JSFiddle:
http://bit.do/jsonix-002
17

18. Let’s take a closer look into the OL3 code
ol.format.WMSCapabilities
ca. 28 kB, ca 0.8 KLoC
Type-safe
Strongly-structured
Only parsing
Written manually
Super exciting code
18

19. Why yet another XML-JS tool?
19

20. Jsonix
is strongly-structured
and type-safe
And that’s unparalleled
20

21. What does “strongly-structured” mean?
<WMS_Capabilities …
version="1.3.0"
updateSequence="163">
<Service> … </Service>
<Capability>
<Request> … </Request>
<Exception> … </Exception>
<Layer> …
<!-- Just one Layer element -->
<Layer queryable="1"> … </Layer>
</Layer>
</Capability>
</WMS_Capabilities>
How should the Layer element
be represented in JSON?
As a single element or as an array?
capability.layer.layer?
capability.layer.layer[0]?
You can’t decide it just based on
the XML instance
You have to know the schema
21

22. Jsonix is strongly-structured
Jsonix knows the structure of the XML from the mapping
… and respects the defined cardinalities, element orders,
properties, naming and so on
Jsonix always produces JSON and XML-structures which
respect the definitions from the mapping
22

23. Jsonix produces reliable structures
<WMS_Capabilities …
version="1.3.0"
updateSequence="163">
<Service> … </Service>
<Capability>
<Request> … </Request>
<Exception> … </Exception>
<Layer> …
<Layer queryable="1"> … </Layer>
</Layer>
</Capability>
</WMS_Capabilities>
layer is an array:
capability.layer.layer[0]
Because the mapping says so:
23

24. Strong, reliable structures
===
simpler code
24

25. What does “type-safe” mean?
<WMS_Capabilities …
version="1.3.0"
updateSequence="163">
<Service> … </Service>
<Capability>
<Request> … </Request>
<Exception> … </Exception>
<Layer> …
<Layer queryable="1"> … </Layer>
</Layer>
</Capability>
</WMS_Capabilities>
Which type should
queryable=”1” have in JSON?
String? Number? Boolean?
You can’t decide it just based on
the XML instance
You have to know the schema
25

26. Jsonix is type-safe
Jsonix knows types of elements
and attributes from the mapping
… and converts strings from/to
these types automatically
Jsonix always produces values in
JSON and XML according to the
types defined in the mapping
26

27. Jsonix converts the types automatically
<WMS_Capabilities …
version="1.3.0"
updateSequence="163">
<Service> … </Service>
<Capability>
<Request> … </Request>
<Exception> … </Exception>
<Layer> …
<Layer queryable="1"> … </Layer>
</Layer>
</Capability>
</WMS_Capabilities>
queryable is a boolean:
{ "queryable" : true, … }
Because the mappings says so:
27

28. Safe, automatic type conversion
===
less work
28

29. Jsonix uses declarative mappings
Jsonix mappings are just descriptions of structures, not imperative programs
29

30. Mappings are essential
for strong structures
and safe typing
30

31. Jsonix can generate mappings from XSDs
Jsonix Runtime
XSD
Mapping
Jsonix Schema Compiler
{“JS”:”ON”} <x:ml/>
31

32. ..as follows
java -jar jsonix-schema-compiler.jar
-catalog schemas/catalog.cat
schemas/ogc/wms/1.3.0/capabilities_1_3_0.xsd
-b schemas
-d mappings
Generates Jsonix mappings for WMS 1.3.0:
WMS_1_3_0_Full.js
GitHub:
http://bit.do/jsonix-006
32

33. Experimental: Generate JSON Schemas from XSDs
Jsonix Runtime
XSD
Mapping
Jsonix Schema Compiler
{“JS”:”ON”} <x:ml/>
33
JSON
Schema
Experimental java -jar jsonix-schema-compiler.jar
-generateJsonSchema …

34. Experimental: Validate JSON against generated JSON Schemas
Using the great “Another JSON Schema Validator” AJV
// Load JSON Schemas
var ajv = new Ajv();
ajv.addSchema(XMLSchemaJsonSchema, … ); ajv.addSchema(JsonixJsonSchema, … );
ajv.addSchema(XLink_1_0JsonSchema, 'http://www.w3.org/1999/xlink');
// Compile the validation function and validate
var validate = ajv.compile(WMS_1_3_0JsonSchema);
if (!validate(capabilitiesElement)) { console.log(validate.errors); }
34
[{
keyword: 'required',
dataPath: '.value.capability.request.getCapabilities.dcpType['0'].http',
message: 'property .http is required'
}, … ]

35. Compiling XSDs into mappings is hard
35
By
Alex
E.
Proimos
(http://www.flickr.
com/photos/proimos/4199675334/)
[CC
BY
2.0
(http://creativecommons.org/licenses/by/2.0)],
via
Wikimedia
Commons

36. Compiling XSDs into mappings is hard
We’ve huge number of schemas with complex
interdependencies
Schemas sometimes have errors
We have to resolve naming collisions
We’re often forced to customize generation or even
patch schemas
36

37. (Unofficial) OGC Schemas Project
https://github.com/highsource/ogc-schemas
Pre-generated mapping for OGC Schemas:
JS↔XML: Jsonix mappings
Java↔XML: JAXB classes
Available via npmjs.org and Maven Central
37

38. (Unofficial) OGC Schemas Project
Compiles over 30 OGC Schemas
with more than 80 single versions
OWS, WMS, SLD, GML, Filter,
WFS, WPS, WCS, WMC, SWE,
SPS, SOS, OM, SensorML, KML,
ISO 19139, CSW, and many
more…
… ready-to-use with Jsonix
38

39. Using pre-generated mappings
var mappings = [XLink_1_0, SMIL_2_0, SMIL_2_0_Language,
GML_3_1_1, OWS_1_0_0, Filter_1_1_0, DC_1_1, DCT, CSW_2_0_2];
// Create a Jsonix context
var context = new Jsonix.Context(mappings, {
namespacePrefixes: {
"http://www.opengis.net/cat/csw/2.0.2": "csw",
"http://www.opengis.net/ogc": "ogc",
"http://www.opengis.net/gml": "gml"
}
});
JSFiddle:
http://bit.do/jsonix-007
39

40. Takeaway
Jsonix is a powerful Open-Source JavaScript library for
XML↔JS conversion
Works in browsers as well as Node.js
Bidirectional, strongly-structured and type-safe
Uses declarative XML↔JS mappings
Mappings can be generated from XML Schemas
The (unofficial) OGC Schemas Project provides ready-to-use
pre-generated mapping for many OGC Schemas
40

41. Jsonix can drastically simplify
XML processing in JavaScript apps
and thus save a lot of development effort
https://github.com/highsource/jsonix
41