Geomap

Displays a dynamic map over which information from additional sources can be overlaid.

Dynamic map example

Since WET 4.0.31 we updated geomap to use to OpenLayers 3, as a result RSS and ATOM feeds are no longer supported. Many of the services that were used for this working example no longer exist and were removed. Please update the config-en.js as per provided example.

Legend

Example - Inline Layer Data

Layers are created from the following tables. An attribute data-geometry to hold the geometry and an attribute data-type to hold the geometry type (wkt or bbox) are required for each row.

Points
Table of point geometries
Rank Census subdivision Population 2011
1 Toronto 2,615,060
2 Montreal 1,649,519
3 Calgary 1,096,833
4 Ottawa 883,391
5 Edmonton 812,201
6 Mississauga 713,443
7 Winnipeg 663,617
8 Vancouver 603,502
9 Brampton 523,911
10 Hamilton 519,949
Bounding Boxes
Table of bounding box geometries
Title Geometry
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 -136, 61, -118, 70
Dinoflagellate cysts from upper cretaceous-lower tertiary sections, Bylot and Devon Islands, Arctic Archipelago -92.5, 72.75, -79, 75.5

Example - Remote & File-based Layer Data

Layers are created from file-based formats, feeds, and web API's.

Code

View code 
<!-- GeomapStart -->
<div id="sample_map"
	class="wb-geomap position scaleline geocoder geolocation aoi aoi-open"
	data-wb-geomap='{
		"layersFile": "demo/config-en.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 <em>data-geometry</em> to hold the geometry and an attribute <em>data-type</em> 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>2615060</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>1649519</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>1096833</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>883391</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>812201</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>713443</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>663617</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>603502</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>523911</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>519949</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 -->

Static Map example

Geomap can be configured to provide a static map ideally suited to display a location or bounding box extent.

Since WET 4.0.31 we updated geomap to use to OpenLayers 3 and code in the client_functions.js has been changed. Please update the client_functions.js as per provided example. Static map that was using very similar configuration like before v4.0.30, which are deprecated, and as per demoed should continue to work. We recommend you to update your code like the following example.

Natural Resources Canada Ottawa office address
Address
615 Booth St.,
Ottawa (ON),
Canada,
K1A 0E8

Code

View code 
<!-- 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 adress" class="table">
				<caption class="wb-inv">Natural Resources Canada Ottawa office adress</caption>
				<thead>
					<tr>
						<th>Adress</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 -->

WMS Map example

Geomap can be configured to use a WMS map as basemap. Configuration can be made in the config file in basemap property.

Code

View code 
<!-- GeomapStart -->
<div id="location_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/configwms-en.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 -->
View config file 

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

ESRI REST basemap example

Geomap can be configured to use an ESRI REST service as basemap. Configuration can be made in the config file in basemap property.

Code

View code 
<!-- GeomapStart -->
<div id="esri_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/config-esri-en.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 -->
View config file 

var wet_boew_geomap = {
	basemap : {
		title: "Basic Map",
		type: "esri",
		url: "https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/provinces1c/MapServer/export",
		options: { singleTile: false, 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: 2
		}
	}
};

OSM basemap example

Geomap can be configured to use an OpenStreetMap (OSM) basemap. Configuration can be made in the config file in basemap property.

Code

View code 
<!-- GeomapStart -->
<div id="osm_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/config-osm-en.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 -->
View config file 

var wet_boew_geomap = {
	title: "OSM Map",
	type: "osm",
	mapOptions: {
		center: [ -52.7222765, 47.5410882 ],
		zoomLevel: 11
	}
};

Tile Source (XYZ) basemap example

Geomap can be configured to use an Tile Source (XYZ) basemap. Configuration can be made in the config file in basemap property.

Prior to WET 4.0.31 the service that was used to create this working example has been retired. Please see the revised configuration below.

Code

View code 
<!-- GeomapStart -->
<div id="xyz_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/config-xyz-en.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 -->
View config file 

