Geomap

Questions or comments?

Purpose

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

Use when

Working example

How to implement

  1. Add a div element with class="wb-geomap" and assign it a unique id.
  2. Add div with class="wb-geomap-map" to the div created in step 1 where you want the map to be rendered.
  3. Add div with class="wb-geomap-layers" to the div created in step 1 where you want the layer(s) listing to be rendered.

Optional elements

Note: If you are implementing the working example on your development environment you may need to add the necessary support for the mime-types required by the various formats demonstrated (e.g. ".kml" "application/vnd.google-earth.kml+xml") to your web server.

Example implementation markup

<-- Add plugin with optional position widget -->
<div id="mygeomap" class="wb-geomap position">
	<div class="row">
		<div class="col-md-9">
			<div class="wb-geomap-map"></div>
		</div>
		<-- Add optional map legend -->
		<div class="wb-geomap-legend col-md-3">
			<h2>Legend</h2>
			<-- Geomap will insert legend here -->
		</div>
		<div class="row">
			<-- Add placeholder for overlays -->
			<div class="wb-geomap-layers col-md-12"></div>
		</div>
	</div>
</div>

Plugin configuration options

Geomap can be configured in four ways:

  • Using the data-wb-geomap attribute on the plugin element
  • Using window[ "wb-geomap" ]
  • Using a configuration file
  • Using CSS classes on the plugin element
Note: all plugin configuration parameters are optional.

Configuration using data-wb-geomap attribute on plugin element

Use the data-wb-geomap attribute to configure the display of map features from inline HTML tables or from a local/remote datasource.

Parameter Value Description
tables Array An array if inline HTML table id's from which map features are to be loaded and their configurations.
layersFile String Path to local or remote JavaScript configuration file that lists feature layers that are to be added to the map.
mapExtent String Text containing the Latitude and Longitude coordinate of the bounding box in the following order:
  1. Latitude of bottom-left corner
  2. Longitude of bottom-left corner
  3. Latitude of top-right corner
  4. Longitude of top-right corner
For example: "63, -110, 50, -128"

Configuration using a configuration file

An optional configuration file can be used to specify alternative basemaps and external feature overlays. The configuration file is referenced in the data-wet-beow attribute of the plugin element by setting the layersFile property to the file path.

Parameter Value Description
basemap JavaScript Object A base map configuration that includes map settings (e.g., maximum and default extents, units, projection, etc.) and connection specifics for a WMS base map service.
overlays Array A list of layers to be added to the map with associated configurations.
Example configuration file reference
<div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "layersFile": "data/config-en.min.js" }'> ... </div>

Configuration using CSS classes

Configure which features and widgets you want added to your map by using CSS classes.

Class Description
aoi

If present, an area-of-interest (AOI) widget is added to the map. The AOI widget allows user to draw a bounding box extent to the map where the coordinates are made available in a hidden field that developers can attach a listener to. Useful for search and discovery applications. AOI should be used when the map takes the full width of content page.

Geomap will write the AOI extent to two hidden fields, one in the maps projection and the other in longitude/latitude.

<input type="hidden" id="geomap-aoi-extent-1" value="553816,1951915,2188045,3573694">
<input type="hidden" id="geomap-aoi-extent-lonlat-1" value="-73, 65, -39, 76">

Access the values of the hidden fields by attaching a listener to the "change" event.

var $document = wb.doc, mapSample;

$document.on( "wb-ready.wb-geomap", "#sample_map", function( event, map ) {

	// Get the sample_map to use in zoomFeature function
	mapSample = map;
	var $aoiExtent = $( "#geomap-aoi-extent-" + mapSample.id ),
		$aoiExtentLonLat = $( "#geomap-aoi-extent-lonlat-" + mapSample.id );

	if ( $aoiExtent ) {

		$aoiExtent.on( "change", function() {
			console.log( "BBox: " + $( this ).val() );
		} );

		$aoiExtentLonLat.on( "change", function() {
			console.log( "BBox LonLat: " + $( this ).val() );
		} );
	}
} );

The AOI widget can be configured (v4.0.11+) so that it is enabled by default by setting the toggle property to false using the data-wb-geomap attribute on plugin element.

<div id="mygeomap" class="wb-geomap" data-wb-geomap='{ ... "aoi": { "toggle": false } ... }'> ... </div>

The AOI widget can be configured(v4.0.11+) with an initial extent by setting the extent property using the data-wb-geomap attribute on plugin element.

<div id="mygeomap" class="wb-geomap" data-wb-geomap='{ ... "aoi": { "toggle": false, , "extent": "-57, 46, -51, 50" } ... }'> ... </div>
aoi-open If present, the area-of-interest (AOI) widget will rendered inside a panel instead of being rendered inside an expand/collapse.
geocoder If present, the geocoder widget will be added to the map. The geocoder widget allows users to search for postal codes, street addresses, placenames and NTS sheet numbers. The map is panned and zoomed to the location selected.
geolocation If present, the geolocation widget will be added to the map. When activated, the map will be panned and zoomed to the location of the client. Note that users must allow their client to share its location with Geomap.
position If present, the mouse position widget will be shown in the lower left corner of the map.
scaleline If present, the scale line widget will be shown in the lower left corner of the map.
static If present, the widgets (pan, zoom, select, etc.) will not be added to the map. This is useful for scenarios where a simple map with one or more features is required to communicate some value or idea (e.g. an extent map for a data product).
legend-label-only If present and if there is only one legend item within a certain layer, the symbol description will be hidden (as it can be the same as the label). In which case, the title of the layer must represent the legend item.
two-cols-legend Distribute the legend elements over two columns on medium screens and larger.

Configuration class example:

<div id="mygeomap" class="wb-geomap position scaleline"> ... </div>

Basemap configuration options

Note: Geomap does not require a base map configuration. A default base map will be provided if none is configured.

Parameter Required Value Default Description
title Yes String '' The title of the base layer (not displayed)
type Yes String '' The type of datasource. Note that this must be 'wms'.
url Yes String '' The url of the WMS service providing the base map. For example 'https://geogratis.gc.ca/maps/CBMT'.
layers No String '' A comma delimited string of layer ids to be requested from the WMS service.
format Yes String '' The mime-type of the format to be requested of the WMS service.
version Yes String '' The version of the WMS service being requested.
options No Array '' A comma delimitated array of OpenLayers options for WMS layer types.
mapOptions No Array '' An array of OpenLayers map configuration options.

Basemap configuration example

basemap : {
	title: 'CBMT',
	type: 'wms',
	url: 'https://geogratis.gc.ca/maps/CBMT',
	layers: 'CBMT',
	format: 'image/png',
	version: '1.1.1',
	options: { singleTile: true, 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: 12
	}
}

Adding feature overlays

Feature overlays can be generated from page markup (i.e. HTML tables) or from external sources (e.g. feeds, KML, web API's).

Adding features from an HTML table in the page

Geomap can create features from HTML markup in the page.

Steps:
  1. Add a unique id to each table (e.g. "myTable") and ensure that each table row (i.e. tr) element has the required attributes. See below for configuration.
  2. Add the unique id created in step 1 to a tables array in the data-wb-geomap attribute of the plugin element.
    <div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "tables": [ { "id": "myTable", "style": { ... } } ] }'> ... </div>
Inline HTML table configuration

Geomap requires a data-geometry attribute with feature geometry encoded in Well Known Text (WKT) or as a bounding box extent with lower left and upper right coordinate pairs, and a data-type attribute that specifies the encoding as either wkt or bbox.

WKT examples
<tr data-geometry="POINT (-114.05879 1.04668)" data-type="wkt"> ... </tr>
<tr data-geometry="LINESTRING (30 10, 10 30, 40 40)" data-type="wkt"> ... </tr>
<tr data-geometry="POLYGON ((30 10, 10 20, 20 40, 40 40, 30 10))" data-type="wkt"> ... </tr>

Other geometry types are supported. See Well-known text for more examples.

Bbox example
<tr data-geometry="-136, 61, -118, 70" data-type="bbox"> ... </tr>
Inline HTML table configuration example
<table id="cities" aria-label="Cities">
	<caption>Major cities in Canada.</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 class="select">
				<a href="../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 class="select">
				<a href="../Montreal" title="Montreal">Montreal</a>
			</td>
			<td>1649519</td>
		</tr>
		...
	</tbody>
</table>

Note that attribute names for features rendered from an inline HTML table are taken from the table header. In the preceding example the table header would result in attributes named "Rank", "Census subdivision", and "Population 2011".

Adding features from external datasources via a configuration file

Steps:
  1. Create a Javascript configuration file and save it to a web accessible directory (e.g. "data/config-en.min.js").
  2. Add an overlays array to the wet_boew_geomap variable in the configuration file.
    // Configuration file ("data/config-en.min.js")
    var wet_boew_geomap = {
    	overlays : [
    		{
    			title: 'KML Demo EN',
    			caption: 'This is a sample KML file loaded locally by Geomap.',
    			type: 'kml',
    			url: 'data/sample.kml',
    			visible: true
    		},
    		{ ... }
    	]
    };
  3. Reference the configuration file in the data-wb-geomap attribute of the plugin element by setting the layersFile property to the file path.
    <div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "layersFile": "data/config-en.min.js" }'> ... </div>

Feature overlay configuration options

Parameter Required Value Default Description
attributes No Array '' An array of feature attributes to be displayed in the table with their aliases. For example: attributes: { location_desc: 'Location', longitude: 'Latitude', latitude: 'Longitude', updated_at: 'Last updated' }. If the required attributes are not at the root element you can specify a path to the attribute. For example: attributes: { title: { path: "properties", alias: "Title" } }
caption Yes String '' The description of the overlay to be displayed in the table caption of the page.
datatable No Boolean '' If true the feature table will be enhanced using the Tables plugin which provides sorting, paging and searching functions.
params No Array '' An array of parameters to send to the datasource/service. For example: params: { 'alt': 'json', 'q': 'alluvial' }. These will be added to the request URI.
popups No Boolean '' If true popups for features will be enabled. Note that the "popupsInfo" parameter allows for customization of the popup and its content.
popupsInfo No String '' Allows for customization of popup content. Has several configuration options: "height" in pixels, "width" in pixels, "close" which if set to true will result in a close button being rendered, and "content" which can contain any HTML markup desired.
root No String '' Name of the root element that contains the array of objects that contain the features to be rendered.
style No Array '' An OpenLayers style object. Unique and rule based styles are supported. Note that Geomap will assign a default style if none is provided. However, the default color combination may not have the contrast required to meet WCAG guidelines. Therefore, a style should be configured before going into production.
tooltips (v4.0.31+) Yes Boolean '' If true, feature tooltips will be displayed.
tooltipText (v4.0.31+) Yes String '' The name of the attribute field where tooltip text will be taken from.
title Yes String '' The title of the overlay to be displayed in the legend, table, and/or the page.
type Yes String '' The type of datasource for the overlay. Must be one of: kml, json, geojson, wms, topojson (v4.0.31+), esrijson (v4.0.31+).
url Yes String '' The url of the datasource. For example 'https://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst'.
visible No Boolean false Controls the visibility of the overlay. Note that without a legend the visibility of an overlay can't be changed.
zoom No Boolean '' If true a "Zoom to feature" button will be added to each row in the feature table.

Feature overylay configuration example

{
	attributes: {
		location_desc: 'Location',
		longitude: 'Latitude',
		latitude: 'Longitude',
		updated_at: 'Last updated'
	},
	caption: 'Traffic cameras in the city of Ottawa.',
	datatable: true,
	params: {
		'format': 'GeoJSON',
		'q': 'SELECT * FROM traffic_cameras LIMIT 25'
	},
	style: { ... },
	tab: true,
	title: 'Traffic Cameras',
	type: 'geojson',
	url: 'https://stephenott.cartodb.com/api/v2/sql',
	visible: true,
	zoom:  true
}

Style configuration options

Basic style example - all features using the same style
style: {
	'strokeColor': '#ff0000',
	'fillColor': '#ff0000',
	'fillOpacity': '0.4'
}
Style example with override for selected feature
style: {
	type: 'symbol',
	init: { 'pointRadius': '15', 'externalGraphic': '../icon.png' },
	select: { 'pointRadius': '15', 'externalGraphic': '../icon_selected.png' }
}
Rule based example - features are styled according to specified rules
style: {
	type: 'rule',
	rule: [
		{
			field: 'Population2011',
			value: [ 1000000 ],
			filter: 'LESS_THAN',
			init: { strokeColor: '#0083f5', fillColor: '#57a8f0', pointRadius: '6' }
		},
		{
			field: 'Population2011',
			value: [ 1000000, 2000000 ],
			filter: 'BETWEEN',
			init: { strokeColor: '#F90', fillColor: '#F90', pointRadius: '8' }
		},
		{
			field: 'Population2011',
			value: [ 2000000 ],
			filter: 'GREATER_THAN',
			init: { strokeColor: '#F00', fillColor: '#F00', pointRadius: '10' }
		}
	]
}
Unique style example - features have unique style based on an attribute
style: {
	type: 'unique',
	field: 'Location',
	init: {
		// using the value from the 'Location' attribute, create a unique style for each feature
		'Bayshore & Richmond': { 'fillColor': '#000099' },
		'Baseline & Greenbank': { 'fillColor': '#009900' }
	},
	// specify a style for selected features (optional). Note here we are adding a label when
	// a feature is selected.
	select: { 'fillColor': '#990000', 'label': '${ Location }' }
}

Popup Configuration Options

To add popup with no customization simply add "popups": true. By default popups contain the same information as that is displayed in the corresponding table row for the feature.

If you need more control over your popups, you can customize them by passing a configuration through the "popupsInfo" parameter. The "popupsInfo" "content" parameter can contain any HTML markup you desire. Where feature attributes are required to be rendered simply add the attribute name with an underscore at the beginning. For example, if you have a feature attribute named "Census subdivision" you would reference it in your popup content as "_Census subdivision".

The following example shows all available configuration options:

...
"popups": true,
"popupsInfo": {
	"id": "citiesPopup",
	"height": 200,
	"width": 300,
	"close": true,
	"content": "<h4>_Census subdivision</h4><p>_Population 2011</p>"
},
...

Adding WMS Overlays (v4.0.11+)

Geomap will not generate an HTML table of map features for WMS overlays. Consequently WMS overlays should only be used when feature based alternatives are not available as accessibility is severly compromised.


{
	title: "WMS Demo",
	caption: "This is a sample WMS service loaded by Geomap.",
	type: "wms",
	url: "https://geo.weather.gc.ca/geomet/?Lang=E",
	visible: false,
	version: "1.1.1",
	format: "image/png",
	layers: "GDPS.ETA_PR",
	transparent: true,
	options: {
		opacity: 0.5
	}
}
	

WMS Legend

Geomap supports both graphic and HTML legends. WMS overlay legends can be configured in the options property of the layer configuration.

Graphic legend example:
...
options: {
	...
	legendGraphicUrl: "https://geo.weather.gc.ca/geomet/?Lang=E&LAYERS=GDPS.ETA_PR&VERSION=1.1.1&FORMAT=image%2Fpng&SERVICE=WMS&REQUEST=GetLegendGraphic&STYLE=PRECIPMM"
	...
}
...
HTML legend example:
...
options: {
	...
	legendHTML: "GeoMet Precipitation (mm)" +
		"<ul class='list-unstyled'>" +
		"<li><span style='background-color:#800000;display:inline-block;height:20px;width:20px'/> <small>100.0</small></li>" +
		"<li><span style='background-color:#FF0000;display:inline-block;height:20px;width:20px'/> <small>50.0</small></li>" +
		"<li><span style='background-color:#FFA500;display:inline-block;height:20px;width:20px'/> <small>20.0</small></li>" +
		"<li><span style='background-color:#E5E500;display:inline-block;height:20px;width:20px'/> <small>10.0</small></li>" +
		"</ul>"
	...
}
...

Advanced Configuration

Geomap provides developers with a hook to access the OpenLayers Map object. This can be useful if you have specific functionality that Geomap does not support out of the box. Geomap fires an event when it has loaded that you can attach a listener to.

Once Geomap has loaded, the OpenLayers Map object can be accessed as follows:

Pre v4.0.5

// return an array of OpenLayers maps in the page
wb.doc.on( "geomap.ready", function( event, maps ) {
	var myMap = maps.mygeomap; // return map with specfic id
	// do something
});

Note that the id (e.g. "mygeomap") of the div that contains the instance of Geomap you are accessing is used as the key in the maps array.

For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:

<script>
	wb.doc.on( "geomap.ready", function( event, maps ) {
		var myMap = maps.mygeomap;
		myMap.zoomToExtent( myMap.getLayer( "#bbox" ).getDataExtent(), true );
	});
</script>

v4.0.5+

// get the map object with id "mygeomap"
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	var myMap = map; // return OpenLayers map object
	// do something
});

Note the id (e.g. "mygeomap") of the div that contains the instance of Geomap you are accessing.

For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:

<script>
	$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
		// Get the map to use in zoomFeature function
		var myMap = map;
		myMap.zoomToExtent( myMap.getLayer( "#bbox" ).getDataExtent(), true );
	});
</script>

v4.0.31+

// get the map object with id "mygeomap"
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	var myMap = map; // return OpenLayers map object
	// do something
});

Note the id (e.g. "mygeomap") of the div that contains the instance of Geomap you are accessing.

For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:

<script>
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	// Get the map to use in zoomFeature function
	var myMap = map;
	myMap.getView().setCenter( -75.70535, 45.3995 );

	// if reprojection is needed
	// myMap.getView().setCenter( ol.proj.transform( [ -75.70535, 45.3995 ], "EPSG:4326", "EPSG:3978" ) );

	myMap.getView().setZoom( 5 );
});
</script>

Filtering

You can apply the following filter:

Implementation requirement:

data-fitler="aoi"

The value of the option is as 4 cardinal point (North East South West) or as Well-known text (WKT) if there is any letter. For example:

  • value="60 -120 48 -139"
  • 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))"

You can use the geomap draw box tool to calculate the 4 cardinal point and for WKT you can find some online tool that could generate it for you.

data-filter="layer"

The value of the option should match one of the geomap layer/overlay title. If left empty, all the layers would be selected.

WET-BOEW Geomap Javascript API

Note: The Javascript API documentation bellow is incomplete. If you have any question please open a github issue.

Retrieve the geomap object

Via wb javascript object
See the above technical note for wet-boew 4.0.31+ release
Via the .wb-geomap DOM element
var geomap = $( ".wb-geomap" ).get( 0 ).geomap;

geomap Object

Options:

Instance properties:

id
Id of the geomap DOM element.
layerDiv
JQuery pointer to the layer <div> DOM element
legend
MapLegend object
legendDiv
jQuery pointer to the legend <div> DOM element
map
OpenLayer 3 map object
mapDiv
jQuery pointer to the map <div> DOM element
mapLayer
Array of mapLayer object
settings
All settings/configuration set for that map. It include setting set through a javascript configuration files

Prototype:

MapLayer Object

Options:

Instance properties:

id
Uniquer identifier set for that layer
layer
OpenLayer layer Vector object
map
Geomap object
observeVisibility
Add callback for when the layer visibility change
settings
All settings/configuration set for that map. It include setting set through a javascript configuration files
visibilityState
Boolean indicating if the layer is visible or not.

Prototype:

MapLegend Object

Options:

Instance properties:

map
Geomap object
symbolMapArray
Array of Open Layer map for symbol
target
JQuery pointer to the legend <div> DOM element

Prototype:

Events

Event Trigger What it does
wb-init.wb-geomap Triggered manually (e.g., $( ".wb-geomap" ).trigger( "wb-init.wb-geomap" );). Used to manually initialize the Geomap plugin. Note: The Geomap plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-geomap (v4.0.5+) Triggered automatically after Geomap initializes. Used to identify the element where Geomap has initialized (target of the event) and to pass along the map object.
$( document ).on( "wb-ready.wb-geomap", ".wb-geomap", function( event, map ) {
});
$( ".wb-geomap" ).on( "wb-ready.wb-geomap", function( event, map ) {
});
wb-updated.wb-geomap (v4.0.5+) Triggered automatically after Geomap updates (e.g., change in zoom). Used to identify the element where Geomap has been updated (target of the event) and to pass along the map object.
$( document ).on( "wb-updated.wb-geomap", ".wb-geomap", function( event, map ) {
});
$( ".wb-geomap" ).on( "wb-updated.wb-geomap", function( event, map ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing.
$( document ).on( "wb-ready.wb", function( event ) {
});

Filtering

A form with the CSS class .wb-geomap-filter

submit (form)
Apply geomap filter for select input with a data-filter attribute
click (reset button)
Apply the default selection for select input with a data-filter attribute

Upgrade Notes for v4.0.31

Since WET 4.0.31 we updated geomap to use to OpenLayers v3.20.1. Existing configurations are supported with few exceptions. OpenLayers 3 was a complete rewrite of the library and as such any interactions with the OpenLayers Map Object in your applications will need to be rewritten to use the OpenLayers v3.20.1 API.

The following datasource formats are no longer supported.

WellKnownText POINT features with commas won't be supported in the future. Remove all commas in WellKnownText POINT features.

Source code

Geomap plugin source code on GitHub

Date modified: