---
{
	"title": "Geomap - prior v4.0.30",
	"language": "en",
	"category": "Plugins",
	"description": "Displays a dynamic map over which information from additional sources can be overlaid.",
	"tag": "geomap",
	"parentdir": "geomap",
	"altLangPrefix": "geomap-v4.0.30",
	"js": ["v4.0.30/demo/client_functions"],
	"dateModified": "2014-07-22"
}
---
<span class="wb-prettify all-pre hide"></span>

<section class="alert alert-warning">
	<h2>Notice - Working example on this page</h2>
	<p>Please note all the following example are now deprecated since v4.0.31 and we recommend to update your geomap markup and code as per the <a href="geomap-en.html">latest working example</a>. The examples in this page should be taken as test example to ensure subsequent version of WET 4.0.x are continuing to work how the geomap bellow were coded.</p>
</section>

<section>
	<h2>Dynamic map example</h2>

	<!-- GeomapStart -->
	<div id="sample_map"
		class="wb-geomap position scaleline tab geocoder geolocation aoi"
		data-wb-geomap='{
			"layersFile": "v4.0.30/demo/config-en{{environment.suffix}}.js",
			"tables": [{
				"id": "bbox",
				"tab": false,
				"zoom": true,
				"visible": false,
				"popups": true
			},{
				"id": "cities",
				"zoom": true,
				"tab": false,
				"popups": true,
				"visible": true,
				"popupsInfo": {
					"id": "citiesPopup",
					"height": 200,
					"width": 300,
					"close": true,
					"content": "<div style=\"white-space:nowrap;\"><p><strong>Census subdivision: </strong>_Census subdivision<div><a href=\"#\" class=\"button\" role=\"button\" title=\"Zoom to city\" aria-label=\"Zoom to city\" onclick=\"wb.doc.zoomFeature()\">Zoom to city</a></div></div>"
				},
				"style": {
					"type": "rule",
					"rule": [
					{
						"field": "Rank",
						"value": [3],
						"filter": "GREATER_THAN",
						"init": {
							"strokeColor": "#0083f5",
							"fillColor": "#57a8f0",
							"pointRadius": 6,
							"fillOpacity": 0.80,
							"strokeWidth": 1.0
						}
					},
					{
						"field": "Rank",
						"value": [2, 3],
						"filter": "BETWEEN",
						"init": {
							"strokeColor": "#F90",
							"fillColor": "#F90",
							"pointRadius": 8,
							"fillOpacity": 0.80,
							"strokeWidth": 1.0
						}
					},
					{
						"field": "Rank",
						"value": [1],
						"filter": "EQUAL_TO",
						"init": {
							"strokeColor": "#F00",
							"fillColor": "#F00",
							"pointRadius": 10,
							"fillOpacity": 0.80,
							"strokeWidth": 1.0
						}
					}
				]}
			}]
		}'>

		<div class="row">
			<div class="col-md-9">
			<!-- Insert Map Start (mandatory) -->
			<div class="wb-geomap-map"></div>
			<!-- Insert Map End -->
			</div>

			<!-- Insert Legend Start (optional) -->
			<section class="wb-geomap-legend col-md-3">
				<h3>Legend</h3>
			</section>
			<!-- Insert Legend End -->
		</div>

		<div class="row">
			<section class="col-md-12">
				<h3>Example - Remote &amp; File-based Layer Data</h3>
				<p>Layers are created from file-based formats, feeds, and web API's.</p>
			</section>
		</div>

		<!-- Insert Layer Data Start (mandatory) -->
		<div class="row">
			<section>
				<div class="wb-geomap-layers col-md-12">
					<h3>Example - Inline Layer Data</h3>
					<p>Layers are created from the following tables. An attribute <code>data-geometry</code> to hold the geometry and an attribute <code>data-type</code> to hold the geometry type (wkt or bbox) are required for each row.</p>
					<section>
						<h4>Points</h4>
						<table id="cities" aria-label="Points" class="table wb-tables">
							<caption>Table of point geometries</caption>
							<thead>
								<tr>
									<th>Rank</th>
									<th>Census subdivision</th>
									<th>Population 2011</th>
								</tr>
							</thead>
							<tbody>
								<tr data-geometry="POINT (-79.3847, 43.6476)" data-type="wkt">
									<td>1</td>
									<td><a href="https://www.wikipedia.org/wiki/Toronto" title="Toronto">Toronto</a></td>
									<td>2,615,060</td>
								</tr>
								<tr data-geometry="POINT (-73.56123, 45.52927)" data-type="wkt">
									<td>2</td>
									<td><a href="https://www.wikipedia.org/wiki/Montreal" title="Montreal">Montreal</a></td>
									<td>1,649,519</td>
								</tr>
								<tr data-geometry="POINT (-114.05879, 51.04668)" data-type="wkt">
									<td>3</td>
									<td><a href="https://www.wikipedia.org/wiki/Calgary" title="Calgary">Calgary</a></td>
									<td>1,096,833</td>
								</tr>
								<tr data-geometry="POINT (-75.68937, 45.41072)" data-type="wkt">
									<td>4</td>
									<td><a href="https://www.wikipedia.org/wiki/Ottawa" title="Ottawa">Ottawa</a></td>
									<td>883,391</td>
								</tr>
								<tr data-geometry="POINT (-113.49590, 53.53398)" data-type="wkt">
									<td>5</td>
									<td><a href="https://www.wikipedia.org/wiki/Edmonton" title="Edmonton">Edmonton</a></td>
									<td>812,201</td>
								</tr>
								<tr data-geometry="POINT (-79.65, 43.60)" data-type="wkt">
									<td>6</td>
									<td><a href="https://www.wikipedia.org/wiki/Mississauga" title="Mississauga">Mississauga</a></td>
									<td>713,443</td>
								</tr>
								<tr data-geometry="POINT (-97.14352, 49.89375)" data-type="wkt">
									<td>7</td>
									<td><a href="https://www.wikipedia.org/wiki/Winnipeg" title="Winnipeg">Winnipeg</a></td>
									<td>663,617</td>
								</tr>
								<tr data-geometry="POINT (-123.10091, 49.26428)" data-type="wkt">
									<td>8</td>
									<td><a href="https://www.wikipedia.org/wiki/Vancouver" title="Vancouver">Vancouver</a></td>
									<td>603,502</td>
								</tr>
								<tr data-geometry="POINT (-79.76181, 43.68686)" data-type="wkt">
									<td>9</td>
									<td><a href="https://www.wikipedia.org/wiki/Brampton" title="Brampton">Brampton</a></td>
									<td>523,911</td>
								</tr>
								<tr data-geometry="POINT (-79.86788, 43.25717)" data-type="wkt">
									<td>10</td>
									<td><a href="https://www.wikipedia.org/wiki/Hamilton,_Ontario" title="Hamilton, Ontario">Hamilton</a></td>
									<td>519,949</td>
								</tr>
							</tbody>
						</table>
					</section>
				</div>

				<section class="col-md-12">
					<h4>Bounding Boxes</h4>
					<table id="bbox" aria-label="Bounding Boxes" class="table table-condensed">
						<caption>Table of bounding box geometries</caption>
						<thead>
							<tr>
								<th>Title</th>
								<th>Geometry</th>
							</tr>
						</thead>
						<tbody>
							<tr data-geometry="-136, 61, -118, 70" data-type="bbox">
								<td>Report on 2011 field activities and collection of ground thermal and active layer data in the Mackenzie Corridor completed under Northwest Territories science licence #14918</td>
								<td>-136, 61, -118, 70</td>
							</tr>
							<tr data-geometry="-92.5, 72.75, -79, 75.5" data-type="bbox">
								<td>Dinoflagellate cysts from upper cretaceous-lower tertiary sections, Bylot and Devon Islands, Arctic Archipelago</td>
								<td>-92.5, 72.75, -79, 75.5</td>
							</tr>
						</tbody>
					</table>
				</section>
			</section>
		</div>
		<!-- Insert Layer Data End -->
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-bttm-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;sample_map&quot;
	class=&quot;wb-geomap position scaleline tab geocoder geolocation aoi&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;v4.0.30/demo/config-en{{environment.suffix}}.js&quot;,
		&quot;tables&quot;: [{
			&quot;id&quot;: &quot;bbox&quot;,
			&quot;tab&quot;: false,
			&quot;zoom&quot;: true,
			&quot;visible&quot;: false,
			&quot;popups&quot;: true
		},{
			&quot;id&quot;: &quot;cities&quot;,
			&quot;zoom&quot;: true,
			&quot;tab&quot;: false,
			&quot;popups&quot;: true,
			&quot;visible&quot;: true,
			&quot;popupsInfo&quot;: {
				&quot;id&quot;: &quot;citiesPopup&quot;,
				&quot;height&quot;: 200,
				&quot;width&quot;: 300,
				&quot;close&quot;: true,
				&quot;content&quot;: &quot;&lt;div style=\&quot;white-space:nowrap;\&quot;&gt;&lt;p&gt;&lt;strong&gt;Census subdivision: &lt;/strong&gt;_Census subdivision&lt;div&gt;&lt;a href=\&quot;#\&quot; class=\&quot;button\&quot; role=\&quot;button\&quot; title=\&quot;Zoom to city\&quot; aria-label=\&quot;Zoom to city\&quot; onclick=\&quot;wb.doc.zoomFeature()\&quot;&gt;Zoom to city&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&quot;
			},
			&quot;style&quot;: {
				&quot;type&quot;: &quot;rule&quot;,
				&quot;rule&quot;: [
				{
					&quot;field&quot;: &quot;Rank&quot;,
					&quot;value&quot;: [3],
					&quot;filter&quot;: &quot;GREATER_THAN&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#0083f5&quot;,
						&quot;fillColor&quot;: &quot;#57a8f0&quot;,
						&quot;pointRadius&quot;: 6,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				},
				{
					&quot;field&quot;: &quot;Rank&quot;,
					&quot;value&quot;: [2, 3],
					&quot;filter&quot;: &quot;BETWEEN&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#F90&quot;,
						&quot;fillColor&quot;: &quot;#F90&quot;,
						&quot;pointRadius&quot;: 8,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				},
				{
					&quot;field&quot;: &quot;Rank&quot;,
					&quot;value&quot;: [1],
					&quot;filter&quot;: &quot;EQUAL_TO&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#F00&quot;,
						&quot;fillColor&quot;: &quot;#F00&quot;,
						&quot;pointRadius&quot;: 10,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				}
			]}
		}]
	}'&gt;

	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-9&quot;&gt;
		&lt;!-- Insert Map Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;

		&lt;!-- Insert Legend Start (optional) --&gt;
		&lt;section class=&quot;wb-geomap-legend col-md-3&quot;&gt;
			&lt;h3&gt;Legend&lt;/h3&gt;
		&lt;/section&gt;
		&lt;!-- Insert Legend End --&gt;
	&lt;/div&gt;

	&lt;div class=&quot;row&quot;&gt;
		&lt;section class=&quot;col-md-12&quot;&gt;
			&lt;h3&gt;Example - Remote &amp;amp; File-based Layer Data&lt;/h3&gt;
			&lt;p&gt;Layers are created from file-based formats, feeds, and web API's.&lt;/p&gt;
		&lt;/section&gt;
	&lt;/div&gt;

	&lt;!-- Insert Layer Data Start (mandatory) --&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;section&gt;
			&lt;div class=&quot;wb-geomap-layers col-md-12&quot;&gt;
				&lt;h3&gt;Example - Inline Layer Data&lt;/h3&gt;
				&lt;p&gt;Layers are created from the following tables. An attribute &lt;em&gt;data-geometry&lt;/em&gt; to hold the geometry and an attribute &lt;em&gt;data-type&lt;/em&gt; to hold the geometry type (wkt or bbox) are required for each row.&lt;/p&gt;
				&lt;section&gt;
					&lt;h4&gt;Points&lt;/h4&gt;
					&lt;table id=&quot;cities&quot; aria-label=&quot;Points&quot; class=&quot;table wb-tables&quot;&gt;
						&lt;caption&gt;
							Table of point geometries.
						&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=&quot;POINT (-79.3847, 43.6476)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;1&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Toronto&quot; title=&quot;Toronto&quot;&gt;Toronto&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;2615060&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-73.56123, 45.52927)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;2&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Montreal&quot; title=&quot;Montreal&quot;&gt;Montreal&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;1649519&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-114.05879, 51.04668)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;3&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Calgary&quot; title=&quot;Calgary&quot;&gt;Calgary&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;1096833&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-75.68937, 45.41072)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;4&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Ottawa&quot; title=&quot;Ottawa&quot;&gt;Ottawa&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;883391&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-113.49590, 53.53398)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;5&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Edmonton&quot; title=&quot;Edmonton&quot;&gt;Edmonton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;812201&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.65, 43.60)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;6&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Mississauga&quot; title=&quot;Mississauga&quot;&gt;Mississauga&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;713443&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-97.14352, 49.89375)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;7&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Winnipeg&quot; title=&quot;Winnipeg&quot;&gt;Winnipeg&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;663617&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-123.10091, 49.26428)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;8&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Vancouver&quot; title=&quot;Vancouver&quot;&gt;Vancouver&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;603502&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.76181, 43.68686)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;9&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Brampton&quot; title=&quot;Brampton&quot;&gt;Brampton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;523911&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.86788, 43.25717)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;10&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Hamilton,_Ontario&quot; title=&quot;Hamilton, Ontario&quot;&gt;Hamilton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;519949&lt;/td&gt;
							&lt;/tr&gt;
						&lt;/tbody&gt;
					&lt;/table&gt;
				&lt;/section&gt;
			&lt;/div&gt;

			&lt;section class=&quot;col-md-12&quot;&gt;
				&lt;h4&gt;Bounding Boxes&lt;/h4&gt;
				&lt;table id=&quot;bbox&quot; aria-label=&quot;Bounding Boxes&quot; class=&quot;table table-condensed&quot;&gt;
					&lt;caption&gt;
						Table of bounding box geometries.
					&lt;/caption&gt;
					&lt;thead&gt;
						&lt;tr&gt;
							&lt;th&gt;Title&lt;/th&gt;
							&lt;th&gt;Geometry&lt;/th&gt;
						&lt;/tr&gt;
					&lt;/thead&gt;
					&lt;tbody&gt;
						&lt;tr data-geometry=&quot;-136, 61, -118, 70&quot; data-type=&quot;bbox&quot;&gt;
							&lt;td&gt;Report on 2011 field activities and collection of ground thermal and active layer data in the Mackenzie Corridor completed under Northwest Territories science licence #14918&lt;/td&gt;
							&lt;td&gt;-136, 61, -118, 70&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry=&quot;-92.5, 72.75, -79, 75.5&quot; data-type=&quot;bbox&quot;&gt;
							&lt;td&gt;Dinoflagellate cysts from upper cretaceous-lower tertiary sections, Bylot and Devon Islands, Arctic Archipelago&lt;/td&gt;
							&lt;td&gt;-92.5, 72.75, -79, 75.5&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/tbody&gt;
				&lt;/table&gt;
			&lt;/section&gt;
		&lt;/section&gt;
	&lt;/div&gt;
	&lt;!-- Insert Layer Data End --&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>Static Map example</h2>
	<p>Geomap can be configured to provide a static map ideally suited to display a location or bounding box extent.</p>

	<!-- GeomapStart -->
	<div id="location_map"
		class="wb-geomap static"
		data-wb-geomap='{
			"tables": [{
				"id": "addNRCan",
				"style": {
					"type": "symbol",
					"init": {
						"pointRadius": 12,
						"graphicName": "star",
						"strokeColor": "#FF0000",
						"fillColor": "#FF0000",
						"fillOpacity": 0.7
					}
				}
			}]
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4">
				<table id="addNRCan" aria-label="NRCan Ottawa office address" class="table">
					<caption class="wb-inv">Natural Resources Canada Ottawa office address</caption>
					<thead>
						<tr>
							<th>Address</th>
						</tr>
					</thead>
					<tbody>
						<tr data-geometry="POINT (-75.70535, 45.3995)" data-type="wkt">
							<td>615 Booth St.,<br />Ottawa (ON),<br />Canada,<br />K1A 0E8</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;location_map&quot;
	class=&quot;wb-geomap static&quot;
	data-wb-geomap='{
		&quot;tables&quot;: [{
			&quot;id&quot;: &quot;addNRCan&quot;,
			&quot;style&quot;: {
				&quot;type&quot;: &quot;symbol&quot;,
				&quot;init&quot;: {
					&quot;pointRadius&quot;: 12,
					&quot;graphicName&quot;: &quot;star&quot;,
					&quot;strokeColor&quot;: &quot;#FF0000&quot;,
					&quot;fillColor&quot;: &quot;#FF0000&quot;,
					&quot;fillOpacity&quot;: 0.7
				}
			}
		}]
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;
			&lt;table id=&quot;addNRCan&quot; aria-label=&quot;NRCan Ottawa office adress&quot; class=&quot;table&quot;&gt;
				&lt;caption class=&quot;wb-inv&quot;&gt;Natural Resources Canada Ottawa office adress&lt;/caption&gt;
				&lt;thead&gt;
					&lt;tr&gt;
						&lt;th&gt;Adress&lt;/th&gt;
					&lt;/tr&gt;
				&lt;/thead&gt;
				&lt;tbody&gt;
					&lt;tr data-geometry=&quot;POINT (-75.70535, 45.3995)&quot; data-type=&quot;wkt&quot;&gt;
						&lt;td&gt;615 Booth St.,&lt;br /&gt;Ottawa (ON),&lt;br /&gt;Canada,&lt;br /&gt;K1A 0E8&lt;/td&gt;
					&lt;/tr&gt;
				&lt;/tbody&gt;
			&lt;/table&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>WMS Map example</h2>
	<p>Geomap can be configured to use a WMS map as basemap. Configuration can be made in the config file in basemap property.</p>

	<!-- GeomapStart -->
	<div id="wms_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "v4.0.30/demo/configwms-en{{environment.suffix}}.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4">
			</div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

		<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;location_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;v4.0.30/demo/configwms-en{{environment.suffix}}.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>View config file</summary>
			<pre><code>
			var wet_boew_geomap = {
				// OPTIONAL: note that Geomap will provide a default basemap if not specified here.
				basemap : {
					title: &quot;WMS-Toporama&quot;,
					type: &quot;wms&quot;,
					url: &quot;http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en&quot;,
					version: &quot;1.1.1&quot;,
					format: &quot;image/jpeg&quot;,
					layers: &quot;WMS-Toporama&quot;,
					mapOptions: {
						maxExtent: &quot;-141, 41, -52, 84&quot;,
						restrictedExtent: &quot;-141, 41, -52, 84&quot;,
						maxResolution: &quot;auto&quot;,
						projection: &quot;EPSG:4269&quot;,
						units: &quot;m&quot;,
						displayProjection: &quot;EPSG:4269&quot;,
						aspectRatio: 0.8
					}
				},
				overlays: []
			};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>ESRI REST basemap example</h2>
	<p>Geomap can be configured to use an ESRI REST service as basemap. Configuration can be made in the config file in basemap property.</p>

	<!-- GeomapStart -->
	<div id="esri_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "v4.0.30/demo/config-esri-en{{environment.suffix}}.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

		<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;esri_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;v4.0.30/demo/config-esri-en{{environment.suffix}}.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>View config file</summary>
			<pre><code>
			var wet_boew_geomap = {
				basemap : {
					title: &quot;Basic Map&quot;,
					type: &quot;esri&quot;,
					url: &quot;https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/provinces1c/MapServer/export&quot;,
					options: { singleTile: false, ratio: 1.0, projection: &quot;EPSG:3978&quot;, fractionalZoom: true },
					mapOptions: {
						maxExtent: &quot;-3000000.0, -800000.0, 4000000.0, 3900000.0&quot;,
						maxResolution: &quot;auto&quot;,
						projection: &quot;EPSG:3978&quot;,
						restrictedExtent: &quot;-3000000.0, -800000.0, 4000000.0, 3900000.0&quot;,
						units: &quot;m&quot;,
						displayProjection: &quot;EPSG:4269&quot;,
						numZoomLevels: 2
					}
				}
			};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2>OSM basemap example</h2>
	<p>Geomap can be configured to use an OSM Tile service (e.g. MapQuest) as basemap. Configuration can be made in the config file in basemap property.</p>

	<!-- GeomapStart -->
	<div id="osm_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "v4.0.30/demo/config-osm-en{{environment.suffix}}.js",
			"attribution": { "text":"Tiles Courtesy of &lt;a href=\"https://www.mapquest.com/\" target=\"_blank\"&gt;MapQuest&lt;/a&gt;", "href":"" }
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

		<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;osm_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;v4.0.30/demo/config-osm-en.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>View config file</summary>
			<pre><code>
			var wet_boew_geomap = {
				title:"MapQuest OSM Map",
				type:"xyz",
				url:[
					"http://otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
					"http://otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
					"http://otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
					"http://otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
				],
				mapOptions: {
					projection: "EPSG:900913",
					center: [ -123,49 ],
					zoomLevel: 5
				}
			};
		</code></pre>
		</details>
	</section>
</section>