var wet_boew_geomap = {
	title: "Tile (XYZ) Source Map",
	type: "osm",
	url: [
		"//otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
	],
	mapOptions: {
		projection: "EPSG:900913",
		center: [ -123, 49 ],
		zoomLevel: 5
	}
};

Filtering example

Legend

Points
Table of point geometries
Rank Census subdivision Population 2011
1 Toronto 2,615,060
2 Montreal 1,649,519
3 Calgary 1,096,833
4 Ottawa 883,391
5 Edmonton 812,201
6 Mississauga 713,443
7 Winnipeg 663,617
8 Vancouver 603,502
9 Brampton 523,911
10 Hamilton 519,949

Code

View code 
<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="sample_map_filter">
	<div class="form-group">
		<label for="gm_province">Province:</label>
		<select id="gm_province" class="form-control" data-filter="aoi">
			<!-- The dimension bellow are approximative for this demo purpose only -->
			<option selected value="64.097 -10.63 34.692 -177.659">Canada</option>
			<option value="60 -120 48 -139">British columbia</option>
			<option value="60 -110 49 -120">Alberta</option>
			<option 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))">Québec</option>
		</select>
	</div>
	<div class="form-group">
		<label for="gm_layer">Layer:</label>
		<select id="gm_layer" class="form-control" data-filter="layer">
			<option value="Points" selected>Points</option>
			<option value="KML">KML</option>
			<option value="TopoJSON (World 110m)">TopoJSON (World 110m)</option>
			<option value="">(All)</option>
		</select>
	</div>
	<button class="btn btn-primary" aria-controls="sample_map_filter" type="submit">Filter</button>
	<button class="btn btn-link" type="reset">Reset page to defaults</button>
</form>
<div id="sample_map_filter"
	class="wb-geomap position scaleline geocoder geolocation"
	data-wb-geomap='{
		"tables": [{
			"id": "cities_forFilterSample",
			"zoom": true,
			"tooltips": true,
			"tooltipText": "Population 2011",
			"popups": true,
			"visible": true,
			"popupsInfo": {
				"content": "<div style=\"white-space:nowrap;\"><strong>Census subdivision: </strong>_Census subdivision<br/><strong>Population: </strong>_Population 2011</div>"
			},
			"style": {
				"type": "rule",
				"rule": [
				{
					"field": "Rank",
					"value": [3],
					"filter": "GREATER_THAN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 2.6,
						"fillOpacity": 1.0,
						"strokeWidth": 8,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rank",
					"value": [2, 3],
					"filter": "BETWEEN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 4,
						"fillOpacity": 1.0,
						"strokeWidth": 12,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rank",
					"value": [1],
					"filter": "EQUAL_TO",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 5.3,
						"fillOpacity": 1.0,
						"strokeWidth": 16,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				}
			]}
		}],
		"overlays": [
			{
				"title": "KML",
				"caption": "This data is extracted from the <a href=\"http://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst/457ede2f-fd65-5936-ab60-3fe71da0e98b\">Principal mineral areas of Canada</a> publication.",
				"type": "kml",
				"url": "demo/producing-mines.kml",
				"visible": false,
				"datatable": true,
				"tooltips": true,
				"tooltipText": "Operation",
				"popups": true,
				"attributes": {
					"Type_": "Type",
					"OwnersE": "Owner",
					"OperationE": "Operation",
					"ComGroupE": "Commodity Group",
					"CommodityE": "Commodity"
				},
				"style": {
					"type": "unique",
					"field": "Type",
					"init": {
						"Coal": {
							"externalGraphic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA+hJREFUSInN1n9MVWUYwPHvOfeC51zvubeQiwtDCS37sZxbP5YaKbVqaw1W/DKCQiaEBfYD19ZabrlaMp0tNREItJBoDabWrC2pK1qbxXRMmoMwDav1R8GFe4DzAvee0x/iTbpwuZRrPf++z/t8znPe57w7dv6jsP8vICH8i0GqxLIiP5AknVYUbcs/goQYvgHL9AJJIEV0sMgQhn6tomovzgoSYij5MnLU20bzkc+nNeKucfNSaQme+HkvCEOXFVV7PirIMIYWYlleYFHrsTaaDn8asRlPXBzbqqrZtKGEhPj4jcLQJUXVNkaEDENPkrC8QPKXbcf58NAlRJJlLNMMQ2LsdvJzMgkGgjR83ExBThYJ8fHlwvBLiuoqnxIaGfEvkMALpHx14gSNBz8BYMeW13BpGn19Pj472krbt+2hzeOBAFt27OSVslJKCwuo3t/Ak9mZzPd4yiawskmQZf0WMyokL7D42IlvONByOFTMpWnIkownfh4Fa7NJuj5x0vr42BgjQpAQm0B+Thbb99RQsaGY+R7Pc8LQ+xVV2xyCDMM9R5aCN17o7eWDloOTXs/vf/Qx3+MBQJZkfL7B0Fqs3U7FsyW4nE5efv1N0h96gBV3LGdbVQ3bN78KWMumPKOxsfGwczjyRSuFebnIkoxpmYyOjU5C3C4XW3dVMajrNLQcYvU9d6H79bA6M94MX7efIikxEb+uY1om2RnpBIImK+++E7fLReW7exkY/KvLtpPtxNjDy0Z1BV054rIkU5CbRX+/j7d2V9Hf74umxOzuuli7neW334ZvYBBVVViUeN3Vh2ImzsQ5dy5vvL2LZUuXsO6JHKzGj+g423V1IJvNRkXpelxOJ5W79zLg93P8u1OMBYKsy8ul7kATZ7p++HeQzWaj4pn1aJoWmq7LcfJ0B8FAgMK8texrbKKzuycyZJqmKdswFyYtkG9OSabr/E+hhFuXpKCqClt37kEfHg4r0H7me8YDAR59+MEQlJP+yKVFSQp9L3YAp9M5IoRepCpqfVlxkby7tj6EdXb30Nn9TsSuO852hc4pPzOD+1NTAesCyJsmQQCKor0vhC45VEddWXGRvKu2nu4rOosmnsp8jDWpqwDOW8hpquK8GAZNYPsvY+XFRdJssKezHmf1vSsBfrQgTVWdP1+5HjYMiqLtE4YuO1RHbbRYYXYm961aAXDuEqL98vecKadOUbU6Yfglh+qoKS8uknovhu0LxRwllpRFyQDnTMta43C4fp0qb9rxVlTXexNY9S1Lb5rhp4Ee07LSpkMiQhNYrRCDzZJks0XKEyI45Ha7RaScGT9YRXFHd5nNEH8C+eGD9m6tNTgAAAAASUVORK5CYII=",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Coal mines"
						},
						"Metal mines and mills": {
							"externalGraphic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA9FJREFUSInN1ltoHFUYwPH/mdndzKwzs6l7Iy1N25S+FCLaF69gg5cHq6S2FUSaS5OqD6YxASklgUpTCgqCIki1uTRF0QcDIlJpaWpES4UgrljBh7RRqsVmN5fNbpo52ezO+JBkcZtkk2gRv9fznfObc77vHMbDfxSe/wUkZWoriDdx3eIfJMQPmmZ2/CNIyltbcJ0BYCOIog4u1dJOr9N0s3VNkJRTmxeQcxPf8vFU/7JGSLE4Eq4n4gu2SDutaLr56qog254qx3UHgE3nJy5xJn2+6Gai6jpOJHpojzQQ8QabpZ0Wmm42F4VsO71R4A4Amy8kL9GbPgeAgoKDswjxCpUDwWqybo7TY59RH9xN1Bs6JO2U0HTr0JLQ9HRqg4ABoKI/eZme1Bxycv1hLI/JaGacLya/pt+O5SfPujnab77P65EGmiIv8F78E+ruribqCzXNY00FkOv+6Z2RYgDYejH5Hd2pL/OLWR4DBUHEF+RAeA+bkmUF4zNkmHYkURGmLljNG/FejoTrifpCr0g7Pa7p5tE8ZNuBEkXktg3L63SlzhYcTyIzTtQXmj9CwUR2Mj9WIry0hWqxVIPmG2+xz3iUR7RKTiR6eHfDYcC9Z8kaZZzZRXX4PPkVByPPoSBwcLDdmQKk1GPRMdJN0pmiK3WWJ/T7SDq3Fq2z4sswIH+ifKKMdG6KHA7Ph3bhjDo8bOyg1GNyPN7NmJPK51+wY3iFunYIKGhxBUFd+FnGZpN0xDtJ5FJFZq4RWogS4WWHsZ2J7CR+tYQtnrI7D3mFSluoFkO5i6M3T3Gvr4IXQ3sg0cdgZujOQB6h0h6qw1INjsd7GHfSXJQ/MjuWozG8FyfxKd9nrv07yCNU2oI1WKrBsfhcdy3EN/IK2dEsjeG95BJ9xDLDxSHHcRxFxSnX1iuV3nKuzF7PJ1R6N+FXdY6NdDPpLm7byzO/kE1k2R2oIpaYg2rNJ+cGhcjfFw+AYRjTUqYb/Ire0xLdr7wz8lEei2WGiY2cLLrrwcwQg4m5OjVaT/F46UOA+ysorxVAAJpmnpEyLfyKv7slul95e+RDfp79vShwexy0dvFY6YMAwy5Kla4Z+aMpqJGmmb0LWGu0RqwFe8l6mqrSBwCuuVCl60bBxEXNoGnmaWmnFb/i71wt9nLgGXYG7ge4OoeYf9yes2TXabrZLe2U8Cv+U63RGvGbvLEsoiklVGjlAFcd193p91tLJi/b3ppudc1jH2z3b1vhp4Ehx3WrlkOKQvNYp5STfUKoi1/Jv4WUualAICCL5ax4YTUtMLFSzmriL1z5gWQ67XYNAAAAAElFTkSuQmCC",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Metal mines"
						},
						"Industrial minerals": {
							"externalGraphic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA79JREFUSInN1ktMXFUYwPH/uVxmzoV5tBUGDe+SGmnwFWVBqQHUhYmJxo1xKZg2Pmh91IVJFWx140JXTapC62NtoombYmgHmoZQSUxUKDVWpuVheQ2tzAz3zMDc42KmIAwMUBvjtz3f/X7nnu87N9fkPwrzfwEpNV8F4iO0zr4hIX6S0nv8tiClYpVoJwiUgsjqoHlW2ZGd0vK+uS1IqWjFLWRy8Azhy19vaOS4A1Q0HEX6Ct9QdsSQlvf1LUG2HS1D6yBQPjnURXi4M+vLmHn3EOo5TmXje0hf4LCyI0Ja3sNZIduOlAp0EKiYvNRF+FJHakEYoJ1MRbgoqW1GJ5cYHzhNSW0L0hc4pOx5IS3foXWhhYX5YgFBYPfUcDfhoRSy5+lOci0f8UiYqcHviE50rTytE4ycfYeKhmNU7G/l2oUTFD/ajPQXtaax1lWQ1tdz40oEgaqp4bPMDn66XCvX8iGEgfQVUlb3EtOXK1et66QiuWhjmHdTXNtCqOdDKhuOIv1Fryk7Mictb9syZNt+tyGSe6LTI8wOnlx1OvH5GaS/KHVSwmApNrdycoakpL4N0+3lt+9b2XXv8/hKGgj1fkD1MycA/cC6PUomExltmPz1W8rrDyKEgdYOySW1jJTubyPX2kEo+D7OYpjZoZN4ip/CScxl1Nn0yxC73s3UUAVJNY/WSUpqX2DMWWJX1WMppOcYTmJ6OT86cQaEa/sQsGbEDcr3NROPzjFyrh0nPrmVEtv71glD4i9/hHjsBjkuidu3G3vmTkPCleqJ28NI97vkFTxEad0BRvsc1Gz/HYKESWl9O6bbm278LNE/f2DixyXK6g4y2qdR4Yv/EhImJfvayZVervakputWxCbPMX5xidK6A4z1Oai5geyQ4ziOkYOTf1eZ4drxIImbPy8nyJ0PY7osQr3t6MUbGQUWps8z1p8gUPMco+dTUMHeF9ObFIurII/Hs6BUpMV05Z2ubHjLCPV+soypuQGuBjfeKYCa7Wf0fKpPBTUvU1T9JKBDYLy9CgKQ0vuVUhFhuvJPpbCPSdz8JSuwNgpqXqGo+gmAEY3RZEnPaAaUxr5cwY6I7WCFNa8SqH4c4A8NTZblGfvnesYwSOn9QtkRw3Tld2wVK7y/lcB9jQBXUoh3fG3OulMnLe8pZc8L05X/eWXDERGbubYhkpPrxhOoArjiaN2Yl+ebWC9vw/GWlq8zjX3mL967yU8DvztaN22EZIXSWIdSf30jRE5OtjylklG/36+y5Wx6YaX0Z16e24i/AWg1hRJKTWppAAAAAElFTkSuQmCC",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Nonmetal Mines"
						},
						"Oil Sands": {
							"externalGraphic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAA9VJREFUSInN1l9QVFUcwPHvucDuucveXZqCHXOkZakexFkcmHypRon+PFYPNT1UY0zAiEBKJmjiKDqF04zUWA+IWk0PvTiNNtWI5hDj+CCwFskb/8JyKvk37gL3uLD39sC2hguLmNN0Xn+/+/ucP79z5qbzH430/wWkVDgfxCFsO/WEhLgspdF0V5BS03nYVgewBkRKB5vnlRm5T+rG9hVBSk35/0b6v23natsXSxoZq7Ip2r8bd072NmVGNKkbb90RZJpTudh2B/BQ/3ftjHx8POVinA+u4vKeAxQd3IM7J6dWmREhdaM2JWSakTUCuwPwD5xpZ+RIHNE0sKwkRDgdFFRuJjY3R1/rCdZVlOH25dQoMyyk7qlZFJqZCa8W0AEEBs9+zy8fzSOPf3kU6fUwPTrOwFenGTt9NvGxfTNKV+0uij7YR1FdNT+2fMLa8s0YPl91HKteANn27xk3legA8ofOnWe45WiimPR6EELDnZNNYWUZQwH/gritbjJrKtKdTgrK3+By43sUHdiF2+fbqszIhNSNvQnINL1OTcQeGR8cYuhw64Ltmb4+itvnm98qoaHGJ25tnS4Jvr8H6THoLKsh99WXeKD0SULvHmTjsSOAHVz0jGLRaNI59J88xfqqcoTQsG2LmKluIc2N6FleeuqbiI1OMNzSSvYLzzE3NplUZ9mXYfyb8wz4/UTDN8CyKXjtFey5GKs3PYHMyiK0u4m5P64n8kdPtSOcjpVDwMIWFxCs2Iw5NkF3wz5mr/15JyVW9tYJXeJ7rBhzYpJ0l8T1aIAb9xoSTgfB5kachpuut/eStaGQYNWb9FoW4c5L9wjKSCfY3Ij0GITqm5i7PsbY1+foi85SWFXOT5ZF5EL3v4TiiNNj0LNzH7HRW+09eeYH+mIxglXl/GzZRC72pIYsy7K0NKwsf66WuaGQ6a7eRIKxYT0ZLp3Qzv3ExpPbdvLcBa5EowRefpHeOOTf8vp8UIjZBZDb7Z5RKlLm0F0niuu3aaFDHyawyMUeQilmChDuvERv/JzytleQ/+zTgD0M2o4FEICUxudKRYTDlXm8uH6bFmo+zHT3lZTA7SNQV0ngmVKAIRutRJfuq0lQHPssgTXUiZVggR1bCJSWAAzaUKLr7l//GU9qBimNT5UZ0RyuzLY7xfLf2UreUxsBBuYR47fbcxbtOqkbx5UZFg5X5tHihjoxOTSyJJIundz/cD7AgGXbm1wuz7VF85YqIHXPsTjW6lu3dpmfBvot2y5ZCkkJxbE2pW6cFCItLVWeUrEpr9erUuUse2Gl9CZfnrsYfwFqWYQCxROHDQAAAABJRU5ErkJggg==",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Oil sands mines"
						}
					},
					"select": {
						"externalGraphic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAACKElEQVR42uWWMU/bQBTHWVBR1aUSG7Sl4oMBoiwd+gEYGBgqWIoCLDDCBEUIqUJqB6TOEe1QCQGOEyeRHBTHl/OLfTkvcNwz2NDkzrGTpVItPeXknPy7/3t/vXdjY//V43nNWR/gyHGcEwzSbJ6QRuMp5DtXvuMcVkaAeO8BoM59X4QyuCZC/hDdrreRG0IpneEereKHXkyxgWH9KUcw33ULmSHtdvutTJeVFRLHr5+lGLY5EEIIecMpLeeBXBZNcfbNSNZRGhlsaSGu604Frmv2Qki1KjiAMH6bWtiPY0NAoxGtLxIY3e6DnJ/vjAcAhkoJQpLiy7UKtLFuCN9xxFXRfFLW9QVjsPoXSFr3FTrrYO9amZrnLlNBLov9akPmC7S/ErS2WlKeOFHVo6ggIVdFdUpxvxKEf3zWgJ6H32olkFalot0XpoEwDVmchspa0iRpexDk6EBfMoBQCToRbm7SDzOKot7Cx5bWgRzZB3PXqKBxF9Tr+RSFKYrQjd8P9WqJol48UIBs237JO3BLbFv5odPDwbXrPeRDR4evfd0h6HTmpJtuaUreswZCeNeryAb9TtnvOpTOI4yMAIsgAGWcAqkdHChdkBvvhoFxhs3UM3EKZJpJjNLFvDAsPg+gJCHTuaasTOMHhFFpELT9yrIZ/a49rj99LEfr/V1DhI8QHDVD3RsY85YQ1ndPiNcIwHEQgDE0JH5qtdpraf/JtLAsa+KfubrdA6qupf9mD9mBAAAAAElFTkSuQmCC",
						"graphicOpacity": "1"
					}
				}
			},
			{
				"title": "TopoJSON (World 110m)",
				"caption": "This is a sample dataset loaded from a remote TopoJSON resource.",
				"type": "topojson",
				"url": "demo/topojson.json",
				"accessible": false,
				"visible": false,
				"style": {
					"strokeColor": "#3399ff",
					"strokeWidth": 2.0
				}
			}
		]
	}'>

	<div class="row">
		<div class="col-md-9 form-group">
			<div class="wb-geomap-map"></div>
		</div>
		<section class="col-md-3 form-group">
			<div class="panel panel-default">
				<header class="panel-heading">
					<h3 class="panel-title">Legend</h3>
				</header>
				<div class="panel-body">
					<div class="wb-geomap-legend"></div>
				</div>
			</div>
		</section>
	</div>


	<div class="wb-geomap-layers">
		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-title">Points</div>
			</div>
			<div class="panel-body">
				<table id="cities_forFilterSample" 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>
			</div>
		</div>
	</div>
</div>
Date modified: