Geomap - prior v4.0.30

Notice - Working example on this page

Please note all the following example are now deprecated since v4.0.31 and we recommend to update your geomap markup and code as per the latest working example. The examples in this page should be taken as test example to ensure subsequent version of WET 4.0.x are continuing to work how the geomap bellow were coded.

Dynamic map example

Legend

Example - Remote & File-based Layer Data

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

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

Code

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

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": "v4.0.30/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": "v4.0.30/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 OSM Tile service (e.g. MapQuest) as 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": "v4.0.30/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:"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 modified: