Geomap Feature guide - nschonni/wet-boew GitHub Wiki

français

Table of Contents Description Benefits Recommended usage Potential risks Minimum requirements 3rd party software distributed with this feature How to install the files How to implement this feature Options QueryResults plugin Options Version history Help improve this feature

This feature adds a Web map to your page through a simple wrapper for OpenLayers (http://www.openlayers.org/). Anything that is possible with OpenLayers, is also possible with the Geomap feature. The Geomap plugin adds accessibility features on top of OpenLayers. This is a work in progress.

• Inserts dynamic maps into any Web page
• Can load map tiles, overlays, and markers from most local or remote sources
• Can perform geographic look-ups
• Can include a toolbar for drawing custom overlays
• Can include geo-tagged RSS feeds
• Supports WMS and WFS protocols
• Conforms to WCAG 2.0 AA
• Progressive enhancement approach
• Uses WAI-ARIA to enhance accessibility
• Supports Firefox, Opera, Safari, Chrome, and IE 7+

• Displaying information on a map
• Providing a map-based interface

• Maps help to present data visually which in some cases may be hard to describe to assistive technologies.
• Possible copyright and licensing issues with using third party resources such as tiles, imagery, and data.
• Possible risk that the use of third party resources could be perceived as an endorsement of the owners of those resources.

• "WET core framework":http://tbs-sct.ircan.gc.ca/projects/gcwwwtemplates/wiki/How_to_implement_the_WET_core_framework
• JavaScript support

• "OpenLayers":http://openlayers.org/ - "Clear BSD license":http://svn.openlayers.org/trunk/openlayers/license.txt
• "Proj4js":http://trac.osgeo.org/proj4js/ - "LGPL license":http://www.gnu.org/copyleft/lesser.html
• "Yahoo! User Interface Library 3 ":http://developer.yahoo.com/yui/3/ - "BSD license":http://svn.openlayers.org/trunk/openlayers/license.txt

1. Copy *js\lib\geomap\* to *js\lib\* in the WET core framework
2. Copy *js\lib\wmat\ to js\lib\* in the WET core framework
3. Copy *js\plugins\wet-boew.geomap.js* to *js\plugins\* in the WET core framework
4. Copy *js\plugins\wet-boew.geomapQueryresults.js* to *js\plugins\* in the WET core framework
5. Copy *js\support\geomap\* to *js\support\* in the WET core framework

1. Add *geomap: {id:'geomap'}* to the *params var* in the progressive enhancement section of the Web page:

var params = {
geomap: {id:'geomap'}
};

1. Add *class="geomap"* to the block-level element that will hold the map.
2. A default theme is provided by OpenLayers in */js/support/geomap/theme/default/*. You can either customize the default theme or create a new theme (recommended).
3. Optional: Create a directory in */js/support/geomap/theme/* for the new theme.
4. Optional: Add *theme:'<theme></theme>'* to *geomap* in the *params var* of the progressive enhancement section of the Web page:

var params = {
geomap: {id:'geomap', theme:'<theme directory name>'}
}&#59;

1. The Geomap feature creates an *OpenLayers.Map* object that is referenced by the *map* variable. Use the OpenLayers API to add map data and other features. All custom code must be put in config files in the */js/lib/geomap/* directory. There should be a different config file for each language that is supported.
2. Add *codeToRun:'<config></config>'* to *geomap* in the *params var* of the progressive enhancement section of the Web page:

var params &#61&#59; &#123&#59;
geomap&#58&#59; &#123&#59;id&#58&#59;&#39&#59;geomap&#39&#59;, codeToRun&#58&#59;&#39&#59;&lt&#59;config file name&gt&#59;&#39&#59;&#125&#59;
&#125&#59;&#59&#59;

{direction:ltr}(open parent). |_.Option|_.Value|_.Default|_.Description| {direction:ltr}(odd). |.codeToRun|.String|.|.Name of the config file that contains the code for customizing the *OpenLayers.Map* map object (through the *map* variable). The config file must be put in the */js/lib/geomap/* directory. There should be a different config file for each language that is supported.| {direction:ltr}(even). |.theme|.String|.default|.Name of the directory that contains the theme files. The directory must be in */js/support/geomap/theme/*. For a working example of a custom theme, compare http://dev.openlayers.org/sandbox/sbeorchia/openlayers/theme/default/ with the default theme.| {direction:ltr}(odd). |.api|.String|.|.Comma separated list of API URLs to load before the map. The list must be a URL-encoded string. For example, if you want to load the Google and Yahoo APIs, you would use *apis: encodeURIComponent('http://maps.google.com/maps?file=api&v=2&key=abcdefg1234,http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=myapp')* replacing the values for "key" and "appid" with your own key and appid.|

1. Add geomapQueryresults: {} to the *params var* in the progressive enhancement section of the Web page:

var params &#61&#59; &#123&#59;
geomapQueryresults&#58&#59; &#123&#59;&#125&#59;
&#125&#59;&#59&#59;

1. Add restServiceUrl:'<rest></rest>' to geomap in the params var of the progressive enhancement section of the Web page:

var params &amp&#59;&#35&#59;61&#59&#59; &amp&#59;&#35&#59;123&#59&#59;
geomap&amp&#59;&#35&#59;58&#59&#59; &amp&#59;&#35&#59;123&#59&#59; restServiceUrl&amp&#59;&#35&#59;58&#59&#59; &amp&#59;&#35&#59;39&#59&#59;&amp&#59;lt&#59&#59;rest service url to query&amp&#59;gt&#59&#59;&amp&#59;&#35&#59;39&#59&#59;&amp&#59;&#35&#59;125&#59&#59;
&amp&#59;&#35&#59;125&#59&#59;&amp&#59;&#35&#59;59&#59&#59;

1. Add layerNumber:'<number></number>' to geomap in the params var of the progressive enhancement section of the Web page:

var params &amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;61&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;123&amp&#59;&#35&#59;59&#59&#59;
geomap&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;58&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;123&amp&#59;&#35&#59;59&#59&#59; restServiceUrl&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;58&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;39&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;lt&amp&#59;&#35&#59;59&#59&#59;rest service url to query&amp&#59;amp&#59&#59;gt&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;39&amp&#59;&#35&#59;59&#59&#59;, number of the layer to query&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;58&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;lt&amp&#59;&#35&#59;59&#59&#59;number of the layer to query&amp&#59;amp&#59&#59;gt&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;125&amp&#59;&#35&#59;59&#59&#59;
&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;125&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;

1. Add lang:'<application></application>' (either 'en' or 'fr') to geomap in the params var of the progressive enhancement section of the Web page:

var params &amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;123&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;
geomap&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;58&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;123&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; restServiceUrl&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;58&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;39&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;rest service url to query&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;39&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;, number of the layer to query&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;58&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;number of the layer to query&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;, lang&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;58&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; &amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;39&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;en&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;39&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;125&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;
&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;125&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;59&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;

1. In the example we are using a set of dummy data points and query them using two parameters: province names and a company name. To implement the example, add an *id="queryProvinceSelector"* select control filled with province names.

&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;select id&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;queryProvinceSelector&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; multiple&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;multiple&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;
&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;option value&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;AB&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; selected&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;selected&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;Alberta&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;/option&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;                                  
&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;option value&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;BC&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;British Columbia&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;/option&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;
…
&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;option value&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;YT&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;Yukon Territory&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;/option&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;                                
&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;/select&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;

1. Add an *id="queryCompanyNameTextbox"* input control.

&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;input type&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;text&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; id&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;queryCompanyNameTextbox&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; /&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;

1. Add a corresponding *id="queryExecuteButton"* submit button.

&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;input type&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;submit&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; id&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;queryExecuteButton&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; value&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;Find&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; /&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;

1. Optional: Add an *id="queryResetButton"* reset button.

&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;lt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;input type&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;submit&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; id&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; queryResetButton&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; value&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;35&amp&#59;&#35&#59;59&#59&#59;61&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;Reset&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;quot&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59; /&amp&#59;amp&#59&#59;amp&amp&#59;&#35&#59;59&#59&#59;gt&amp&#59;amp&#59&#59;&amp&#59;&#35&#59;35&#59&#59;59&amp&#59;&#35&#59;59&#59&#59;

1. To use a different data set, you may need to add/modify query controls and change the way a query string is constructed in the wet-boew.geomapQueryresults.js file.

{direction:ltr}(open parent). |_.Option|_.Value|_.Default|_.Description| {direction:ltr}(odd). |.restServiceUrl|.String|.|.The url of the REST service that contains the data points to be queried.| {direction:ltr}(even). |.layerNumber|.Integer|.|.The number of the layer to be queried.| {direction:ltr}(odd). |.lang|.String|.|.Locale to be used by the plugin.|

{direction:ltr}(open parent). |_.Version|_.Date released|_.Highlights| {direction:ltr}(even). |/8.1.3|/8.2012-02-06|Added more context to "Show more" links by including addition information hidden with CSS.| {direction:ltr}(even). |Map now zooms to show all displayed data points| {direction:ltr}(even). |Using aria-live="polite" to help identify what changes when a "Show more" link is clicked.| {direction:ltr}(even). |Now the content of "Base Layer" and "Overlay" labels is set manually depending on the current locale.| {direction:ltr}(even). |Moved the search controls below the map in the three-column layout.| {direction:ltr}(even). |The "show more" links now include additional information hidden by CSS to give more context.| {direction:ltr}(even). |Replaced the select control for selecting provinces with a group of checkboxes.| {direction:ltr}(even). |Updated to v1.0 of the GC Web Usability theme and v1.3 of the CLF 2.0 theme| {direction:ltr}(odd). |/6.1.2|/6.2011-08-08|Added ability to search for data points on the map with the search results provided in a separate data table.| {direction:ltr}(odd). |Added one and two column example pages| {direction:ltr}(odd). |Corrected validation errors with malformed br elements| {direction:ltr}(odd). |Now loading the keyboard message from the script rather than hardcoding in the page| {direction:ltr}(odd). |Corrected the wording of the keyboard message| {direction:ltr}(odd). |Updated to the latest versions of the HTML5 core markup structure and the CLF 2.0 theme| {direction:ltr}(even). |/4.1.1|/4.2011-02-07|Replaced Yahoo! / Google maps with Atlas of Canada WMS in default version| {direction:ltr}(even). |Updated to OpenLayers version 2.10| {direction:ltr}(even). |Fixed keyboard accessibility issues | {direction:ltr}(even). |Fixed language detection issue| {direction:ltr}(odd). |1.0|2010-08-09|Initial release |

This feature was built through open collaboration. You can help to improve this feature by reporting issues or by contributing to the project.