---
{
	"title": "Geomap",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Displays a dynamic map over which information from additional sources can be overlaid.",
	"altLangPrefix": "geomap",
	"dateModified": "2017-11-30"
}
---
<span class="wb-prettify all-pre hide"></span>

<ul>
	<li><a href="#purpose">Purpose</a></li>
	<li><a href="#use-when">Use when</a></li>
	<li><a href="#working-example">Working example</a></li>
	<li><a href="#how-to-implement">How to implement</a></li>
	<li><a href="#events">Events</a></li>
	<li><a href="#upgrade-notes">Upgrade Notes for v4.0.31</a></li>
	<li><a href="#filtering">Filtering</a></li>
	<li><a href="#jsAPI">WET-BOEW Geomap Javascript API</a></li>
	<li><a href="#source-code">Source code</a></li>
</ul>

<section>
	<h2 id="purpose">Purpose</h2>
	<p>Displays a map over which information from additional sources can be overlaid.</p>
</section>

<section>
	<h2 id="use-when">Use when</h2>
	<ul>
		<li>You want to display a dynamic map with data overlays</li>
		<li>You want to display a static map</li>
	</ul>
</section>

<section>
	<h2 id="working-example">Working example</h2>
	<ul>
		<li><a href="../../../demos/geomap/geomap-en.html">English example</a></li>
		<li><a href="../../../demos/geomap/geomap-fr.html">French example</a></li>
		<li><a href="../../../demos/geomap/geomap-v4.0.30-en.html">On and prior v4.0.30 - English example</a></li>
		<li><a href="../../../demos/geomap/geomap-v4.0.30-fr.html">On and prior v4.0.30 - French example</a></li>
	</ul>
</section>


<span class="wet-boew-prettify all-pre"></span>
<section>
	<h2 id="how-to-implement">How to implement</h2>
	<ol>
		<li>Add a <code>div</code> element with <code>class="wb-geomap"</code> and assign it a unique <code>id</code>.
		<li>Add <code>div</code> with <code>class="wb-geomap-map"</code> to the <code>div</code> created in step 1 where you want the map to be rendered.</li>
		<li>Add <code>div</code> with <code>class="wb-geomap-layers"</code> to the <code>div</code> created in step 1 where you want the layer(s) listing to be rendered.</li>
	</ol>

	<h3>Optional elements</h3>
	<ul>
		<li><strong>Add legend:</strong> If a map legend is required add <code>div</code> with <code>class="wb-geomap-legend"</code> to the <code>div</code> created in step 1 where you want it to be rendered.</li>
		<li><strong>Add widgets:</strong> Widgets (e.g. position, scaleline, etc.) are configured using classes on the plugin element created in step 1.</li>
	</ul>

	<div class="alert alert-info"><strong>Note:</strong> If you are implementing the working example on your development environment you may need to add the necessary support for the mime-types required by the various formats demonstrated (e.g. ".kml" "application/vnd.google-earth.kml+xml") to your web server.</div>

	<h3>Example implementation markup</h3>
	<pre><code>&lt;-- Add plugin with optional position widget --&gt;
&lt;div id="mygeomap" class="wb-geomap position"&gt;
	&lt;div class="row"&gt;
		&lt;div class="col-md-9"&gt;
			&lt;div class="wb-geomap-map"&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;-- Add optional map legend --&gt;
		&lt;div class="wb-geomap-legend col-md-3"&gt;
			&lt;h2&gt;Legend&lt;/h2&gt;
			&lt;-- Geomap will insert legend here --&gt;
		&lt;/div&gt;
		&lt;div class="row"&gt;
			&lt;-- Add placeholder for overlays --&gt;
			&lt;div class="wb-geomap-layers col-md-12"&gt;&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
<!--
	<section>
		<h3>File based (e.g. "config-en.js") configuration example</h3>
		<pre><code>var wet_boew_geomap = {
	basemap : {
		title: 'CBMT',
		type: 'wms',
		url: 'https://geogratis.gc.ca/maps/CBMT',
		layers: 'CBMT',
		format: 'image/png',
		version: '1.1.1'
	},
	overlays : [
		{
			title: 'KML Demo EN',
			caption: 'This is a sample KML file loaded locally by Geomap.',
			type: 'kml',
			url: 'data/sample.kml',
			visible: true
		},
		{
			...
		}
	]
};</code></pre>
	</section>
