Géocarte

Affiche une carte dynamique sur laquelle des informations de sources supplémentaires peuvent être superposées.

Carte dynamique - Exemple

Depuis BOEW 4.0.31 nous avons mise à jour la géocarte afin d'utiliser OpenLayer 3 donc les flux RSS et ATOM ne sont plus supporté. Plusieurs des services qui ont été utilisé pour cet example n'existe plus et ils ont été enlevé. Veuillez mettre à jour le fichier config-fr.js tel qu'illustré dans l'example.

Légende

Exemple - Données dans le fichier HTML

Les données est créées à partir des tables suivantes. Un attribut data-geometry contient la géometry et un attribut data-type contient le type (wkt ou bbox) ont été ajoutés à chaque ligne.

Points
Tableau de géométrie point
Rang Subdivision de recensement Population de 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
Boîtes des délimitations
Tableau des boîtes de délimitations
Titre Géometrie
Rapport de 2011 sur les activités terrain et la collecte de données terrain dont les couches thermiques et active dans le corridor du Mackenzie, Territoires du Nord, n ° de licence 14918 -136, 61, -118, 70
Dinokystes du Crétacé supérieur-inférieur tertiaire, îles de Bylot et Devon, archipel arctique -92.5, 72.75, -79, 75.5

Exemple - Données extérieure & provenant de fichiers

Les données sont créées à partir de fichiers, fils ou d'API web.

Code

Visualiser le code 
<!-- GeomapStart -->
<div id="sample_map"
	class="wb-geomap position scaleline geocoder aoi aoi-open geolocation"
	data-wb-geomap='{
		"layersFile": "demo/config-fr.js",
		"tables": [{
			"id": "bbox",
			"tab": false,
			"zoom": true,
			"popups": true,
			"visible": false
		},{
			"id": "cities",
			"zoom": true,
			"tab": false,
			"popups": true,
			"popupsInfo": {
				"id": "citiesPopup",
				"height": 200,
				"width": 300,
				"close": true,
				"content": "<div style=\"white-space:nowrap;\"><p><strong>Subdivision de recensement: </strong>_Subdivision de recensement<div><a href=\"#\" class=\"button\" role=\"button\" title=\"Zoom à la ville\" aria-label=\"Zoom à la ville\" onclick=\"wb.doc.zoomFeature()\">Zoom à la ville</a></div></div>"
			},
			"style": {
				"type": "rule",
				"rule": [
				{
					"field": "Rang",
					"value": [3],
					"filter": "GREATER_THAN",
					"init": {
						"strokeColor": "#0083f5",
						"fillColor": "#57a8f0",
						"pointRadius": "6",
						"fillOpacity": 0.80,
						"strokeWidth": 1.0
					}
				},
				{
					"field": "Rang",
					"value": [2, 3],
					"filter": "BETWEEN",
					"init": {
						"strokeColor": "#F90",
						"fillColor": "#F90",
						"pointRadius": "8",
						"fillOpacity": 0.80,
						"strokeWidth": 1.0
					}
				},
				{
					"field": "Rang",
					"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>Légende</h2>
		</section>
		<!-- Insert Legend End -->
	</div>

	<!-- Insert Layer Data Start (mandatory) -->
	<div class="row">
		<section class="col-md-12">
			<h3>Exemple - Données extérieure &amp; provenant de fichiers</h3>
			<p>Les données sont créées à partir de fichiers, fils ou d'API web.</p>
		</section>
	</div>

	<div class="row">
		<section>
			<div class="wb-geomap-layers col-md-12">
				<h3>Exemple - Données dans le fichier HTML</h3>
				<p>Les données est créées à partir des tables suivantes. Un attribut <code>data-geometry</code> contient la géometry et un attribut <code>data-type</code> contient le type (wkt ou bbox) ont été ajoutés à chaque ligne.</p>
				<section>
					<h4>Points</h4>
					<table id="cities" aria-label="Points" class="table wb-tables">
						<caption>Tableau de géométrie point</caption>
						<thead>
							<tr>
								<th>Rang</th>
								<th>Subdivision de recensement</th>
								<th>Population de 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 class="select"><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>Boîtes des délimitations</h4>
				<table id="bbox" aria-label="Boîtes des délimitations" class="table table-condensed">
					<caption>Tableau des boîtes de délimitations</caption>
					<thead>
						<tr>
							<th>Titre</th>
							<th>Géometrie</th>
						</tr>
					</thead>
					<tbody>
						<tr data-geometry="-136, 61, -118, 70" data-type="bbox">
							<td>Rapport de 2011 sur les activités terrain et la collecte de données terrain dont les couches thermiques et active dans le corridor du Mackenzie, Territoires du Nord, n ° de licence 14918</td>
							<td>-136, 61, -118, 70</td>
						</tr>
						<tr data-geometry="-92.5, 72.75, -79, 75.5" data-type="bbox">
							<td>Dinokystes du Crétacé supérieur-inférieur tertiaire, îles de Bylot et Devon, archipel arctique</td>
							<td>-92.5, 72.75, -79, 75.5</td>
						</tr>
					</tbody>
				</table>
			</section>
		</section>
	</div>
	<!-- Insert Layer Data End-->
</div>
<!-- GeomapEnd -->

Carte statique - Exemple

Geomap peux être configuré pour créer une carte statique afin de situer un endroit comme un bureau ou une étendue à l'aide d'une "bbox".

Depuis BOEW 4.0.31 nous avons mise à jour la géocarte afin d'utiliser OpenLayer 3 et le code dans client_functions.js a changé. Veuillez mettre à jour client_functions.js tel qu'illustré dans l'example. Les cartes statique qui utilise une configuration très similaire tel que configuré et démontré depuis la version 4.0.30, qui est désuet, devrait continuer de fonctionner. Nous vous recommendons de mettre à jour votre code tel qu'illustré dans l'example suivant.

Adresse des bureaux de Ressources naturelles Canada Ottawa
Adresse
615 rue Booth,
Ottawa (ON),
Canada,
K1A 0E8

Code

Visualiser le 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="Adresse des bureaux de RNCan Ottawa" class="table">
				<caption class="wb-inv">Adresse des bureaux de Ressources naturelles Canada Ottawa</caption>
				<thead>
					<tr>
						<th>Adresse</th>
					</tr>
				</thead>
				<tbody>
					<tr data-geometry="POINT (-75.70535 45.3995)" data-type="wkt">
						<td>615 rue Booth,<br />Ottawa (ON),<br />Canada,<br />K1A 0E8</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- Insert Layer Data End -->
	</div>
</div>
<!-- GeomapEnd -->

Carte WMS - Exemple WMS

Geomap peut être configuré pour utiliser une carte de base de type WMS. L'item basemap dans le fichier de configuration permet de définir le WMS à utiliser.

Code

Visualiser le code 
<!-- GeomapStart -->
<div id="location_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/configwms-fr.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 -->
Visualiser le fichier de configuration 

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: []
};

Exemple de carte ESRI REST

Geomap peut être configuré pour utiliser une carte de base de type ESRI REST. L'item basemap dans le fichier de configuration permet de définir le service à utiliser.

Code

Visualiser le code 
<!-- GeomapStart -->
<div id="esri_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/config-esri-fr.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 -->
Visualiser le fichier de configuration 

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
		}
	}
};

Exemple de carte de base OSM

Geomap peut être configuré pour utiliser un service de OSM comme carte de base. La configuration peut être effectuée dans le paramètre basemap du fichier config.

Code

Visualiser le code 
<!-- GeomapStart -->
<div id="osm_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/config-osm-fr.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 -->
Visualiser le fichier de configuration 

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

Exemple de carte de base XYZ

Geomap peut être configuré pour utiliser un service de tuiles XYZ (ex : MapQuest) comme carte de base. La configuration peut être effectuée dans le paramètre basemap du fichier config.

Avant la BOEW 4.0.31 le service utilisé pour créer cet example n'est plus supporté. Veuillez consulter la configuration revisé ci-dessous.

Code

Visualiser le code 
<!-- GeomapStart -->
<div id="xyz_map"
	class="wb-geomap"
	data-wb-geomap='{
		"layersFile": "demo/config-xyz-fr.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 -->
Visualiser le fichier de configuration 

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
	}
};

Filtrer la carte

Légende

Points
Tableau de géométrie point
Rang Subdivision de recensement Population de 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

Visualiser le 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">
			<!-- Les dimension ci-dessous sont approximative pour cette demonstration seulement -->
			<option selected value="64.097 -10.63 34.692 -177.659">Canada</option>
			<option value="60 -120 48 -139">Colombie Britanique</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">Couche:</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="">(tous)</option>
		</select>
	</div>
	<button class="btn btn-primary" aria-controls="sample_map_filter" type="submit">Filtrer</button>
	<button class="btn btn-link" type="reset">Réinitialiser la page aux valeurs par défaut</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 de 2011",
			"popups": true,
			"popupsInfo": {
				"content": "<div style=\"white-space:nowrap;\"><p><strong>Subdivision de recensement: </strong>_Subdivision de recensement<div><a href=\"#\" class=\"button\" role=\"button\" title=\"Zoom à la ville\" aria-label=\"Zoom à la ville\" onclick=\"wb.doc.zoomFeature()\">Zoom à la ville</a></div></div>"
			},
			"style": {
				"type": "rule",
				"rule": [
				{
					"field": "Rang",
					"value": [3],
					"filter": "GREATER_THAN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 2.6,
						"fillOpacity": 1.0,
						"strokeWidth": 8,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rang",
					"value": [2, 3],
					"filter": "BETWEEN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 4,
						"fillOpacity": 1.0,
						"strokeWidth": 12,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rang",
					"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": "*NEEDS TRANSLATION*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": "Opération",
			"popups": true,
			"attributes": {
				"Type_": "Type",
				"OwnersF": "Opérateur / propriétaire",
				"OperationF": "Opération",
				"ComGroupF": "Groupe de produits minéraux",
				"CommodityF": "Produit minérale"
			},
			"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": "Mines de charbon"
					},
					"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": "Mines de métaux"
					},
					"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": "Mines de non-métaux"
					},
					"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": "Mines de sables bitumineux"
					}
				},
				"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": "*NEEDS TRANSLATION*This is a sample dataset loaded from a remote TopoJSON resource.",
			"type": "topojson",
			"url": "demo/topojson.json",
			"accessible": false,
			"style": {
				"strokeColor": "#3399ff",
				"strokeWidth": 2.0
			},
			"visible": false
		}]
	}'>

	<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">Légende</h3>
				</header>
				<div class="panel-body">
					<div class="wb-geomap-legend"></div>
				</div>
			</div>
		</section>
	</div>

	<div class="wb-geomap-layers col-md-12">
		<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>Tableau de géométrie point</caption>
					<thead>
						<tr>
							<th>Rang</th>
							<th>Subdivision de recensement</th>
							<th>Population de 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 class="select"><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 à AOI au chargement de la page (étendue)

Code

Visualiser le code 
<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="bc-geomap">
	<div class="form-group">
		<label for="zoomBCArea">Régions de C.-B.:</label>
		<select class="form-control" data-filter="aoi" id="zoomBCArea">
			<option value="63 -110 50 -128" selected>Sélectionnez une région</option>
			<option value="61 -124 55.33 -140.6">Nord</option>
			<option value="50.802 -123.316 48.312 -128.578">Île de Vancouver et la côte</option>
			<option value="50.2806 -121.7203 49.0199 -124.4421">Basse-terre continentale</option>
			<option value="52.4999 -118.5493 48.9964 -114.0535">Intérieur sud</option>
		</select>
	</div>
	<button aria-controls="bc-geomap" class="btn btn-primary" type="submit">Filtrer</button>
	<button class="btn btn-link" type="reset">Réinitialiser la page aux valeurs par défaut</button>
</form>
<div class="wb-geomap" id="bc-geomap" data-wb-geomap='{
	"mapExtent": "63, -110, 50, -128"
}'>
	<div class="wb-geomap-map"></div>
</div>

Fusionner la légende et le symbole

Lorsque le calque de légende ne comporte qu'un seul élément de légende, masquez l'élément de légende et ne conservez que l'étiquette avec l'icône.

Légende

Choisissez parmi les programmes PacifiCan suivants pour voir les projets financés à travers la Colombie-Britannique :

Afficher les éléments de la légende su deux colonnes

Légende

Choisissez parmi les programmes PacifiCan suivants pour voir les projets financés à travers la Colombie-Britannique :

Date de modification :