- Skip to main content
- Skip to "About this site"

# Geomap

- Documentation
- Questions or comments?

## Purpose

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

## 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": "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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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": "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: "http://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": "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:
  2014-07-22