Geomap

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

Dynamic map example
Static Map example
WMS Map example
ESRI REST basemap example
OSM basemap example
Tile Source (XYZ) basemap example
Filtering example
Zoom to AOI on page load (extent)
Merge label and legend symbol
Display legend labels over two columns

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>

Zoom to AOI on page load (extent)

Code

View code

<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="bc-geomap">
	<div class="form-group">
		<label for="zoomBCArea">B.C. Regions:</label>
		<select class="form-control" data-filter="aoi" id="zoomBCArea">
			<option value="63 -110 50 -128" selected>Select a region</option>
			<option value="61 -124 55.33 -140.6">North</option>
			<option value="50.802 -123.316 48.312 -128.578">Vancouver Island and Coast</option>
			<option value="50.2806 -121.7203 49.0199 -124.4421">Lower Mainland</option>
			<option value="52.4999 -118.5493 48.9964 -114.0535">Southern Interior</option>
		</select>
	</div>
	<button aria-controls="bc-geomap" class="btn btn-primary" type="submit">Filter</button>
	<button class="btn btn-link" type="reset">Reset page to defaults</button>
</form>
<div class="wb-geomap" id="bc-geomap" data-wb-geomap='{
	"mapExtent": "63, -110, 50, -128"
}'>
	<div class="wb-geomap-map"></div>
</div>

Merge label and legend symbol

When the legend layer only has one legend item, hide the legend item and only keep the label with the icon.

Legend

Select from following PacifiCan programs to see funded projects across British Columbia:

Display legend labels over two columns

Legend

Select from following PacifiCan programs to see funded projects across British Columbia:

Date modified:: 2016-04-22

Language selection

Search and menus

Search

Geomap

Dynamic map example

Legend

Example - Inline Layer Data

Example - Remote & File-based Layer Data

Code

Static Map example

Code

WMS Map example

Code

ESRI REST basemap example

Code

OSM basemap example

Code

Tile Source (XYZ) basemap example

Code

Filtering example

Legend

Code

Zoom to AOI on page load (extent)

Code

Merge label and legend symbol

Legend

Display legend labels over two columns

Legend