Géocarte - avant v4.0.30

Avis - Example practique dans cette page

Veuillez noter que les examples suivants sont maintenant obselet depuis la version 4.0.31 et que nous vous recommendons de mettre à jour le balisage et le code de vos géomap tel qu'illustré dans les derniers examples pratiques. Les examples dans cette page devrait être considéré comme des mise à l'essaie afin de s'assuré que les version subséquente de la BOEW v4.0.x continue de fonctionner selon les codes de géomap ci-dessous.

Carte dynamique - Exemple

Légende

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

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

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

Code

Visualiser le code 
<!-- GeomapStart -->
<div id="sample_map"
	class="wb-geomap position scaleline tab geocoder aoi geolocation"
	data-wb-geomap='{
		"layersFile": "v4.0.30/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".

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": "v4.0.30/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 = {
				// OPTIONNEL: Géomap va fournir une carte de base par défaut si aucune carte de base n"est spécifié ici.
				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": "v4.0.30/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 tuiles OSM (ex : MapQuest) 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": "v4.0.30/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:"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
				}
			};
Date de modification :