XRX/Map Navigation

Motivation
You would like to add map navigation to your XRX application.

Although map controls were not defined within the original XForms specification, they can be added by using a bit of JavaScript.

Method
We will use three frameworks. The XForms model will contain the following:
 * 1) XSLTForms - that enables the model, controls and bindings
 * 2) JQuery -  JQuery UI, JQuery layout - for the user interface.  This includes the controls to do pans north, south, east, west
 * 3) OpenLayers  - for the map navigation, pan and zoom functions


 * 1) A default instance that contains a search query with the min and max longitude and latitude (default).
 * 2) A place to store the response to the query (response).
 * 3) A locate instance (locate)
 * 4) A few binding statements
 * 5) A submission to get the new map data from the openmap database

Sample User Interface
This example has a simple map user interface control that allows for panning to the North/South/East/West and zoom and zoom out.



This user interface uses a JQuery object that is associated with XForms input user interface controls.

Sample Model Source
The following is stored in the XForms model:

Note that the following namespaces are used in this example:

JavaScript Imports
The Javascript libraries will come from the openstreemap.org site. We will also use some JQuery user interface controls.

Here are the static JavaScript files you will need to add.

Inline JavaScript Data
In addition to the above, the following JavaScript data must be used.

XQuery
The following is a sample of the server-side XQuery code.

will be evaluated at server side for instance:

Credits
All the work was done by Evgeny Gazdovsky. The writeup was done by Dan McCreary.