-->


	<section>
		<h3>Plugin configuration options</h3>
		<p>Geomap can be configured in four ways:</p>
		<ul>
			<li>Using the <code>data-wb-geomap</code> attribute on the plugin element</li>
			<li>Using <code>window[ "wb-geomap" ]</code></li>
			<li>Using a configuration file</li>
			<li>Using CSS classes on the plugin element</li>
		</ul>
		<div class="alert alert-info"><strong>Note:</strong> all plugin configuration parameters are optional.</div>
		<section>
			<h4>Configuration using <code>data-wb-geomap</code> attribute on plugin element</h4>
			<p>Use the <code>data-wb-geomap</code> attribute to configure the display of map features from inline HTML tables or from a local/remote datasource.</p>
			<table class="table">
				<thead>
					<tr>
						<th scope="col">Parameter</th>
						<th scope="col">Value</th>
						<th scope="col">Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><code>tables</code></td>
						<td>Array</td>
						<td>An array if inline HTML table id's from which map features are to be loaded and their configurations.</td>
					</tr>
					<tr>
						<td><code>layersFile</code></td>
						<td>String</td>
						<td>Path to local or remote JavaScript configuration file that lists feature layers that are to be added to the map.</td>
					</tr>
					<tr>
						<td><code>mapExtent</code></td>
						<td>String</td>
						<td>Text containing the Latitude and Longitude coordinate of the bounding box in the following order:
							<ol>
								<li>Latitude of bottom-left corner</li>
								<li>Longitude of bottom-left corner</li>
								<li>Latitude of top-right corner</li>
								<li>Longitude of top-right corner</li>
							</ol>
							For example: "63, -110, 50, -128"
						</td>
					</tr>
				</tbody>
			</table>
		</section>

		<section>
			<h4>Configuration using a configuration file</h4>
			<p>An optional configuration file can be used to specify alternative basemaps and external feature overlays. The configuration file is referenced in the <code>data-wet-beow</code> attribute of the plugin element by setting the <code>layersFile</code> property to the file path.</p>
			<table class="table">
				<thead>
					<tr>
						<th scope="col">Parameter</th>
						<th scope="col">Value</th>
						<th scope="col">Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><code>basemap</code></td>
						<td>JavaScript Object</td>
						<td>A base map configuration that includes map settings (e.g., maximum and default extents, units, projection, etc.) and connection specifics for a WMS base map service.</td>
					</tr>
					<tr>
						<td><code>overlays</code></td>
						<td>Array</td>
						<td>A list of layers to be added to the map with associated configurations.</td>
					</tr>
				</tbody>
			</table>
			<h5>Example configuration file reference</h5>
			<pre><code>&lt;div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "layersFile": "data/config-en.js" }'&gt; ... &lt;/div&gt;</code></pre>
		</section>

		<section>
			<h4>Configuration using CSS classes</h4>
			<p>Configure which features and widgets you want added to your map by using CSS classes.</p>
			<table class="table">
				<thead>
					<tr>
						<th scope="col">Class</th>
						<th scope="col">Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><code>aoi</code></td>
						<td>
							<p>If present, an area-of-interest (AOI) widget is added to the map. The AOI widget allows user to draw a bounding box extent to the map where the coordinates are made available in a hidden field that developers can attach a listener to. Useful for search and discovery applications.
								AOI should be used when the map takes the full width of content page.
							</p>
							<p>Geomap will write the AOI extent to two hidden fields, one in the maps projection and the other in longitude/latitude.</p>
							<pre><code>&lt;input type="hidden" id="geomap-aoi-extent-1" value="553816,1951915,2188045,3573694"&gt;
&lt;input type="hidden" id="geomap-aoi-extent-lonlat-1" value="-73, 65, -39, 76"&gt;</code></pre>
							<p>Access the values of the hidden fields by attaching a listener to the "change" event.</p>
							<pre><code>var $document = wb.doc, mapSample;

$document.on( "wb-ready.wb-geomap", "#sample_map", function( event, map ) {

	// Get the sample_map to use in zoomFeature function
	mapSample = map;
	var $aoiExtent = $( "#geomap-aoi-extent-" + mapSample.id ),
		$aoiExtentLonLat = $( "#geomap-aoi-extent-lonlat-" + mapSample.id );

	if ( $aoiExtent ) {

		$aoiExtent.on( "change", function() {
			console.log( "BBox: " + $( this ).val() );
		} );

		$aoiExtentLonLat.on( "change", function() {
			console.log( "BBox LonLat: " + $( this ).val() );
		} );
	}
} );</code></pre>
							<p>The AOI widget can be configured (v4.0.11+) so that it is enabled by default by setting the <code>toggle</code> property to false using the <code>data-wb-geomap</code> attribute on plugin element.</p>
							<pre><code>&lt;div id="mygeomap" class="wb-geomap" data-wb-geomap='{ ... "aoi": { "toggle": false } ... }'&gt; ... &lt;/div&gt;</code></pre>
							<p>The AOI widget can be configured(v4.0.11+) with an initial extent by setting the <code>extent</code> property using the <code>data-wb-geomap</code> attribute on plugin element.</p>
							<pre><code>&lt;div id="mygeomap" class="wb-geomap" data-wb-geomap='{ ... "aoi": { "toggle": false, , "extent": "-57, 46, -51, 50" } ... }'&gt; ... &lt;/div&gt;</code></pre></td>
					</tr>
					<tr>
						<td><code>aoi-open</code></td>
						<td>If present, the area-of-interest (AOI) widget will rendered inside a panel instead of being rendered inside an expand/collapse.</td>
					</tr>
					<tr>
						<td><code>geocoder</code></td>
						<td>If present, the geocoder widget will be added to the map. The geocoder widget allows users to search for postal codes, street addresses, placenames and NTS sheet numbers. The map is panned and zoomed to the location selected.</td>
					</tr>
					<tr>
						<td><code>geolocation</code></td>
						<td>If present, the geolocation widget will be added to the map. When activated, the map will be panned and zoomed to the location of the client. Note that users must allow their client to share its location with Geomap.</td>
					</tr>
					<tr>
						<td><code>position</code></td>
						<td>If present, the mouse position widget will be shown in the lower left corner of the map.</td>
					</tr>
					<tr>
						<td><code>scaleline</code></td>
						<td>If present, the scale line widget will be shown in the lower left corner of the map.</td>
					</tr>
					<tr>
						<td><code>static</code></td>
						<td>If present, the widgets (pan, zoom, select, etc.) will not be added to the map. This is useful for scenarios where a simple map with one or more features is required to communicate some value or idea (e.g. an extent map for a data product).</td>
					</tr>
					<tr>
						<td><code>legend-label-only</code></td>
						<td>If present and if there is only one legend item within a certain layer, the symbol description will be hidden (as it can be the same as the label). In which case, the title of the layer must represent the legend item.</td>
					</tr>
					<tr>
						<td><code>two-cols-legend</code></td>
						<td>Distribute the legend elements over two columns on medium screens and larger.</td>
					</tr>
				</tbody>
			</table>
			<p><strong>Configuration class example:</strong></p>
			<pre><code>&lt;div id="mygeomap" class="wb-geomap position scaleline"&gt; ... &lt;/div&gt;</code></pre>
		</section>
	</section>


	<section>
		<h3>Basemap configuration options</h3>
		<p>Note: Geomap does not require a base map configuration. A default base map will be provided if none is configured.</p>
		<table class="table">
			<thead>
				<tr>
					<th scope="col">Parameter</th>
					<th scope="col">Required</th>
					<th scope="col">Value</th>
					<th scope="col">Default</th>
					<th scope="col">Description</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><code>title</code></td>
					<td>Yes</td>
					<td>String</td>
					<td>''</td>
					<td>The title of the base layer (not displayed)</td>
				</tr>
				<tr>
					<td><code>type</code></td>
					<td>Yes</td>
					<td>String</td>
					<td>''</td>
					<td>The type of datasource. Note that this must be 'wms'.</td>
				</tr>
				<tr>
					<td><code>url</code></td>
					<td>Yes</td>
					<td>String</td>
					<td>''</td>
					<td>The url of the WMS service providing the base map. For example 'https://geogratis.gc.ca/maps/CBMT'.</td>
				</tr>
				<tr>
					<td><code>layers</code></td>
					<td>No</td>
					<td>String</td>
					<td>''</td>
					<td>A comma delimited string of layer ids to be requested from the WMS service.</td>
				</tr>
				<tr>
					<td><code>format</code></td>
					<td>Yes</td>
					<td>String</td>
					<td>''</td>
					<td>The mime-type of the format to be requested of the WMS service.</td>
				</tr>
				<tr>
					<td><code>version</code></td>
					<td>Yes</td>
					<td>String</td>
					<td>''</td>
					<td>The version of the WMS service being requested.</td>
				</tr>
				<tr>
					<td><code>options</code></td>
					<td>No</td>
					<td>Array</td>
					<td>''</td>
					<td>A comma delimitated array of OpenLayers options for WMS layer types.</td>
				</tr>
				<tr>
					<td><code>mapOptions</code></td>
					<td>No</td>
					<td>Array</td>
					<td>''</td>
					<td>An array of OpenLayers map configuration options.</td>
				</tr>
			</tbody>
		</table>

		<section>
			<h4>Basemap configuration example</h4>
			<pre><code>basemap : {
	title: 'CBMT',
	type: 'wms',
	url: 'https://geogratis.gc.ca/maps/CBMT',
	layers: 'CBMT',
	format: 'image/png',
	version: '1.1.1',
	options: { singleTile: true, ratio: 1.0, projection: 'EPSG:3978', fractionalZoom: true },
	mapOptions: {
		maxExtent: '-3000000.0, -800000.0, 4000000.0, 3900000.0',
		maxResolution: 'auto',
		projection: 'EPSG:3978',
		restrictedExtent: '-3000000.0, -800000.0, 4000000.0, 3900000.0',
		units: 'm',
		displayProjection: 'EPSG:4269',
		numZoomLevels: 12
	}
}</code></pre>
		</section>
	</section>

	<section>
		<h3>Adding feature overlays</h3>
		<p>Feature overlays can be generated from page markup (i.e. HTML tables) or from external sources (e.g. feeds, KML, web API's).

		<section>
			<h4>Adding features from an HTML table in the page</h4>
			<p>Geomap can create features from HTML markup in the page. </p>
			<h5>Steps:</h5>
			<ol>
				<li>Add a unique <code>id</code> to each table (e.g. "myTable") and ensure that each table row (i.e. <code>tr</code>) element has the required attributes. See below for configuration.</li>
				<li>
					Add the unique <code>id</code> created in step 1 to a <code>tables</code> array in the <code>data-wb-geomap</code> attribute of the plugin element.
					<pre><code>&lt;div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "tables": [ { "id": "myTable", "style": { ... } } ] }'&gt; ... &lt;/div&gt;</code></pre>
				</li>

			</ol>

			<h5>Inline HTML table configuration</h5>
			<p>Geomap requires a <code>data-geometry</code> attribute with feature geometry encoded in <strong>Well Known Text (WKT)</strong> or as a bounding box extent with lower left and upper right coordinate pairs, and a <code>data-type</code> attribute that specifies the encoding as either <code>wkt</code> or <code>bbox</code>.</p>
			<section>
				<h5>WKT examples</h5>
				<pre><code>&lt;tr data-geometry="POINT (-114.05879 1.04668)" data-type="wkt"&gt; ... &lt;/tr&gt;</code></pre>
				<pre><code>&lt;tr data-geometry="LINESTRING (30 10, 10 30, 40 40)" data-type="wkt"&gt; ... &lt;/tr&gt;</code></pre>
				<pre><code>&lt;tr data-geometry="POLYGON ((30 10, 10 20, 20 40, 40 40, 30 10))" data-type="wkt"&gt; ... &lt;/tr&gt;</code></pre>
				<p>Other geometry types are supported. See <a href="https://en.wikipedia.org/wiki/Well-known_text">Well-known text</a> for more examples.</p>
			</section>

			<section>
				<h5>Bbox example</h5>
				<pre><code>&lt;tr data-geometry="-136, 61, -118, 70" data-type="bbox"&gt; ... &lt;/tr&gt;</code></pre>
			</section>

			<section>
				<h5>Inline HTML table configuration example</h5>
				<pre><code>&lt;table id="cities" aria-label="Cities"&gt;
	&lt;caption&gt;Major cities in Canada.&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Rank&lt;/th&gt;
			&lt;th&gt;Census subdivision&lt;/th&gt;
			&lt;th&gt;Population 2011&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr data-geometry="POINT (-79.3847 43.6476)" data-type="wkt"&gt;
			&lt;td&gt;1&lt;/td&gt;
			&lt;td class="select"&gt;
				&lt;a href="../Toronto" title="Toronto"&gt;Toronto&lt;/a&gt;
			&lt;/td&gt;
			&lt;td&gt;2615060&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr data-geometry="POINT (-73.56123 45.52927)" data-type="wkt"&gt;
			&lt;td&gt;2&lt;/td&gt;
			&lt;td class="select"&gt;
				&lt;a href="../Montreal" title="Montreal"&gt;Montreal&lt;/a&gt;
			&lt;/td&gt;
			&lt;td&gt;1649519&lt;/td&gt;
		&lt;/tr&gt;
		...
	&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
			</section>
			<p>Note that attribute names for features rendered from an inline HTML table are taken from the table header. In the preceding example the table header would result in attributes named "Rank", "Census subdivision", and "Population 2011".</p>

		</section>

		<section>
			<h4>Adding features from external datasources via a configuration file</h4>
			<h5>Steps:</h5>
			<ol>
				<li>Create a Javascript configuration file and save it to a web accessible directory (e.g. "data/config-en.js").</li>
				<li>Add an <code>overlays</code> array to the <code>wet_boew_geomap</code> variable in the configuration file.
				<pre><code>// Configuration file ("data/config-en.js")
var wet_boew_geomap = {
	overlays : [
		{
			title: 'KML Demo EN',
			caption: 'This is a sample KML file loaded locally by Geomap.',
			type: 'kml',
			url: 'data/sample.kml',
			visible: true
		},
		{ ... }
	]
};</code></pre></li>
				<li>Reference the configuration file in the <code>data-wb-geomap</code> attribute of the plugin element by setting the <code>layersFile</code> property to the file path.
				<pre><code>&lt;div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "layersFile": "data/config-en.js" }'&gt; ... &lt;/div&gt;</code></pre></li>
			</ol>
		</section>

		<section>
			<h4>Feature overlay configuration options</h4>
			<table class="table">
				<thead>
					<tr>
						<th scope="col">Parameter</th>
						<th scope="col">Required</th>
						<th scope="col">Value</th>
						<th scope="col">Default</th>
						<th scope="col">Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><code>attributes</code></td>
						<td>No</td>
						<td>Array</td>
						<td>''</td>
						<td>An array of feature attributes to be displayed in the table with their aliases. For example: <code>attributes: { location_desc: 'Location', longitude: 'Latitude', latitude: 'Longitude', updated_at: 'Last updated' }</code>. If the required attributes are not at the root element you can specify a path to the attribute. For example: <code>attributes: { title: { path: "properties", alias: "Title" } }</code></td>
					</tr>
					<tr>
						<td><code>caption</code></td>
						<td>Yes</td>
						<td>String</td>
						<td>''</td>
						<td>The description of the overlay to be displayed in the table caption of the page.</td>
					</tr>
					<tr>
						<td><code>datatable</code></td>
						<td>No</td>
						<td>Boolean</td>
						<td>''</td>
						<td>If true the feature table will be enhanced using the Tables plugin which provides sorting, paging and searching functions.</td>
					</tr>
					<tr>
						<td><code>params</code></td>
						<td>No</td>
						<td>Array</td>
						<td>''</td>
						<td>An array of parameters to send to the datasource/service. For example: <code>params: { 'alt': 'json', 'q': 'alluvial' }</code>. These will be added to the request URI.</td>
					</tr>
					<tr>
						<td><code>popups</code>
						<td>No</td>
						<td>Boolean</td>
						<td>''</td>
						<td>If true popups for features will be enabled. Note that the "<code>popupsInfo</code>" parameter allows for customization of the popup and its content.</td>
					</tr>
					<tr>
						<td><code>popupsInfo</code></td>
						<td>No</td>
						<td>String</td>
						<td>''</td>
						<td>Allows for customization of popup content. Has several configuration options: "<code>height</code>" in pixels, "<code>width</code>" in pixels, "<code>close</code>" which if set to <code>true</code> will result in a close button being rendered, and "content" which can contain any HTML markup desired.</td>
					</tr>
					<tr>
						<td><code>root</code></td>
						<td>No</td>
						<td>String</td>
						<td>''</td>
						<td>Name of the root element that contains the array of objects that contain the features to be rendered.</td>
					</tr>
					<tr>
						<td><code>style</code></td>
						<td>No</td>
						<td>Array</td>
						<td>''</td>
						<td>An OpenLayers style object. Unique and rule based styles are supported. Note that Geomap will assign a default style if none is provided. However, the default color combination may not have the contrast required to meet WCAG guidelines. Therefore, a style should be configured before going into production.</td>
					</tr>
					<tr>
						<td><code>tooltips</code> (v4.0.31+)</td>
						<td>Yes</td>
						<td>Boolean</td>
						<td>''</td>
						<td>If true, feature tooltips will be displayed.</td>
					</tr>
					<tr>
						<td><code>tooltipText</code> (v4.0.31+)</td>
						<td>Yes</td>
						<td>String</td>
						<td>''</td>
						<td>The name of the attribute field where tooltip text will be taken from.</td>
					</tr>
					<tr>
						<td><code>title</code></td>
						<td>Yes</td>
						<td>String</td>
						<td>''</td>
						<td>The title of the overlay to be displayed in the legend, table, and/or the page.</td>
					</tr>
					<tr>
						<td><code>type</code></td>
						<td>Yes</td>
						<td>String</td>
						<td>''</td>
						<td>The type of datasource for the overlay. Must be one of: kml, json, geojson, wms, topojson (v4.0.31+), esrijson (v4.0.31+).</td>
					</tr>
					<tr>
						<td><code>url</code></td>
						<td>Yes</td>
						<td>String</td>
						<td>''</td>
						<td>The url of the datasource. For example 'https://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst'.</td>
					</tr>
					<tr>
						<td><code>visible</code></td>
						<td>No</td>
						<td>Boolean</td>
						<td><code>false</code></td>
						<td>Controls the visibility of the overlay. Note that without a legend the visibility of an overlay can't be changed.</td>
					</tr>
					<tr>
						<td><code>zoom</code></td>
						<td>No</td>
						<td>Boolean</td>
						<td>''</td>
						<td>If true a "Zoom to feature" button will be added to each row in the feature table.</td>
					</tr>
				</tbody>
			</table>

			<section>
				<h4>Feature overylay configuration example</h4>
				<pre><code>{
	attributes: {
		location_desc: 'Location',
		longitude: 'Latitude',
		latitude: 'Longitude',
		updated_at: 'Last updated'
	},
	caption: 'Traffic cameras in the city of Ottawa.',
	datatable: true,
	params: {
		'format': 'GeoJSON',
		'q': 'SELECT * FROM traffic_cameras LIMIT 25'
	},
	style: { ... },
	tab: true,
	title: 'Traffic Cameras',
	type: 'geojson',
	url: 'https://stephenott.cartodb.com/api/v2/sql',
	visible: true,
	zoom:  true
}</code></pre>
			</section>



		<section>
			<h4>Style configuration options</h4>
			<section>
				<h5>Basic style example - all features using the same style</h5>
				<pre><code>style: {
	'strokeColor': '#ff0000',
	'fillColor': '#ff0000',
	'fillOpacity': '0.4'
}</code></pre>
			</section>

			<section>
				<h5>Style example with override for selected feature</h5>
				<pre><code>style: {
	type: 'symbol',
	init: { 'pointRadius': '15', 'externalGraphic': '../icon.png' },
	select: { 'pointRadius': '15', 'externalGraphic': '../icon_selected.png' }
}</code></pre>
			</section>

			<section>
				<h5>Rule based example - features are styled according to specified rules</h5>
				<pre><code>style: {
	type: 'rule',
	rule: [
		{
			field: 'Population2011',
			value: [ 1000000 ],
			filter: 'LESS_THAN',
			init: { strokeColor: '#0083f5', fillColor: '#57a8f0', pointRadius: '6' }
		},
		{
			field: 'Population2011',
			value: [ 1000000, 2000000 ],
			filter: 'BETWEEN',
			init: { strokeColor: '#F90', fillColor: '#F90', pointRadius: '8' }
		},
		{
			field: 'Population2011',
			value: [ 2000000 ],
			filter: 'GREATER_THAN',
			init: { strokeColor: '#F00', fillColor: '#F00', pointRadius: '10' }
		}
	]
}</code></pre>
			</section>

			<section>
				<h5>Unique style example - features have unique style based on an attribute</h5>
				<pre><code>style: {
	type: 'unique',
	field: 'Location',
	init: {
		// using the value from the 'Location' attribute, create a unique style for each feature
		'Bayshore & Richmond': { 'fillColor': '#000099' },
		'Baseline & Greenbank': { 'fillColor': '#009900' }
	},
	// specify a style for selected features (optional). Note here we are adding a label when
	// a feature is selected.
	select: { 'fillColor': '#990000', 'label': '${ Location }' }
}</code></pre>
			</section>
		</section>

		<section>
			<h4>Popup Configuration Options</h4>
			<p>To add popup with no customization simply add <code>"popups": true</code>. By default popups contain the same information as that is displayed in the corresponding table row for the feature.</p>
			<p>If you need more control over your popups, you can customize them by passing a configuration through the "<code>popupsInfo</code>" parameter. The "<code>popupsInfo</code>" "<code>content</code>" parameter can contain any HTML markup you desire. Where feature attributes are required to be rendered simply add the attribute name with an underscore at the beginning. For example, if you have a feature attribute named "Census subdivision" you would reference it in your popup content as "_Census subdivision".</p>
			<p>The following example shows all available configuration options:</p>
			<pre><code>...
"popups": true,
"popupsInfo": {
	"id": "citiesPopup",
	"height": 200,
	"width": 300,
	"close": true,
	"content": "&lt;h4&gt;_Census subdivision&lt;/h4&gt;&lt;p&gt;_Population 2011&lt;/p&gt;"
},
...</code></pre>
		</section>
	</section>
	</section>
	<section>
		<h3>Adding WMS Overlays (v4.0.11+)</h3>
		<p>Geomap will not generate an HTML table of map features for WMS overlays. Consequently WMS overlays should only be used when feature based alternatives are not available as accessibility is severly compromised.</p>
	<pre><code>
{
	title: "WMS Demo",
	caption: "This is a sample WMS service loaded by Geomap.",
	type: "wms",
	url: "https://geo.weather.gc.ca/geomet/?Lang=E",
	visible: false,
	version: "1.1.1",
	format: "image/png",
	layers: "GDPS.ETA_PR",
	transparent: true,
	options: {
		opacity: 0.5
	}
}
	</code></pre>

	<section>
		<h4>WMS Legend</h4>
		<p>Geomap supports both graphic and HTML legends. WMS overlay legends can be configured in the <code>options</code> property of the layer configuration.</p>
		<section><h5>Graphic legend example:</h5>
		<pre><code>...
options: {
	...
	legendGraphicUrl: "https://geo.weather.gc.ca/geomet/?Lang=E&amp;LAYERS=GDPS.ETA_PR&amp;VERSION=1.1.1&amp;FORMAT=image%2Fpng&amp;SERVICE=WMS&amp;REQUEST=GetLegendGraphic&amp;STYLE=PRECIPMM"
	...
}
...</code></pre>
		</section>
		<section><h5>HTML legend example:</h5>
		<pre><code>...
options: {
	...
	legendHTML: "<small>GeoMet Precipitation (mm)</small>" +
		"&lt;ul class='list-unstyled'&gt;" +
		"&lt;li&gt;&lt;span style='background-color:#800000;display:inline-block;height:20px;width:20px'/&gt; &lt;small&gt;100.0&lt;/small&gt;&lt;/li&gt;" +
		"&lt;li&gt;&lt;span style='background-color:#FF0000;display:inline-block;height:20px;width:20px'/&gt; &lt;small&gt;50.0&lt;/small&gt;&lt;/li&gt;" +
		"&lt;li&gt;&lt;span style='background-color:#FFA500;display:inline-block;height:20px;width:20px'/&gt; &lt;small&gt;20.0&lt;/small&gt;&lt;/li&gt;" +
		"&lt;li&gt;&lt;span style='background-color:#E5E500;display:inline-block;height:20px;width:20px'/&gt; &lt;small&gt;10.0&lt;/small&gt;&lt;/li&gt;" +
		"&lt;/ul&gt;"
	...
}
...</code></pre>
		</section>
	</section>
	</section>
	<section>
		<h3>Advanced Configuration</h3>
		<p>Geomap provides developers with a hook to access the OpenLayers Map object. This can be useful if you have specific functionality that Geomap does not support out of the box. Geomap fires an event when it has loaded that you can attach a listener to.</p>
		<p>Once Geomap has loaded, the OpenLayers Map object can be accessed as follows:</p>
		<section>
			<h4>Pre v4.0.5</h4>
			<pre><code>// return an array of OpenLayers maps in the page
wb.doc.on( "geomap.ready", function( event, maps ) {
	var myMap = maps.mygeomap; // return map with specfic id
	// do something
});</code></pre>
			<p>Note that the <code>id</code> (e.g. "mygeomap") of the <code>div</code> that contains the instance of Geomap you are accessing is used as the key in the maps array.</p>
			<p>For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:</p>
			<pre><code>&lt;script&gt;
	wb.doc.on( "geomap.ready", function( event, maps ) {
		var myMap = maps.mygeomap;
		myMap.zoomToExtent( myMap.getLayer( "#bbox" ).getDataExtent(), true );
	});
&lt;/script&gt;</code></pre>
		</section>
		<section>
			<h4>v4.0.5+</h4>
			<pre><code>// get the map object with id "mygeomap"
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	var myMap = map; // return OpenLayers map object
	// do something
});</code></pre>
			<p>Note the <code>id</code> (e.g. "mygeomap") of the <code>div</code> that contains the instance of Geomap you are accessing.</p>
			<p>For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:</p>
			<pre><code>&lt;script&gt;
	$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
		// Get the map to use in zoomFeature function
		var myMap = map;
		myMap.zoomToExtent( myMap.getLayer( "#bbox" ).getDataExtent(), true );
	});
&lt;/script&gt;</code></pre>
		</section>
		<section>
			<h4 id="get-map-obj-with-id">v4.0.31+</h4>
			<pre><code>// get the map object with id "mygeomap"
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	var myMap = map; // return OpenLayers map object
	// do something
});</code></pre>
			<p>Note the <code>id</code> (e.g. "mygeomap") of the <code>div</code> that contains the instance of Geomap you are accessing.</p>
			<p>For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:</p>
			<pre><code>&lt;script&gt;
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	// Get the map to use in zoomFeature function
	var myMap = map;
	myMap.getView().setCenter( -75.70535, 45.3995 );

	// if reprojection is needed
	// myMap.getView().setCenter( ol.proj.transform( [ -75.70535, 45.3995 ], "EPSG:4326", "EPSG:3978" ) );

	myMap.getView().setZoom( 5 );
});
&lt;/script&gt;</code></pre>
		</section>
	</section>

	<h3 id="filtering">Filtering</h3>

	<p>You can apply the following filter:</p>
	<ul>
		<li><strong>Area Of Interest</strong>: [<code>aoi</code>] Zoom the map to an specific area (extent).</li>
		<li><strong>Layer (Overlays)</strong>: [<code>layer</code>] Select a specific layer (overlays) to diplay on the map</li>
	</ul>

	<p>Implementation requirement:</p>
	<ul>
		<li>Add a <code>&lt;form&gt;</code> with the CSS class <code>wb-geomap-filter</code></li>
		<li>On that form element, add an attribute <code>data-bind-to</code> where it's value is the id of geomap on which the filtering are going to be applied</li>
		<li>Add <code>&lt;select&gt;</code> element with an <code>data-filter</code> attribute specifying the type of filtering.</li>
		<li>Set the value for each <code>&lt;option&gt;</code> element as per the type filter</li>
		<li>Set the default selected <code>&lt;option&gt;</code> by adding the <code>selected</code> attribute to one option</li>
	</ul>


	<div class="row">
		<div class="col-md-6">
			<h4><code>data-fitler="aoi"</code></h4>

			<p>The value of the option is as 4 cardinal point (North East South West) or as <a href="https://en.wikipedia.org/wiki/Well-known_text_representation_of_geometry">Well-known text (WKT)</a> if there is any letter. For example:</p>
			<ul>
				<li><code>value="60 -120 48 -139"</code></li>
				<li><code>value="POLYGON((-78.30545265676142 62.84207638792185,-79.79959328176142 51.57292655739278,-79.18435890676142 46.810536399556135,-76.45974953176142 45.655468008018055,-75.58084328176142 45.961790800827984,-74.87771828176142 45.47086564114406,-74.96560890676142 44.97562684884711,-71.44998390676142 44.97562684884711,-69.16482765676142 47.349194267123444,-68.19803078176142 47.349194267123444,-64.33084328176142 48.35181916125691,-55.80545265676142 52.00783331541157,-67.31912453176142 52.16984334247954,-64.24295265676142 60.85236662687351,-78.30545265676142 62.84207638792185))"</code></li>
			</ul>
			<p>You can use the geomap draw box tool to calculate the 4 cardinal point and for <a href="https://en.wikipedia.org/wiki/Well-known_text_representation_of_geometry">WKT</a> you can find some online tool that could generate it for you.</p>
		</div>

		<div class="col-md-6">
			<h4><code>data-filter="layer"</code></h4>
			<p>The value of the option should match one of the geomap layer/overlay title. If left empty, all the layers would be selected.</p>
		</div>
	</div>
</section>

<section>
	<h2 id="jsAPI">WET-BOEW Geomap Javascript API</h2>

	<p>Note: The Javascript API documentation bellow is incomplete. If you have any question please open a github issue.</p>

	<h3>Retrieve the geomap object</h3>
	<dl>
		<dt>Via <code>wb</code> javascript object</dt>
		<dd>See the above <a href="#get-map-obj-with-id">technical note for wet-boew 4.0.31+ release</a></dd>
		<dt>Via the <code>.wb-geomap</code> DOM element</dt>
		<dd><pre><code>var geomap = $( ".wb-geomap" ).get( 0 ).geomap;</code></pre></dd>
	</dl>

	<h3><code>geomap</code> Object</h3>
	<p>Options:</p>
	<ul>
		<li><code>target</code>: jQuery element pointing to the <code>.wb-geomap</code> DOM element</li>
		<li><code>settings</code>: All settings/configuration set for that map. It include setting set through a javascript configuration files</li>
	</ul>
	<p>Instance properties:</p>
	<dl class="dl-horizontal">
		<dt><code>id</code></dt>
		<dd>Id of the geomap DOM element.</dd>
		<dt><code>layerDiv</code></dt>
		<dd>JQuery pointer to the layer <code>&lt;div&gt;</code> DOM element</dd>
		<dt><code>legend</code></dt>
		<dd><code>MapLegend</code> object</dd>
		<dt><code>legendDiv</code></dt>
		<dd>jQuery pointer to the legend <code>&lt;div&gt;</code> DOM element</dd>
		<dt><code>map</code></dt>
		<dd>OpenLayer 3 map object</dd>
		<dt><code>mapDiv</code></dt>
		<dd>jQuery pointer to the map <code>&lt;div&gt;</code> DOM element</dd>
		<dt><code>mapLayer</code></dt>
		<dd>Array of <code>mapLayer</code> object</dd>
		<dt><code>settings</code></dt>
		<dd>All settings/configuration set for that map. It include setting set through a javascript configuration files</dd>
	</dl>
	<p>Prototype:</p>
	<ul>
		<li><code>accessibilize</code></li>
		<li><code>addBasemap</code></li>
		<li><code>addMapLayers</code></li>
		<li><code>addTabularData</code></li>
		<li><code>createPopup</code></li>
		<li><code>loadControls</code></li>
		<li><code>showLayer</code></li>
		<li><code>zoomAOI</code>: Zoom the map to an Area Of Interest
			<p>Mixed parameters:</p>
			<ul>
				<li><code>.zoomAOI()</code> - none: Zoom to the max zoom</li>
				<li><code>.zoomAOI( "POLYGON((11 11, 22 22))" )</code> - &lt;string&gt; (containing letters): Will parse the string as a WKT string</li>
				<li><code>.zoomAOI( "11 22 33 44" )</code> - &lt;string&gt; (numbers/decimals and spaces): Assume there is 4 space separated cardinal point in this exact sequence: North, East, South, West.</li>
				<li><code>.zoomAOI( 11, 22, 33, 44)</code> - 4 &lt;decimal&gt; parameter: Decimal cardinal point in this exact sequence:  North, East, South, West.</li>
			</ul>
		</li>
	</ul>

	<h3><code>MapLayer</code> Object</h3>
	<p>Options:</p>
	<ul>
		<li><code>map</code>: <code>Geomap</code> object</li>
		<li><code>options</code>: All settings/configuration set for that map. It include setting set through a javascript configuration files</li>
	</ul>
	<p>Instance properties:</p>
	<dl class="dl-horizontal">
		<dt><code>id</code></dt>
		<dd>Uniquer identifier set for that layer</dd>
		<dt><code>layer</code></dt>
		<dd>OpenLayer layer Vector object</dd>
		<dt><code>map</code></dt>
		<dd><code>Geomap</code> object</dd>
		<dt><code>observeVisibility</code></dt>
		<dd>Add callback for when the layer visibility change</dd>
		<dt><code>settings</code></dt>
		<dd>All settings/configuration set for that map. It include setting set through a javascript configuration files</dd>
		<dt><code>visibilityState</code></dt>
		<dd>Boolean indicating if the layer is visible or not.</dd>
	</dl>
	<p>Prototype:</p>
	<ul>
		<li><code>addToLegend</code></li>
		<li><code>createOLLayer</code></li>
		<li><code>populateDataTable</code></li>
	</ul>

	<h3><code>MapLegend</code> Object</h3>
	<p>Options:</p>
	<ul>
		<li><code>map</code>: <code>Geomap</code> object</li>
	</ul>
	<p>Instance properties:</p>
	<dl class="dl-horizontal">
		<dt><code>map</code></dt>
		<dd><code>Geomap</code> object</dd>
		<dt><code>symbolMapArray</code></dt>
		<dd>Array of Open Layer map for symbol</dd>
		<dt><code>target</code></dt>
		<dd>JQuery pointer to the legend <code>&lt;div&gt;</code> DOM element</dd>
	</dl>
	<p>Prototype:</p>
	<ul>
		<li><code>getSymbol</code></li>
		<li><code>refresh</code></li>
		<li><code>symbolize</code></li>
	</ul>
</section>

<section>
	<h2 id="events">Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>

			<tr>
				<td><code>wb-init.wb-geomap</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-geomap" ).trigger( "wb-init.wb-geomap" );</code>).</td>
				<td>Used to manually initialize the Geomap plugin. <strong>Note:</strong> The Geomap plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-geomap</code> (v4.0.5+)</td>
				<td>Triggered automatically after Geomap initializes.</td>
				<td>Used to identify the element where Geomap has initialized (target of the event) and to pass along the map object.
					<pre><code>$( document ).on( "wb-ready.wb-geomap", ".wb-geomap", function( event, map ) {
});</code></pre>
					<pre><code>$( ".wb-geomap" ).on( "wb-ready.wb-geomap", function( event, map ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-updated.wb-geomap</code> (v4.0.5+)</td>
				<td>Triggered automatically after Geomap updates (e.g., change in zoom).</td>
				<td>Used to identify the element where Geomap has been updated (target of the event) and to pass along the map object.
					<pre><code>$( document ).on( "wb-updated.wb-geomap", ".wb-geomap", function( event, map ) {
});</code></pre>
					<pre><code>$( ".wb-geomap" ).on( "wb-updated.wb-geomap", function( event, map ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
	<h3>Filtering</h3>
	<p>A form with the CSS class <code>.wb-geomap-filter</code></p>
	<dl class="dl-horizontal">
		<dt><code>submit</code> (form)</dt>
		<dd>Apply geomap filter for select input with a <code>data-filter</code> attribute</dd>
		<dt><code>click (reset button)</code></dt>
		<dd>Apply the default selection for select input with a <code>data-filter</code> attribute</dd>
	</dl>
</section>

<section>
	<h2 id="upgrade-notes">Upgrade Notes for v4.0.31</h2>
	<p>Since WET 4.0.31 we updated geomap to use to OpenLayers v3.20.1. Existing configurations are supported with few exceptions. OpenLayers 3 was a complete rewrite of the library and as such any interactions with the OpenLayers Map Object in your applications will need to be rewritten to use the <a href="https://openlayers.org/en/v3.20.1/apidoc/">OpenLayers v3.20.1 API</a>.</p>
	<p>The following datasource formats are no longer supported.</p>
	<ul>
		<li>ATOM</li>
		<li>GeoRSS</li>
	</ul>
	<p>WellKnownText POINT features with commas won't be supported in the future. Remove all commas in WellKnownText POINT features.</p>
</section>

<section>
	<h2 id="source-code">Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/geomap">Geomap plugin source code on GitHub</a></p>
</section>
