Maps in Ubiquity XForms

This sample demonstrates a number of different ways to use map controls in your forms. Currently, two controls have map realisations: output and range. To display them as a map, they must have the CSS class geolocation and be bound to a node that contains a semi-colon-separated latitude and logitude pair. All of the controls that follow are bound to an instance that looks like this:

    <xf:instance>
        <map xmlns="">
            <location>51.523811;-0.107878</location>
        </map>
    </xf:instance>

The simplest map control is output, it allows a user to zoom in and out but not to pan.

    <xf:output ref="/map/location" class="geolocation">
        <xf:label>Output:</xf:label>
    </xf:output>

The range control, on the other hand, does allow users to move the map. When a user moves the map, the updated location is then reflected in the instance data.

    <xf:range ref="/map/location" class="geolocation">
        <xf:label>Output:</xf:label>
    </xf:range>

If you increase the size of a map, Ubiquity XForms ensures that it gets adorned with whatever overlay items will comfortably fit.

    <xf:range ref="/map/location" class="geolocation" style="width: 650px; height: 400px;">
        <xf:label>Output:</xf:label>
    </xf:range>

Equally, if you decrease the size of a map, Ubiquity XForms ensures that the adornments and zoom level are reduced according to the available area.

    <xf:range ref="/map/location" class="geolocation" style="width: 100px; height: 80px;">
        <xf:label>Output:</xf:label>
    </xf:range>

The hint element, as a child of a map, is styled to be an information window that is invoked when the user clicks on the map marker.

    <xf:range ref="/map/location" class="geolocation" style="width: 400px; height: 300px;">
        <xf:label>Output:</xf:label>
        <xf:hint>webBackplane Office, Clerkenwell</xf:hint>
    </xf:range>